@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/fesm2022/slotted-angular-checkbox.mjs

@@ -0,0 +1,468 @@
+import { createControllable } from '@slotted/core/state';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, Directive, input, booleanAttribute, output, HostAttributeToken, viewChild, signal, contentChild, computed, effect, DestroyRef, afterNextRender, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlCheckboxGroup } from '@slotted/angular/checkbox-group';
+import { SlField } from '@slotted/angular/field';
+import { SlFieldGroup } from '@slotted/angular/field-group';
+
+const FALLBACK = { labelPlacement: 'end', size: 'md', variant: 'plain' };
+const CHECKBOX_DEFAULTS = new InjectionToken('slotted checkbox defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once what its checkboxes look like, rather than
+ * repeating the same inputs on every box in a form. A box that states either of
+ * them itself still wins, and so does the group or field around it.
+ */
+function provideCheckboxDefaults(defaults) {
+    return {
+        provide: CHECKBOX_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a checkbox renders as here, before it states anything of its own. */
+function injectCheckboxDefaults() {
+    return inject(CHECKBOX_DEFAULTS);
+}
+/**
+ * Application-scoped rather than module-scoped, for the reason `field` records:
+ * a module-level counter produces colliding sequences when two applications
+ * render in one server process, and the server and the client sequences must
+ * match for hydration.
+ */
+class SlCheckboxIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-checkbox-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCheckboxIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCheckboxIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCheckboxIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Help text under a box's label.
+ *
+ * It is a directive on the consumer's own element, so a `p`, a `span` or an
+ * `inline-message` all work and none of them loses its own semantics. It
+ * carries an identifier the box points `aria-describedby` at, which is what
+ * makes the sentence a description rather than part of the name — and it is
+ * projected outside the `label` for the same reason.
+ */
+class SlCheckboxDescription {
+    id = `${inject(SlCheckboxIdFactory).next()}-description`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCheckboxDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlCheckboxDescription, isStandalone: true, selector: "[slCheckboxDescription]", host: { attributes: { "data-part": "description" }, properties: { "attr.id": "id" } }, exportAs: ["slCheckboxDescription"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCheckboxDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slCheckboxDescription]',
+                    standalone: true,
+                    exportAs: 'slCheckboxDescription',
+                    host: {
+                        'data-part': 'description',
+                        '[attr.id]': 'id',
+                    },
+                }]
+        }] });
+
+/**
+ * A click synthesised by the keyboard reports no detail; a real one reports the
+ * click count. It is the rule every activating family in this library writes,
+ * and it is why `Space` and a pointer are told apart without a key listener.
+ */
+function activationReason(event) {
+    return event instanceof MouseEvent && event.detail === 0 ? 'keyboard' : 'pointer';
+}
+/**
+ * One choice, ticked or not.
+ *
+ * **The control is the platform's.** The element holding the value is a native
+ * `input[type=checkbox]`, so `Space`, the form, `name`, `value`, `form.reset()`
+ * and every native attribute arrive without a listener of this family's own.
+ * The host element is the root, and it carries no role.
+ *
+ * **The mark is a sibling, not a pseudo-element.** Firefox renders neither
+ * `::before` nor `::after` on an `input`, so the glyph is drawn in an element
+ * beside the control. It is the dash while indeterminate — mixed outranks the
+ * check — and the stylesheet only reveals it on `:checked` or `:indeterminate`.
+ *
+ * **Angular pays one element for the root, and React pays none.** React can
+ * render a wrapper from inside a component; an Angular component's host *is*
+ * the wrapper, so `<div slCheckbox>` is the root and the control lives in its
+ * template.
+ *
+ * **Unset means ask the group, then the field.** `disabled`, `readOnly` and
+ * `invalid` default to `undefined` rather than `false`, which is what makes
+ * "not disabled" and "said nothing" different answers.
+ */
+/** A label with content, all of it hidden text: nothing a sighted reader sees. */
+function showsNothing(label) {
+    if (label.childNodes.length === 0)
+        return false;
+    return [...label.childNodes].every((node) => node.nodeType === Node.TEXT_NODE || node.nodeType === Node.COMMENT_NODE
+        ? node.nodeType === Node.COMMENT_NODE || (node.textContent ?? '').trim() === ''
+        : node instanceof Element && node.getAttribute('data-ui') === 'visually-hidden');
+}
+class SlCheckbox {
+    /** Present means the consumer owns the state. */
+    checked = input(undefined, { ...(ngDevMode ? { debugName: "checked" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /** Whether the box starts ticked, when the control is uncontrolled. */
+    defaultChecked = input(false, { ...(ngDevMode ? { debugName: "defaultChecked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The mixed state. It is a state and never a third value of `checked`: the
+     * submitted value stays boolean, and the platform agrees — `indeterminate` is
+     * an IDL property that leaves `checked` alone.
+     */
+    indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Commands the whole set its group was given in `allValues`. Outside such a
+     * group it does nothing, because there is no set to command.
+     */
+    parent = input(false, { ...(ngDevMode ? { debugName: "parent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** What this box selects inside a group, and what it submits in a form. */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    labelPlacement = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPlacement" }] : /* istanbul ignore next */ []));
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Unstated rather than `false`, so the box defers to its group or field. */
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    readOnly = input(undefined, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    invalid = input(undefined, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /**
+     * One output for one transition, carrying the new state, the state it
+     * replaces, the reason, the originating event and `cancel()`. There is no
+     * `[(checked)]`, because a two-way binding has one slot and can carry none of
+     * those; a form gets the same movement through `ControlValueAccessor`.
+     */
+    checkedChange = output();
+    group = inject(SlCheckboxGroup, { optional: true });
+    field = inject(SlField, { optional: true });
+    fieldGroup = inject(SlFieldGroup, { optional: true });
+    defaults = injectCheckboxDefaults();
+    writtenId = inject(new HostAttributeToken('id'), { optional: true });
+    writtenDescribedBy = inject(new HostAttributeToken('aria-describedby'), {
+        optional: true,
+    });
+    writtenRequired = inject(new HostAttributeToken('required'), {
+        optional: true,
+    });
+    element = viewChild.required('control', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []));
+    label = viewChild.required('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the label shows nothing: its only content is hidden text, the name
+     * a table row or a data list gives a bare box. Read from the projected DOM,
+     * and read again when it changes.
+     */
+    labelHidden = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelHidden" }] : /* istanbul ignore next */ []));
+    description = contentChild(SlCheckboxDescription, { ...(ngDevMode ? { debugName: "description" } : /* istanbul ignore next */ {}), descendants: true });
+    own = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "own" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    /** Whether a form directive owns the value through `ControlValueAccessor`. */
+    formBound = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formBound" }] : /* istanbul ignore next */ []));
+    onChangeFn = () => undefined;
+    onTouchedFn = () => undefined;
+    /** The identifier the label points at. A consumer's own wins. */
+    controlId = this.writtenId ?? inject(SlCheckboxIdFactory).next();
+    /**
+     * Three ways a box can know whether it is ticked, decided by what is around
+     * it rather than by a mode input: a parent reads the whole set, a member
+     * reads whether the selection holds its own value, and a box on its own reads
+     * the consumer's `checked` or the state it keeps.
+     */
+    isParent = computed(() => this.parent() && this.group !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isParent" }] : /* istanbul ignore next */ []));
+    memberValue = computed(() => !this.isParent() && this.group !== null ? this.value() : undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "memberValue" }] : /* istanbul ignore next */ []));
+    resolvedChecked = computed(() => {
+        const group = this.group;
+        if (this.isParent() && group !== null) {
+            const all = group.allValues() ?? [];
+            return all.length > 0 && all.every((item) => group.holds(item));
+        }
+        const member = this.memberValue();
+        if (member !== undefined && group !== null)
+            return group.holds(member);
+        return this.checked() ?? this.own();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedChecked" }] : /* istanbul ignore next */ []));
+    resolvedIndeterminate = computed(() => {
+        const group = this.group;
+        if (!this.isParent() || group === null)
+            return this.indeterminate();
+        const all = group.allValues() ?? [];
+        return all.some((item) => group.holds(item)) && !this.resolvedChecked();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedIndeterminate" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ??
+        this.group?.resolvedSize() ??
+        this.field?.resolvedSize() ??
+        this.fieldGroup?.resolvedSize() ??
+        this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedLabelPlacement = computed(() => this.labelPlacement() ?? this.group?.resolvedLabelPlacement() ?? this.defaults.labelPlacement, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLabelPlacement" }] : /* istanbul ignore next */ []));
+    /**
+     * One step shorter than `size`: a box states it, else the group around it,
+     * else the provider. It never comes from the field — a field decides how its
+     * own row is laid out, and a framed choice is a decision about the choice.
+     */
+    resolvedVariant = computed(() => this.variant() ?? this.group?.resolvedVariant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedDisabled = computed(() => this.disabled() ??
+        this.formDisabled() ??
+        this.group?.resolvedDisabled() ??
+        this.field?.resolvedDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    resolvedReadOnly = computed(() => this.readOnly() ?? this.group?.resolvedReadOnly() ?? this.field?.resolvedReadOnly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedReadOnly" }] : /* istanbul ignore next */ []));
+    resolvedInvalid = computed(() => this.invalid() ?? this.group?.resolvedInvalid() ?? this.field?.invalid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInvalid" }] : /* istanbul ignore next */ []));
+    resolvedRequired = computed(() => this.field?.required() ?? this.group?.resolvedRequired() ?? this.fieldGroup?.required(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedRequired" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the box keeps its own state and starts it from `defaultChecked`:
+     * nobody passed `checked`, no group holds it, and no form directive bound it.
+     */
+    ownsDefault = computed(() => this.checked() === undefined && this.group === null && !this.formBound(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownsDefault" }] : /* istanbul ignore next */ []));
+    /**
+     * The content attribute `checked`, which is what a native form reset puts
+     * the element back to. A box that owns its state writes `defaultChecked`
+     * there, the attribute React writes for the same prop. A box whose state
+     * belongs to a consumer, a group or a form directive writes its current
+     * state, so a native reset leaves the element showing what its owner holds.
+     */
+    defaultAttribute = computed(() => (this.ownsDefault() ? this.defaultChecked() : this.resolvedChecked()) ? '' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultAttribute" }] : /* istanbul ignore next */ []));
+    resolvedName = computed(() => this.name() ?? this.group?.name() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedName" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        const merged = [
+            this.writtenDescribedBy,
+            this.description()?.id,
+            this.group === null ? this.field?.describedBy() : undefined,
+        ].filter(Boolean);
+        return merged.length === 0 ? null : merged.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    ariaInvalid = computed(() => this.resolvedInvalid() === true ? 'true' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
+    ariaReadOnly = computed(() => this.resolvedReadOnly() === true ? 'true' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaReadOnly" }] : /* istanbul ignore next */ []));
+    ariaRequired = computed(() => this.resolvedRequired() === true ? 'true' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
+    disabledAttribute = computed(() => this.resolvedDisabled() === true ? '' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledAttribute" }] : /* istanbul ignore next */ []));
+    /** The element's own attribute, passed through and never written by the family. */
+    requiredAttribute = computed(() => this.writtenRequired ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "requiredAttribute" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /**
+         * `indeterminate` has no attribute; it is an IDL property, which is why
+         * every implementation writes it from script and why the stylesheet reads
+         * `:indeterminate` and stays in step with the element rather than with a
+         * render.
+         */
+        effect(() => {
+            this.element().nativeElement.indeterminate = this.resolvedIndeterminate();
+        });
+        const destroy = inject(DestroyRef);
+        afterNextRender(() => {
+            /* A native reset restores the element and tells nothing, so a box that
+               owns its state puts it back to where it started. The form is reached
+               through the element, because `form` may name a form anywhere. */
+            const form = this.element().nativeElement.form;
+            if (form !== null) {
+                const onReset = () => {
+                    if (this.ownsDefault())
+                        this.own.set(this.defaultChecked());
+                };
+                form.addEventListener('reset', onReset);
+                destroy.onDestroy(() => form.removeEventListener('reset', onReset));
+            }
+            const label = this.label().nativeElement;
+            const read = () => this.labelHidden.set(showsNothing(label));
+            read();
+            if (typeof MutationObserver === 'undefined')
+                return;
+            const watch = new MutationObserver(read);
+            watch.observe(label, { childList: true, characterData: true, subtree: true });
+            destroy.onDestroy(() => watch.disconnect());
+        });
+    }
+    ngOnInit() {
+        if (this.checked() === undefined && this.group === null)
+            this.own.set(this.defaultChecked());
+    }
+    /** The native element, for `focus()` and `click()`. */
+    get inputElement() {
+        return this.element().nativeElement;
+    }
+    writeValue(value) {
+        this.own.set(value === true);
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+        this.formBound.set(true);
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    /**
+     * One handler for the pointer and for `Space`, because the platform fires one
+     * `click` for both — and refusing the default is the only way to refuse a
+     * change a checkbox has no `readonly` to refuse.
+     *
+     * Nothing here writes the element. The HTML standard's canceled activation
+     * behaviour for a checkbox is `checked = !checked` rather than a restore of a
+     * saved value, so a family that corrected the element inside the listener
+     * would have that correction toggled back out from under it. Refusing the
+     * default and letting the platform undo its own pre-click toggle is both
+     * shorter and the only version that is right: it was measured, in the first
+     * run of this family's Angular spec, as a controlled box that stayed ticked
+     * after its consumer had said no.
+     */
+    onClick(event) {
+        if (this.resolvedReadOnly() === true) {
+            event.preventDefault();
+            return;
+        }
+        const reason = activationReason(event);
+        const next = !this.resolvedChecked();
+        let cancelled = false;
+        const state = createControllable({
+            controlled: this.checked() ?? (this.group === null ? undefined : this.resolvedChecked()),
+            initial: this.resolvedChecked(),
+            onRequest: (request) => {
+                this.checkedChange.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        const moved = state.request(next, reason, event);
+        if (cancelled) {
+            event.preventDefault();
+            return;
+        }
+        if (this.isParent()) {
+            if (this.group?.requestAll(next, reason, event) !== true)
+                event.preventDefault();
+            return;
+        }
+        const member = this.memberValue();
+        if (member !== undefined) {
+            if (this.group?.toggle(member, reason, event) !== true)
+                event.preventDefault();
+            return;
+        }
+        /* Controlled: the consumer owns the state and has been told. The element
+           must not move on its own, so the activation is refused and the platform
+           puts it back. */
+        if (!moved) {
+            event.preventDefault();
+            return;
+        }
+        this.own.set(next);
+        this.onChangeFn(next);
+    }
+    onBlur() {
+        this.onTouchedFn();
+        this.group?.markTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: SlCheckbox, isStandalone: true, selector: "[slCheckbox]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, defaultChecked: { classPropertyName: "defaultChecked", publicName: "defaultChecked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, labelPlacement: { classPropertyName: "labelPlacement", publicName: "labelPlacement", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, host: { attributes: { "data-ui": "checkbox", "data-part": "root" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-label-placement": "resolvedLabelPlacement()", "attr.data-variant": "resolvedVariant()", "attr.data-checked": "resolvedChecked() ? '' : null", "attr.data-indeterminate": "resolvedIndeterminate() ? '' : null", "attr.data-disabled": "resolvedDisabled() === true ? '' : null", "attr.data-invalid": "resolvedInvalid() === true ? '' : null", "attr.data-readonly": "resolvedReadOnly() === true ? '' : null", "attr.data-label-hidden": "labelHidden() ? '' : null" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlCheckbox), multi: true },
+        ], queries: [{ propertyName: "description", first: true, predicate: SlCheckboxDescription, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "element", first: true, predicate: ["control"], descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true, isSignal: true }], exportAs: ["slCheckbox"], ngImport: i0, template: `<input
+      #control
+      data-part="control"
+      type="checkbox"
+      [attr.id]="controlId"
+      [attr.name]="resolvedName()"
+      [attr.value]="value()"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-invalid]="ariaInvalid()"
+      [attr.aria-readonly]="ariaReadOnly()"
+      [attr.aria-required]="ariaRequired()"
+      [attr.disabled]="disabledAttribute()"
+      [attr.required]="requiredAttribute()"
+      [checked]="resolvedChecked()"
+      [attr.checked]="defaultAttribute()"
+      (click)="onClick($event)"
+      (blur)="onBlur()"
+    />
+    <span data-part="indicator"
+      ><span slIcon><svg slGlyph [name]="resolvedIndeterminate() ? 'minus' : 'check'"></svg></span
+    ></span>
+    <label #label data-part="label" [attr.for]="controlId"><ng-content /></label>
+    <ng-content select="[slCheckboxDescription]" />`, isInline: true, styles: ["@layer slotted.components{[data-ui=checkbox][data-part=root]{--_size: var(--slotted-checkbox-size, var(--slotted-selection-size-md, 16px));--_font-size: var(--slotted-control-font-size-md, 13px);--_gap: var(--slotted-control-label-gap-md, 12px);--_line-height: var(--slotted-checkbox-line-height, var(--slotted-line-height-md, 1.5));--_mark-inset: var(--slotted-checkbox-mark-inset, 2px);--_mark-size: calc(var(--_size) - 2 * var(--_mark-inset));--_halo-spread: calc(var(--_gap) / 2);--_target: var(--slotted-target-min, 24px);--_lift: calc((var(--_font-size) * var(--_line-height) - var(--_size)) / 2);--_description-gap: var(--slotted-space-3, .375rem);align-content:start;color:var(--slotted-checkbox-color, var(--slotted-text, CanvasText));display:grid;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);grid-template-columns:auto minmax(0,1fr);isolation:isolate;line-height:var(--_line-height);position:relative}[data-ui=checkbox][data-part=root]{--_direction: ltr}[data-ui=checkbox][data-part=root]:dir(rtl){--_direction: rtl}[data-ui=checkbox][data-part=root][data-size=sm]{--_size: var(--slotted-checkbox-size, var(--slotted-selection-size-sm, 14px));--_font-size: var(--slotted-control-font-size-sm, 12px);--_gap: var(--slotted-control-label-gap-sm, 8px);--_tile-inset: var( --slotted-checkbox-tile-inset, var(--slotted-control-padding-inline-sm, 10px) )}[data-ui=checkbox][data-part=root][data-size=md]{--_size: var(--slotted-checkbox-size, var(--slotted-selection-size-md, 16px));--_font-size: var(--slotted-control-font-size-md, 13px);--_gap: var(--slotted-control-label-gap-md, 12px);--_tile-inset: var( --slotted-checkbox-tile-inset, var(--slotted-control-padding-inline-md, 13px) )}[data-ui=checkbox][data-part=root][data-size=lg]{--_size: var(--slotted-checkbox-size, var(--slotted-selection-size-lg, 18px));--_font-size: var(--slotted-control-font-size-lg, 14px);--_gap: var(--slotted-control-label-gap-lg, 12px);--_tile-inset: var( --slotted-checkbox-tile-inset, var(--slotted-control-padding-inline-lg, 16px) )}[data-ui=checkbox] [data-part=control]{appearance:none;background-color:var(--slotted-checkbox-background, var(--slotted-surface, Canvas));border:var(--slotted-checkbox-border-width, var(--slotted-border-width-medium, 1.5px)) solid var(--slotted-checkbox-border-color, var(--slotted-border-strong, ButtonBorder));border-radius:var(--slotted-checkbox-radius, var(--slotted-radius-xs, 2px));block-size:var(--_size);box-sizing:border-box;cursor:pointer;grid-area:1 / 1;inline-size:var(--_size);margin:0;margin-block-start:var(--_lift);margin-block-end:var(--_lift);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=checkbox] [data-part=indicator]{--slotted-icon-size: var(--_mark-size);block-size:var(--_mark-size);clip-path:inset(0% 100% 0% 0%);color:var(--slotted-checkbox-mark-color, var(--slotted-tone-accent-on-solid));display:flex;grid-area:1 / 1;inline-size:var(--_mark-size);margin-block-start:calc(var(--_lift) + var(--_mark-inset));margin-inline-start:var(--_mark-inset);opacity:0;pointer-events:none;transition:clip-path var(--slotted-duration-medium) var(--slotted-control-transition-easing),opacity var(--slotted-duration-medium) var(--slotted-control-transition-easing)}[data-ui=checkbox] [data-part=control]:checked+[data-part=indicator],[data-ui=checkbox] [data-part=control]:indeterminate+[data-part=indicator]{clip-path:inset(0% 0% 0% 0%);opacity:1}@media(prefers-reduced-motion:reduce){[data-ui=checkbox] [data-part=indicator],[data-ui=checkbox] [data-part=control]:checked+[data-part=indicator],[data-ui=checkbox] [data-part=control]:indeterminate+[data-part=indicator]{clip-path:none;transition:opacity var(--slotted-duration-medium) var(--slotted-control-transition-easing)}}[data-ui=checkbox] [data-part=label]{cursor:pointer;grid-column:2;grid-row:1;overflow-wrap:anywhere}[data-ui=checkbox][data-part=root]:has(>[data-part=label]){column-gap:var(--_gap)}[data-ui=checkbox][data-part=root]:not([data-variant=tile]) [data-part=label]{justify-self:start;position:relative}[data-ui=checkbox][data-part=root]:not([data-variant=tile]) [data-part=label]:before{block-size:var(--_target);content:\"\";direction:var(--_direction);inline-size:var(--_target);inset-block-start:calc(var(--_lift) + var(--_size) - var(--_target));inset-inline-start:calc((var(--_size) - var(--_target)) / 2 - var(--_size) - var(--_gap));position:absolute;z-index:-1}[data-ui=checkbox][data-part=root]:not([data-variant=tile]) [data-part=label]:after{background-color:var(--slotted-checkbox-halo-color, var(--slotted-tone-accent-text));border-radius:calc(var(--slotted-checkbox-radius, var(--slotted-radius-xs, 2px)) + var(--_halo-spread));content:\"\";direction:var(--_direction);inset-block:calc(var(--_lift) - var(--_halo-spread));inset-inline-end:calc(-1.5 * var(--_halo-spread));inset-inline-start:calc(-1 * (var(--_size) + var(--_gap) + var(--_halo-spread)));opacity:0;position:absolute;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);z-index:-1}[data-ui=checkbox][data-part=root]:is([data-label-hidden],:has(>[data-part=label]:empty)):not([data-label-placement=start]){column-gap:0}[data-ui=checkbox][data-part=root]:is([data-label-hidden],:has(>[data-part=label]:empty)):not([data-label-placement=start],[data-variant=tile]) [data-part=label]:before{inset-inline-start:calc(-1 * var(--_target))}[data-ui=checkbox][data-part=root]:is([data-label-hidden],:has(>[data-part=label]:empty)):not([data-label-placement=start],[data-variant=tile]) [data-part=label]:after{inset-inline-end:calc(-1 * var(--_halo-spread));inset-inline-start:calc(-1 * (var(--_size) + var(--_halo-spread)))}[data-ui=checkbox] [data-part=description]{color:var(--slotted-checkbox-description-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-checkbox-description-font-size, var(--slotted-font-size-xs, .75rem));grid-column:2;grid-row:2;line-height:var(--slotted-line-height-xs, 1.4);margin:0;overflow-wrap:anywhere;padding-block-start:var(--_description-gap)}[data-ui=checkbox][data-part=root][data-label-placement=start]{grid-template-columns:minmax(0,1fr) auto}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=control],[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=indicator]{grid-area:1 / 2}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=label],[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=description]{grid-column:1}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=label]{justify-self:stretch}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=label]:before{inset-inline-end:calc(-1 * (var(--_size) + var(--_gap)));inset-inline-start:auto}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=label]:after{inset-inline-end:calc(-1 * (var(--_size) + var(--_gap) + var(--_halo-spread)));inset-inline-start:calc(-1.5 * var(--_halo-spread))}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:hover:not(:disabled){border-color:var(--slotted-checkbox-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:hover:not(:disabled)~[data-part=label]:after,[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:not(:disabled)~[data-part=label]:hover:after{opacity:var(--slotted-selection-halo-opacity, .12)}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:active:not(:disabled){background-color:var( --slotted-checkbox-active-background, var(--slotted-tone-accent-subtle-active) )}[data-ui=checkbox] [data-part=control]:checked,[data-ui=checkbox] [data-part=control]:indeterminate{background-color:var(--slotted-checkbox-checked-background, var(--slotted-tone-accent-solid));border-color:var(--slotted-checkbox-checked-border-color, var(--slotted-tone-accent-solid))}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:checked:hover:not(:disabled),[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:indeterminate:hover:not(:disabled){background-color:var( --slotted-checkbox-checked-hover-background, var(--slotted-tone-accent-solid-hover) );border-color:var( --slotted-checkbox-checked-hover-background, var(--slotted-tone-accent-solid-hover) )}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:checked:active:not(:disabled),[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:indeterminate:active:not(:disabled){background-color:var( --slotted-checkbox-checked-active-background, var(--slotted-tone-accent-solid-active) );border-color:var( --slotted-checkbox-checked-active-background, var(--slotted-tone-accent-solid-active) )}[data-ui=checkbox] [data-part=control]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=checkbox][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-checkbox-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]{border-width:calc(var(--slotted-checkbox-border-width, var(--slotted-border-width-medium, 1.5px)) + var(--slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px)));border-color:var(--slotted-checkbox-invalid-border-color, var(--slotted-tone-danger-border))}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:checked,[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:indeterminate{background-color:var( --slotted-checkbox-invalid-checked-background, var(--slotted-tone-danger-solid) );border-color:var( --slotted-checkbox-invalid-checked-background, var(--slotted-tone-danger-solid) );box-shadow:inset 0 0 0 var(--slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px)) var(--slotted-surface, Canvas)}[data-ui=checkbox][data-part=root][data-readonly] [data-part=control],[data-ui=checkbox][data-part=root][data-readonly] [data-part=label]{cursor:default}[data-ui=checkbox][data-part=root][data-readonly] [data-part=control]:not(:checked):not(:indeterminate){background-color:var( --slotted-checkbox-readonly-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=checkbox][data-part=root][data-disabled] [data-part=control],[data-ui=checkbox] [data-part=control]:disabled{background-color:var( --slotted-checkbox-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-checkbox-disabled-border-color, var(--slotted-disabled-border));cursor:not-allowed}[data-ui=checkbox] [data-part=control]:disabled+[data-part=indicator]{color:var(--slotted-checkbox-disabled-mark-color, var(--slotted-disabled-foreground))}[data-ui=checkbox][data-part=root][data-disabled] [data-part=label],[data-ui=checkbox][data-part=root][data-disabled] [data-part=description],[data-ui=checkbox] [data-part=control]:disabled~[data-part=label],[data-ui=checkbox] [data-part=control]:disabled~[data-part=description]{color:var(--slotted-checkbox-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=checkbox][data-part=root][data-variant=tile]{--_description-gap: var( --slotted-checkbox-tile-description-gap, var(--slotted-space-2, .25rem) );--_tile-surface: var(--slotted-checkbox-tile-background, var(--slotted-surface, Canvas));--_tile-edge: var( --slotted-checkbox-tile-border-color, var(--slotted-control-border-color, ButtonBorder) );--_tile-edge-width: var(--slotted-control-border-width, 1px);background-color:var(--_tile-surface);border-radius:var(--slotted-checkbox-tile-radius, var(--slotted-radius-md, 6px));box-shadow:var(--slotted-control-shadow, none);cursor:pointer;padding:var(--_tile-inset);position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=checkbox][data-part=root][data-variant=tile]:before{border:calc(var(--_tile-edge-width) + var(--_tile-invalid-edge, 0px)) solid var(--_tile-edge);border-radius:inherit;content:\"\";inset:0;pointer-events:none;position:absolute;transition:border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=checkbox][data-part=root][data-variant=tile] [data-part=label]:after{content:\"\";inset:0;position:absolute}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):not([data-disabled]):has([data-part=control]:not(:disabled)):not(:has([data-part=control]:is(:checked,:indeterminate))):hover{--_tile-surface: var( --slotted-checkbox-tile-hover-background, var(--slotted-tone-accent-subtle-hover) );--_tile-edge: var( --slotted-checkbox-tile-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):not([data-disabled]):has([data-part=control]:not(:disabled)):not(:has([data-part=control]:is(:checked,:indeterminate))):active{--_tile-surface: var( --slotted-checkbox-tile-active-background, var(--slotted-tone-accent-subtle-active) )}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):has([data-part=control]:is(:checked,:indeterminate)){--_tile-edge: var( --slotted-checkbox-tile-checked-border-color, var(--slotted-tone-accent-solid) );--_tile-edge-width: var(--slotted-border-width-thick, 2px)}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):has([data-part=control]:is(:checked,:indeterminate)){--_tile-surface: var( --slotted-checkbox-tile-checked-background, var(--slotted-tone-accent-surface) )}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):not([data-disabled]):has([data-part=control]:is(:checked,:indeterminate):not(:disabled)):hover{--_tile-edge: var( --slotted-checkbox-tile-checked-hover-border-color, var(--slotted-tone-accent-solid-hover) )}[data-ui=checkbox][data-part=root][data-variant=tile][data-invalid]{--_tile-edge: var( --slotted-checkbox-tile-invalid-border-color, var(--slotted-tone-danger-border) );--_tile-invalid-edge: var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) )}[data-ui=checkbox][data-part=root][data-variant=tile][data-invalid]:has([data-part=control]:is(:checked,:indeterminate)){--_tile-surface: var( --slotted-checkbox-tile-invalid-checked-background, var(--slotted-tone-danger-surface) );--_tile-edge: var( --slotted-checkbox-tile-invalid-checked-border-color, var(--slotted-tone-danger-solid) )}[data-ui=checkbox][data-part=root][data-variant=tile][data-readonly]{--_tile-surface: var( --slotted-checkbox-tile-readonly-background, var(--slotted-tone-secondary-subtle-hover) );--_tile-edge: var(--slotted-checkbox-tile-readonly-border-color, var(--slotted-border-strong));cursor:default}[data-ui=checkbox][data-part=root][data-variant=tile][data-disabled],[data-ui=checkbox][data-part=root][data-variant=tile]:has([data-part=control]:disabled){--_tile-surface: var( --slotted-checkbox-tile-disabled-background, var(--slotted-disabled-background) );--_tile-edge: var( --slotted-checkbox-tile-disabled-border-color, var(--slotted-disabled-border) );box-shadow:none;cursor:not-allowed}[data-ui=checkbox][data-part=root][data-variant=tile]:has([data-part=control]:focus-visible){outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=checkbox][data-part=root][data-variant=tile] [data-part=control]:focus-visible{outline:none}@media(forced-colors:active){[data-ui=checkbox] [data-part=control]{background-color:Field;border-color:FieldText}[data-ui=checkbox] [data-part=control]:checked,[data-ui=checkbox] [data-part=control]:indeterminate{background-color:Highlight;border-color:Highlight}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:checked,[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:indeterminate{background-color:Highlight;border-color:CanvasText;outline:var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) ) solid Canvas;outline-offset:calc(-1 * (var(--slotted-checkbox-border-width, var(--slotted-border-width-medium, 1.5px)) + var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) ) + var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) )))}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:checked:focus-visible,[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:indeterminate:focus-visible{outline:calc(var(--slotted-focus-ring-width, 2px) + var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) )) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=checkbox] [data-part=control]:checked+[data-part=indicator],[data-ui=checkbox] [data-part=control]:indeterminate+[data-part=indicator]{color:HighlightText}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:checked+[data-part=indicator],[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:indeterminate+[data-part=indicator]{color:HighlightText}[data-ui=checkbox][data-part=root][data-variant=tile][data-invalid],[data-ui=checkbox][data-part=root][data-variant=tile][data-invalid]:has([data-part=control]:is(:checked,:indeterminate)){--_tile-edge: CanvasText}[data-ui=checkbox] [data-part=control]:disabled{background-color:Field;border-color:GrayText}[data-ui=checkbox] [data-part=control]:disabled+[data-part=indicator]{color:GrayText}}}\n"], dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: '[slCheckbox]', standalone: true, exportAs: 'slCheckbox', imports: [SlGlyph, SlIcon], template: `<input
+      #control
+      data-part="control"
+      type="checkbox"
+      [attr.id]="controlId"
+      [attr.name]="resolvedName()"
+      [attr.value]="value()"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-invalid]="ariaInvalid()"
+      [attr.aria-readonly]="ariaReadOnly()"
+      [attr.aria-required]="ariaRequired()"
+      [attr.disabled]="disabledAttribute()"
+      [attr.required]="requiredAttribute()"
+      [checked]="resolvedChecked()"
+      [attr.checked]="defaultAttribute()"
+      (click)="onClick($event)"
+      (blur)="onBlur()"
+    />
+    <span data-part="indicator"
+      ><span slIcon><svg slGlyph [name]="resolvedIndeterminate() ? 'minus' : 'check'"></svg></span
+    ></span>
+    <label #label data-part="label" [attr.for]="controlId"><ng-content /></label>
+    <ng-content select="[slCheckboxDescription]" />`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlCheckbox), multi: true },
+                    ], host: {
+                        'data-ui': 'checkbox',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-label-placement]': 'resolvedLabelPlacement()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-checked]': "resolvedChecked() ? '' : null",
+                        '[attr.data-indeterminate]': "resolvedIndeterminate() ? '' : null",
+                        '[attr.data-disabled]': "resolvedDisabled() === true ? '' : null",
+                        '[attr.data-invalid]': "resolvedInvalid() === true ? '' : null",
+                        '[attr.data-readonly]': "resolvedReadOnly() === true ? '' : null",
+                        '[attr.data-label-hidden]': "labelHidden() ? '' : null",
+                    }, styles: ["@layer slotted.components{[data-ui=checkbox][data-part=root]{--_size: var(--slotted-checkbox-size, var(--slotted-selection-size-md, 16px));--_font-size: var(--slotted-control-font-size-md, 13px);--_gap: var(--slotted-control-label-gap-md, 12px);--_line-height: var(--slotted-checkbox-line-height, var(--slotted-line-height-md, 1.5));--_mark-inset: var(--slotted-checkbox-mark-inset, 2px);--_mark-size: calc(var(--_size) - 2 * var(--_mark-inset));--_halo-spread: calc(var(--_gap) / 2);--_target: var(--slotted-target-min, 24px);--_lift: calc((var(--_font-size) * var(--_line-height) - var(--_size)) / 2);--_description-gap: var(--slotted-space-3, .375rem);align-content:start;color:var(--slotted-checkbox-color, var(--slotted-text, CanvasText));display:grid;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);grid-template-columns:auto minmax(0,1fr);isolation:isolate;line-height:var(--_line-height);position:relative}[data-ui=checkbox][data-part=root]{--_direction: ltr}[data-ui=checkbox][data-part=root]:dir(rtl){--_direction: rtl}[data-ui=checkbox][data-part=root][data-size=sm]{--_size: var(--slotted-checkbox-size, var(--slotted-selection-size-sm, 14px));--_font-size: var(--slotted-control-font-size-sm, 12px);--_gap: var(--slotted-control-label-gap-sm, 8px);--_tile-inset: var( --slotted-checkbox-tile-inset, var(--slotted-control-padding-inline-sm, 10px) )}[data-ui=checkbox][data-part=root][data-size=md]{--_size: var(--slotted-checkbox-size, var(--slotted-selection-size-md, 16px));--_font-size: var(--slotted-control-font-size-md, 13px);--_gap: var(--slotted-control-label-gap-md, 12px);--_tile-inset: var( --slotted-checkbox-tile-inset, var(--slotted-control-padding-inline-md, 13px) )}[data-ui=checkbox][data-part=root][data-size=lg]{--_size: var(--slotted-checkbox-size, var(--slotted-selection-size-lg, 18px));--_font-size: var(--slotted-control-font-size-lg, 14px);--_gap: var(--slotted-control-label-gap-lg, 12px);--_tile-inset: var( --slotted-checkbox-tile-inset, var(--slotted-control-padding-inline-lg, 16px) )}[data-ui=checkbox] [data-part=control]{appearance:none;background-color:var(--slotted-checkbox-background, var(--slotted-surface, Canvas));border:var(--slotted-checkbox-border-width, var(--slotted-border-width-medium, 1.5px)) solid var(--slotted-checkbox-border-color, var(--slotted-border-strong, ButtonBorder));border-radius:var(--slotted-checkbox-radius, var(--slotted-radius-xs, 2px));block-size:var(--_size);box-sizing:border-box;cursor:pointer;grid-area:1 / 1;inline-size:var(--_size);margin:0;margin-block-start:var(--_lift);margin-block-end:var(--_lift);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=checkbox] [data-part=indicator]{--slotted-icon-size: var(--_mark-size);block-size:var(--_mark-size);clip-path:inset(0% 100% 0% 0%);color:var(--slotted-checkbox-mark-color, var(--slotted-tone-accent-on-solid));display:flex;grid-area:1 / 1;inline-size:var(--_mark-size);margin-block-start:calc(var(--_lift) + var(--_mark-inset));margin-inline-start:var(--_mark-inset);opacity:0;pointer-events:none;transition:clip-path var(--slotted-duration-medium) var(--slotted-control-transition-easing),opacity var(--slotted-duration-medium) var(--slotted-control-transition-easing)}[data-ui=checkbox] [data-part=control]:checked+[data-part=indicator],[data-ui=checkbox] [data-part=control]:indeterminate+[data-part=indicator]{clip-path:inset(0% 0% 0% 0%);opacity:1}@media(prefers-reduced-motion:reduce){[data-ui=checkbox] [data-part=indicator],[data-ui=checkbox] [data-part=control]:checked+[data-part=indicator],[data-ui=checkbox] [data-part=control]:indeterminate+[data-part=indicator]{clip-path:none;transition:opacity var(--slotted-duration-medium) var(--slotted-control-transition-easing)}}[data-ui=checkbox] [data-part=label]{cursor:pointer;grid-column:2;grid-row:1;overflow-wrap:anywhere}[data-ui=checkbox][data-part=root]:has(>[data-part=label]){column-gap:var(--_gap)}[data-ui=checkbox][data-part=root]:not([data-variant=tile]) [data-part=label]{justify-self:start;position:relative}[data-ui=checkbox][data-part=root]:not([data-variant=tile]) [data-part=label]:before{block-size:var(--_target);content:\"\";direction:var(--_direction);inline-size:var(--_target);inset-block-start:calc(var(--_lift) + var(--_size) - var(--_target));inset-inline-start:calc((var(--_size) - var(--_target)) / 2 - var(--_size) - var(--_gap));position:absolute;z-index:-1}[data-ui=checkbox][data-part=root]:not([data-variant=tile]) [data-part=label]:after{background-color:var(--slotted-checkbox-halo-color, var(--slotted-tone-accent-text));border-radius:calc(var(--slotted-checkbox-radius, var(--slotted-radius-xs, 2px)) + var(--_halo-spread));content:\"\";direction:var(--_direction);inset-block:calc(var(--_lift) - var(--_halo-spread));inset-inline-end:calc(-1.5 * var(--_halo-spread));inset-inline-start:calc(-1 * (var(--_size) + var(--_gap) + var(--_halo-spread)));opacity:0;position:absolute;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);z-index:-1}[data-ui=checkbox][data-part=root]:is([data-label-hidden],:has(>[data-part=label]:empty)):not([data-label-placement=start]){column-gap:0}[data-ui=checkbox][data-part=root]:is([data-label-hidden],:has(>[data-part=label]:empty)):not([data-label-placement=start],[data-variant=tile]) [data-part=label]:before{inset-inline-start:calc(-1 * var(--_target))}[data-ui=checkbox][data-part=root]:is([data-label-hidden],:has(>[data-part=label]:empty)):not([data-label-placement=start],[data-variant=tile]) [data-part=label]:after{inset-inline-end:calc(-1 * var(--_halo-spread));inset-inline-start:calc(-1 * (var(--_size) + var(--_halo-spread)))}[data-ui=checkbox] [data-part=description]{color:var(--slotted-checkbox-description-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-checkbox-description-font-size, var(--slotted-font-size-xs, .75rem));grid-column:2;grid-row:2;line-height:var(--slotted-line-height-xs, 1.4);margin:0;overflow-wrap:anywhere;padding-block-start:var(--_description-gap)}[data-ui=checkbox][data-part=root][data-label-placement=start]{grid-template-columns:minmax(0,1fr) auto}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=control],[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=indicator]{grid-area:1 / 2}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=label],[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=description]{grid-column:1}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=label]{justify-self:stretch}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=label]:before{inset-inline-end:calc(-1 * (var(--_size) + var(--_gap)));inset-inline-start:auto}[data-ui=checkbox][data-part=root][data-label-placement=start] [data-part=label]:after{inset-inline-end:calc(-1 * (var(--_size) + var(--_gap) + var(--_halo-spread)));inset-inline-start:calc(-1.5 * var(--_halo-spread))}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:hover:not(:disabled){border-color:var(--slotted-checkbox-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:hover:not(:disabled)~[data-part=label]:after,[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:not(:disabled)~[data-part=label]:hover:after{opacity:var(--slotted-selection-halo-opacity, .12)}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:active:not(:disabled){background-color:var( --slotted-checkbox-active-background, var(--slotted-tone-accent-subtle-active) )}[data-ui=checkbox] [data-part=control]:checked,[data-ui=checkbox] [data-part=control]:indeterminate{background-color:var(--slotted-checkbox-checked-background, var(--slotted-tone-accent-solid));border-color:var(--slotted-checkbox-checked-border-color, var(--slotted-tone-accent-solid))}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:checked:hover:not(:disabled),[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:indeterminate:hover:not(:disabled){background-color:var( --slotted-checkbox-checked-hover-background, var(--slotted-tone-accent-solid-hover) );border-color:var( --slotted-checkbox-checked-hover-background, var(--slotted-tone-accent-solid-hover) )}[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:checked:active:not(:disabled),[data-ui=checkbox][data-part=root]:not([data-readonly]) [data-part=control]:indeterminate:active:not(:disabled){background-color:var( --slotted-checkbox-checked-active-background, var(--slotted-tone-accent-solid-active) );border-color:var( --slotted-checkbox-checked-active-background, var(--slotted-tone-accent-solid-active) )}[data-ui=checkbox] [data-part=control]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=checkbox][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-checkbox-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]{border-width:calc(var(--slotted-checkbox-border-width, var(--slotted-border-width-medium, 1.5px)) + var(--slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px)));border-color:var(--slotted-checkbox-invalid-border-color, var(--slotted-tone-danger-border))}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:checked,[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:indeterminate{background-color:var( --slotted-checkbox-invalid-checked-background, var(--slotted-tone-danger-solid) );border-color:var( --slotted-checkbox-invalid-checked-background, var(--slotted-tone-danger-solid) );box-shadow:inset 0 0 0 var(--slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px)) var(--slotted-surface, Canvas)}[data-ui=checkbox][data-part=root][data-readonly] [data-part=control],[data-ui=checkbox][data-part=root][data-readonly] [data-part=label]{cursor:default}[data-ui=checkbox][data-part=root][data-readonly] [data-part=control]:not(:checked):not(:indeterminate){background-color:var( --slotted-checkbox-readonly-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=checkbox][data-part=root][data-disabled] [data-part=control],[data-ui=checkbox] [data-part=control]:disabled{background-color:var( --slotted-checkbox-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-checkbox-disabled-border-color, var(--slotted-disabled-border));cursor:not-allowed}[data-ui=checkbox] [data-part=control]:disabled+[data-part=indicator]{color:var(--slotted-checkbox-disabled-mark-color, var(--slotted-disabled-foreground))}[data-ui=checkbox][data-part=root][data-disabled] [data-part=label],[data-ui=checkbox][data-part=root][data-disabled] [data-part=description],[data-ui=checkbox] [data-part=control]:disabled~[data-part=label],[data-ui=checkbox] [data-part=control]:disabled~[data-part=description]{color:var(--slotted-checkbox-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=checkbox][data-part=root][data-variant=tile]{--_description-gap: var( --slotted-checkbox-tile-description-gap, var(--slotted-space-2, .25rem) );--_tile-surface: var(--slotted-checkbox-tile-background, var(--slotted-surface, Canvas));--_tile-edge: var( --slotted-checkbox-tile-border-color, var(--slotted-control-border-color, ButtonBorder) );--_tile-edge-width: var(--slotted-control-border-width, 1px);background-color:var(--_tile-surface);border-radius:var(--slotted-checkbox-tile-radius, var(--slotted-radius-md, 6px));box-shadow:var(--slotted-control-shadow, none);cursor:pointer;padding:var(--_tile-inset);position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=checkbox][data-part=root][data-variant=tile]:before{border:calc(var(--_tile-edge-width) + var(--_tile-invalid-edge, 0px)) solid var(--_tile-edge);border-radius:inherit;content:\"\";inset:0;pointer-events:none;position:absolute;transition:border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=checkbox][data-part=root][data-variant=tile] [data-part=label]:after{content:\"\";inset:0;position:absolute}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):not([data-disabled]):has([data-part=control]:not(:disabled)):not(:has([data-part=control]:is(:checked,:indeterminate))):hover{--_tile-surface: var( --slotted-checkbox-tile-hover-background, var(--slotted-tone-accent-subtle-hover) );--_tile-edge: var( --slotted-checkbox-tile-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):not([data-disabled]):has([data-part=control]:not(:disabled)):not(:has([data-part=control]:is(:checked,:indeterminate))):active{--_tile-surface: var( --slotted-checkbox-tile-active-background, var(--slotted-tone-accent-subtle-active) )}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):has([data-part=control]:is(:checked,:indeterminate)){--_tile-edge: var( --slotted-checkbox-tile-checked-border-color, var(--slotted-tone-accent-solid) );--_tile-edge-width: var(--slotted-border-width-thick, 2px)}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):has([data-part=control]:is(:checked,:indeterminate)){--_tile-surface: var( --slotted-checkbox-tile-checked-background, var(--slotted-tone-accent-surface) )}[data-ui=checkbox][data-part=root][data-variant=tile]:not([data-readonly]):not([data-disabled]):has([data-part=control]:is(:checked,:indeterminate):not(:disabled)):hover{--_tile-edge: var( --slotted-checkbox-tile-checked-hover-border-color, var(--slotted-tone-accent-solid-hover) )}[data-ui=checkbox][data-part=root][data-variant=tile][data-invalid]{--_tile-edge: var( --slotted-checkbox-tile-invalid-border-color, var(--slotted-tone-danger-border) );--_tile-invalid-edge: var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) )}[data-ui=checkbox][data-part=root][data-variant=tile][data-invalid]:has([data-part=control]:is(:checked,:indeterminate)){--_tile-surface: var( --slotted-checkbox-tile-invalid-checked-background, var(--slotted-tone-danger-surface) );--_tile-edge: var( --slotted-checkbox-tile-invalid-checked-border-color, var(--slotted-tone-danger-solid) )}[data-ui=checkbox][data-part=root][data-variant=tile][data-readonly]{--_tile-surface: var( --slotted-checkbox-tile-readonly-background, var(--slotted-tone-secondary-subtle-hover) );--_tile-edge: var(--slotted-checkbox-tile-readonly-border-color, var(--slotted-border-strong));cursor:default}[data-ui=checkbox][data-part=root][data-variant=tile][data-disabled],[data-ui=checkbox][data-part=root][data-variant=tile]:has([data-part=control]:disabled){--_tile-surface: var( --slotted-checkbox-tile-disabled-background, var(--slotted-disabled-background) );--_tile-edge: var( --slotted-checkbox-tile-disabled-border-color, var(--slotted-disabled-border) );box-shadow:none;cursor:not-allowed}[data-ui=checkbox][data-part=root][data-variant=tile]:has([data-part=control]:focus-visible){outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=checkbox][data-part=root][data-variant=tile] [data-part=control]:focus-visible{outline:none}@media(forced-colors:active){[data-ui=checkbox] [data-part=control]{background-color:Field;border-color:FieldText}[data-ui=checkbox] [data-part=control]:checked,[data-ui=checkbox] [data-part=control]:indeterminate{background-color:Highlight;border-color:Highlight}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:checked,[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:indeterminate{background-color:Highlight;border-color:CanvasText;outline:var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) ) solid Canvas;outline-offset:calc(-1 * (var(--slotted-checkbox-border-width, var(--slotted-border-width-medium, 1.5px)) + var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) ) + var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) )))}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:checked:focus-visible,[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:indeterminate:focus-visible{outline:calc(var(--slotted-focus-ring-width, 2px) + var( --slotted-checkbox-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) )) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=checkbox] [data-part=control]:checked+[data-part=indicator],[data-ui=checkbox] [data-part=control]:indeterminate+[data-part=indicator]{color:HighlightText}[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:checked+[data-part=indicator],[data-ui=checkbox][data-part=root][data-invalid] [data-part=control]:indeterminate+[data-part=indicator]{color:HighlightText}[data-ui=checkbox][data-part=root][data-variant=tile][data-invalid],[data-ui=checkbox][data-part=root][data-variant=tile][data-invalid]:has([data-part=control]:is(:checked,:indeterminate)){--_tile-edge: CanvasText}[data-ui=checkbox] [data-part=control]:disabled{background-color:Field;border-color:GrayText}[data-ui=checkbox] [data-part=control]:disabled+[data-part=indicator]{color:GrayText}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], defaultChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultChecked", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], parent: [{ type: i0.Input, args: [{ isSignal: true, alias: "parent", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], labelPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPlacement", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], element: [{ type: i0.ViewChild, args: ['control', { isSignal: true }] }], label: [{ type: i0.ViewChild, args: ['label', { isSignal: true }] }], description: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlCheckboxDescription), { ...{ descendants: true }, isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CHECKBOX_DEFAULTS, SlCheckbox, SlCheckboxDescription, SlCheckboxIdFactory, injectCheckboxDefaults, provideCheckboxDefaults };
+//# sourceMappingURL=slotted-angular-checkbox.mjs.map