@tylertech/forge 3.0.0-next.11 → 3.0.0-next.13

package/esm/checkbox/checkbox.js

@@ -4,68 +4,267 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { CustomElement, attachShadowTemplate, coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
+import { CustomElement, FoundationProperty, attachShadowTemplate, coerceBoolean, isDefined, isString, toggleAttribute } from '@tylertech/forge-core';
+import { internals } from '../constants';
+import { BaseNullableFormComponent } from '../core/base/base-nullable-form-component';
+import { FocusIndicatorComponent } from '../focus-indicator/focus-indicator';
+import { StateLayerComponent } from '../state-layer/state-layer';
+import { CheckboxAdapter } from './checkbox-adapter';
 import { CHECKBOX_CONSTANTS } from './checkbox-constants';
 import { CheckboxFoundation } from './checkbox-foundation';
-import { CheckboxAdapter } from './checkbox-adapter';
-import { BaseComponent } from '../core/base/base-component';
-const template = '<template><div class=\"forge-checkbox-wrapper forge-form-field\" part=\"root\"><div class=\"mdc-checkbox\" part=\"container\"><slot name=\"input\"></slot><div class=\"mdc-checkbox__background\" part=\"background\"><svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\" part=\"checkmark-svg\"><path class=\"mdc-checkbox__checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" part=\"checkmark-path\"></path></svg><div class=\"mdc-checkbox__mixedmark\" part=\"mixedmark\"></div></div><div class=\"mdc-checkbox__ripple\" part=\"ripple-container\"></div></div><slot name=\"label\"></slot></div></template>';
-const styles = '.mdc-checkbox{padding:calc((40px - 18px)/ 2);padding:calc((var(--mdc-checkbox-ripple-size,40px) - 18px)/ 2);margin:calc((40px - 40px)/ 2);margin:calc((var(--mdc-checkbox-ripple-size,40px) - var(--mdc-checkbox-ripple-size,40px))/ 2)}.mdc-checkbox .mdc-checkbox__ripple::after,.mdc-checkbox .mdc-checkbox__ripple::before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.mdc-checkbox.mdc-ripple-surface--hover .mdc-checkbox__ripple::before,.mdc-checkbox:hover .mdc-checkbox__ripple::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-checkbox.mdc-ripple-upgraded--background-focused .mdc-checkbox__ripple::before,.mdc-checkbox:not(.mdc-ripple-upgraded):focus .mdc-checkbox__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-checkbox:not(.mdc-ripple-upgraded) .mdc-checkbox__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-checkbox:not(.mdc-ripple-upgraded):active .mdc-checkbox__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-checkbox.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple::after,.mdc-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple::before{background-color:#3d5afe;background-color:var(--forge-theme-tertiary,#3d5afe)}.mdc-checkbox.mdc-checkbox--selected.mdc-ripple-surface--hover .mdc-checkbox__ripple::before,.mdc-checkbox.mdc-checkbox--selected:hover .mdc-checkbox__ripple::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded--background-focused .mdc-checkbox__ripple::before,.mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):focus .mdc-checkbox__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded) .mdc-checkbox__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):active .mdc-checkbox__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple::after,.mdc-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple::before{background-color:#3d5afe;background-color:var(--forge-theme-tertiary,#3d5afe)}.mdc-checkbox .mdc-checkbox__background{top:calc((40px - 18px)/ 2);top:calc((var(--mdc-checkbox-ripple-size,40px) - 18px)/ 2);left:calc((40px - 18px)/ 2);left:calc((var(--mdc-checkbox-ripple-size,40px) - 18px)/ 2)}.mdc-checkbox ::slotted(input[type=checkbox]){top:calc((40px - 40px)/ 2);top:calc((var(--mdc-checkbox-ripple-size,40px) - var(--mdc-checkbox-ripple-size,40px))/ 2);right:calc((40px - 40px)/ 2);right:calc((var(--mdc-checkbox-ripple-size,40px) - var(--mdc-checkbox-ripple-size,40px))/ 2);left:calc((40px - 40px)/ 2);left:calc((var(--mdc-checkbox-ripple-size,40px) - var(--mdc-checkbox-ripple-size,40px))/ 2);width:40px;width:var(--mdc-checkbox-ripple-size,40px);height:40px;height:var(--mdc-checkbox-ripple-size,40px)}.mdc-checkbox.forge-checkbox--enabled:not(.forge-checkbox--checked):not(.forge-checkbox--indeterminate) .mdc-checkbox__background{border-color:#000;border-color:var(--mdc-theme-text-secondary-on-background,#000);background-color:transparent}.mdc-checkbox.forge-checkbox--enabled.forge-checkbox--checked .mdc-checkbox__background,.mdc-checkbox.forge-checkbox--enabled.forge-checkbox--indeterminate .mdc-checkbox__background{border-color:#3d5afe;border-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe));background-color:#3d5afe;background-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe))}@-webkit-keyframes mdc-checkbox-fade-in-background-FF000000FF3D5AFE00000000FF3D5AFE{0%{border-color:#000;border-color:var(--mdc-theme-text-secondary-on-background,#000);background-color:transparent}50%{border-color:#3d5afe;border-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe));background-color:#3d5afe;background-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe))}}@keyframes mdc-checkbox-fade-in-background-FF000000FF3D5AFE00000000FF3D5AFE{0%{border-color:#000;border-color:var(--mdc-theme-text-secondary-on-background,#000);background-color:transparent}50%{border-color:#3d5afe;border-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe));background-color:#3d5afe;background-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe))}}@-webkit-keyframes mdc-checkbox-fade-out-background-FF000000FF3D5AFE00000000FF3D5AFE{0%,80%{border-color:#3d5afe;border-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe));background-color:#3d5afe;background-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe))}100%{border-color:#000;border-color:var(--mdc-theme-text-secondary-on-background,#000);background-color:transparent}}@keyframes mdc-checkbox-fade-out-background-FF000000FF3D5AFE00000000FF3D5AFE{0%,80%{border-color:#3d5afe;border-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe));background-color:#3d5afe;background-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe))}100%{border-color:#000;border-color:var(--mdc-theme-text-secondary-on-background,#000);background-color:transparent}}.mdc-checkbox.mdc-checkbox--anim-unchecked-checked.forge-checkbox--enabled .mdc-checkbox__background,.mdc-checkbox.mdc-checkbox--anim-unchecked-indeterminate.forge-checkbox--enabled .mdc-checkbox__background{-webkit-animation-name:mdc-checkbox-fade-in-background-FF000000FF3D5AFE00000000FF3D5AFE;animation-name:mdc-checkbox-fade-in-background-FF000000FF3D5AFE00000000FF3D5AFE}.mdc-checkbox.mdc-checkbox--anim-checked-unchecked.forge-checkbox--enabled .mdc-checkbox__background,.mdc-checkbox.mdc-checkbox--anim-indeterminate-unchecked.forge-checkbox--enabled .mdc-checkbox__background{-webkit-animation-name:mdc-checkbox-fade-out-background-FF000000FF3D5AFE00000000FF3D5AFE;animation-name:mdc-checkbox-fade-out-background-FF000000FF3D5AFE00000000FF3D5AFE}.mdc-checkbox.mdc-checkbox--disabled:not(.forge-checkbox--checked):not(.forge-checkbox--indeterminate) .mdc-checkbox__background{border-color:#000;border-color:var(--forge-theme-form-field-icon-disabled-on-background,#000);background-color:transparent}.mdc-checkbox.mdc-checkbox--disabled.forge-checkbox--checked .mdc-checkbox__background,.mdc-checkbox.mdc-checkbox--disabled.forge-checkbox--indeterminate .mdc-checkbox__background{border-color:transparent;background-color:#000;background-color:var(--forge-theme-form-field-icon-disabled-on-background,#000)}.mdc-checkbox.forge-checkbox--enabled .mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff;color:var(--mdc-theme-text-primary-on-dark,#fff)}.mdc-checkbox.forge-checkbox--enabled .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#fff;border-color:var(--mdc-theme-text-primary-on-dark,#fff)}.mdc-checkbox.mdc-checkbox--disabled .mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff;color:var(--mdc-theme-text-primary-on-dark,#fff)}.mdc-checkbox.mdc-checkbox--disabled .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#fff;border-color:var(--mdc-theme-text-primary-on-dark,#fff)}@-webkit-keyframes mdc-checkbox-unchecked-checked-checkmark-path{0%,50%{stroke-dashoffset:29.7833385}50%{-webkit-animation-timing-function:cubic-bezier(0,0,0.2,1);animation-timing-function:cubic-bezier(0,0,0.2,1)}100%{stroke-dashoffset:0}}@keyframes mdc-checkbox-unchecked-checked-checkmark-path{0%,50%{stroke-dashoffset:29.7833385}50%{-webkit-animation-timing-function:cubic-bezier(0,0,0.2,1);animation-timing-function:cubic-bezier(0,0,0.2,1)}100%{stroke-dashoffset:0}}@-webkit-keyframes mdc-checkbox-unchecked-indeterminate-mixedmark{0%,68.2%{-webkit-transform:scaleX(0);transform:scaleX(0)}68.2%{-webkit-animation-timing-function:cubic-bezier(0,0,0,1);animation-timing-function:cubic-bezier(0,0,0,1)}100%{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes mdc-checkbox-unchecked-indeterminate-mixedmark{0%,68.2%{-webkit-transform:scaleX(0);transform:scaleX(0)}68.2%{-webkit-animation-timing-function:cubic-bezier(0,0,0,1);animation-timing-function:cubic-bezier(0,0,0,1)}100%{-webkit-transform:scaleX(1);transform:scaleX(1)}}@-webkit-keyframes mdc-checkbox-checked-unchecked-checkmark-path{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,1,1);animation-timing-function:cubic-bezier(0.4,0,1,1);opacity:1;stroke-dashoffset:0}to{opacity:0;stroke-dashoffset:-29.7833385}}@keyframes mdc-checkbox-checked-unchecked-checkmark-path{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,1,1);animation-timing-function:cubic-bezier(0.4,0,1,1);opacity:1;stroke-dashoffset:0}to{opacity:0;stroke-dashoffset:-29.7833385}}@-webkit-keyframes mdc-checkbox-checked-indeterminate-checkmark{from{-webkit-animation-timing-function:cubic-bezier(0,0,0.2,1);animation-timing-function:cubic-bezier(0,0,0.2,1);-webkit-transform:rotate(0);transform:rotate(0);opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes mdc-checkbox-checked-indeterminate-checkmark{from{-webkit-animation-timing-function:cubic-bezier(0,0,0.2,1);animation-timing-function:cubic-bezier(0,0,0.2,1);-webkit-transform:rotate(0);transform:rotate(0);opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@-webkit-keyframes mdc-checkbox-indeterminate-checked-checkmark{from{-webkit-animation-timing-function:cubic-bezier(0.14,0,0,1);animation-timing-function:cubic-bezier(0.14,0,0,1);-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:rotate(360deg);transform:rotate(360deg);opacity:1}}@keyframes mdc-checkbox-indeterminate-checked-checkmark{from{-webkit-animation-timing-function:cubic-bezier(0.14,0,0,1);animation-timing-function:cubic-bezier(0.14,0,0,1);-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:rotate(360deg);transform:rotate(360deg);opacity:1}}@-webkit-keyframes mdc-checkbox-checked-indeterminate-mixedmark{from{-webkit-animation-timing-function:mdc-animation-deceleration-curve-timing-function;animation-timing-function:mdc-animation-deceleration-curve-timing-function;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes mdc-checkbox-checked-indeterminate-mixedmark{from{-webkit-animation-timing-function:mdc-animation-deceleration-curve-timing-function;animation-timing-function:mdc-animation-deceleration-curve-timing-function;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@-webkit-keyframes mdc-checkbox-indeterminate-checked-mixedmark{from{-webkit-animation-timing-function:cubic-bezier(0.14,0,0,1);animation-timing-function:cubic-bezier(0.14,0,0,1);-webkit-transform:rotate(0);transform:rotate(0);opacity:1}to{-webkit-transform:rotate(315deg);transform:rotate(315deg);opacity:0}}@keyframes mdc-checkbox-indeterminate-checked-mixedmark{from{-webkit-animation-timing-function:cubic-bezier(0.14,0,0,1);animation-timing-function:cubic-bezier(0.14,0,0,1);-webkit-transform:rotate(0);transform:rotate(0);opacity:1}to{-webkit-transform:rotate(315deg);transform:rotate(315deg);opacity:0}}@-webkit-keyframes mdc-checkbox-indeterminate-unchecked-mixedmark{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}100%,32.8%{-webkit-transform:scaleX(0);transform:scaleX(0);opacity:0}}@keyframes mdc-checkbox-indeterminate-unchecked-mixedmark{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}100%,32.8%{-webkit-transform:scaleX(0);transform:scaleX(0);opacity:0}}.mdc-checkbox{display:inline-block;position:relative;-webkit-box-flex:0;flex:0 0 18px;-webkit-box-sizing:content-box;box-sizing:content-box;width:18px;height:18px;line-height:0;white-space:nowrap;cursor:pointer;vertical-align:bottom}.mdc-checkbox--disabled{cursor:default;pointer-events:none}.mdc-checkbox__background{display:-webkit-inline-box;display:inline-flex;position:absolute;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:18px;height:18px;border:2px solid currentColor;border-radius:2px;background-color:transparent;pointer-events:none;will-change:background-color,border-color;-webkit-transition:background-color 90ms 0s cubic-bezier(.4, 0, .6, 1),border-color 90ms 0s cubic-bezier(.4, 0, .6, 1);transition:background-color 90ms 0s cubic-bezier(.4, 0, .6, 1),border-color 90ms 0s cubic-bezier(.4, 0, .6, 1)}.mdc-checkbox__checkmark{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;opacity:0;-webkit-transition:opacity 180ms 0s cubic-bezier(.4, 0, .6, 1);transition:opacity 180ms 0s cubic-bezier(.4, 0, .6, 1)}.mdc-checkbox--upgraded .mdc-checkbox__checkmark{opacity:1}.mdc-checkbox__checkmark-path{-webkit-transition:stroke-dashoffset 180ms 0s cubic-bezier(.4, 0, .6, 1);transition:stroke-dashoffset 180ms 0s cubic-bezier(.4, 0, .6, 1);stroke:currentColor;stroke-width:3.12px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-checkbox__mixedmark{width:100%;height:0;-webkit-transform:scaleX(0) rotate(0);transform:scaleX(0) rotate(0);border-width:1px;border-style:solid;opacity:0;-webkit-transition:opacity 90ms 0s cubic-bezier(.4, 0, .6, 1),-webkit-transform 90ms 0s cubic-bezier(.4, 0, .6, 1);transition:opacity 90ms 0s cubic-bezier(.4, 0, .6, 1),-webkit-transform 90ms 0s cubic-bezier(.4, 0, .6, 1);transition:opacity 90ms 0s cubic-bezier(.4, 0, .6, 1),transform 90ms 0s cubic-bezier(.4, 0, .6, 1);transition:opacity 90ms 0s cubic-bezier(.4, 0, .6, 1),transform 90ms 0s cubic-bezier(.4, 0, .6, 1),-webkit-transform 90ms 0s cubic-bezier(.4, 0, .6, 1)}.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__background,.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__background,.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__background,.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__background{-webkit-animation-duration:180ms;animation-duration:180ms;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__checkmark-path{-webkit-animation:mdc-checkbox-unchecked-checked-checkmark-path 180ms linear 0s;animation:mdc-checkbox-unchecked-checked-checkmark-path 180ms linear 0s;-webkit-transition:none;transition:none}.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__mixedmark{-webkit-animation:mdc-checkbox-unchecked-indeterminate-mixedmark 90ms linear 0s;animation:mdc-checkbox-unchecked-indeterminate-mixedmark 90ms linear 0s;-webkit-transition:none;transition:none}.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__checkmark-path{-webkit-animation:mdc-checkbox-checked-unchecked-checkmark-path 90ms linear 0s;animation:mdc-checkbox-checked-unchecked-checkmark-path 90ms linear 0s;-webkit-transition:none;transition:none}.mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__checkmark{-webkit-animation:mdc-checkbox-checked-indeterminate-checkmark 90ms linear 0s;animation:mdc-checkbox-checked-indeterminate-checkmark 90ms linear 0s;-webkit-transition:none;transition:none}.mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__mixedmark{-webkit-animation:mdc-checkbox-checked-indeterminate-mixedmark 90ms linear 0s;animation:mdc-checkbox-checked-indeterminate-mixedmark 90ms linear 0s;-webkit-transition:none;transition:none}.mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__checkmark{-webkit-animation:mdc-checkbox-indeterminate-checked-checkmark .5s linear 0s;animation:mdc-checkbox-indeterminate-checked-checkmark .5s linear 0s;-webkit-transition:none;transition:none}.mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__mixedmark{-webkit-animation:mdc-checkbox-indeterminate-checked-mixedmark .5s linear 0s;animation:mdc-checkbox-indeterminate-checked-mixedmark .5s linear 0s;-webkit-transition:none;transition:none}.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__mixedmark{-webkit-animation:mdc-checkbox-indeterminate-unchecked-mixedmark .3s linear 0s;animation:mdc-checkbox-indeterminate-unchecked-mixedmark .3s linear 0s;-webkit-transition:none;transition:none}.forge-checkbox--checked .mdc-checkbox__background,.forge-checkbox--indeterminate .mdc-checkbox__background{-webkit-transition:border-color 90ms 0s cubic-bezier(0, 0, .2, 1),background-color 90ms 0s cubic-bezier(0, 0, .2, 1);transition:border-color 90ms 0s cubic-bezier(0, 0, .2, 1),background-color 90ms 0s cubic-bezier(0, 0, .2, 1)}.forge-checkbox--checked .mdc-checkbox__background .mdc-checkbox__checkmark-path,.forge-checkbox--indeterminate .mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke-dashoffset:0}::slotted(input[type=checkbox]){position:absolute;margin:0;padding:0;opacity:0;cursor:inherit}.forge-checkbox--disabled ::slotted(input[type=checkbox]){cursor:default;pointer-events:none}.forge-checkbox--checked .mdc-checkbox__background .mdc-checkbox__checkmark{-webkit-transition:opacity 180ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 180ms 0s cubic-bezier(0, 0, .2, 1);transition:opacity 180ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 180ms 0s cubic-bezier(0, 0, .2, 1);transition:opacity 180ms 0s cubic-bezier(0, 0, .2, 1),transform 180ms 0s cubic-bezier(0, 0, .2, 1);transition:opacity 180ms 0s cubic-bezier(0, 0, .2, 1),transform 180ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 180ms 0s cubic-bezier(0, 0, .2, 1);opacity:1}.forge-checkbox--checked .mdc-checkbox__background .mdc-checkbox__mixedmark{-webkit-transform:scaleX(1) rotate(-45deg);transform:scaleX(1) rotate(-45deg)}.forge-checkbox--indeterminate .mdc-checkbox__background .mdc-checkbox__checkmark{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0;-webkit-transition:opacity 90ms 0s cubic-bezier(.4, 0, .6, 1),-webkit-transform 90ms 0s cubic-bezier(.4, 0, .6, 1);transition:opacity 90ms 0s cubic-bezier(.4, 0, .6, 1),-webkit-transform 90ms 0s cubic-bezier(.4, 0, .6, 1);transition:opacity 90ms 0s cubic-bezier(.4, 0, .6, 1),transform 90ms 0s cubic-bezier(.4, 0, .6, 1);transition:opacity 90ms 0s cubic-bezier(.4, 0, .6, 1),transform 90ms 0s cubic-bezier(.4, 0, .6, 1),-webkit-transform 90ms 0s cubic-bezier(.4, 0, .6, 1)}.forge-checkbox--indeterminate .mdc-checkbox__background .mdc-checkbox__mixedmark{-webkit-transform:scaleX(1) rotate(0);transform:scaleX(1) rotate(0);opacity:1}.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__background,.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__checkmark,.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__checkmark-path,.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__mixedmark{-webkit-transition:none;transition:none}@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-checkbox{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity}.mdc-checkbox .mdc-checkbox__ripple::after,.mdc-checkbox .mdc-checkbox__ripple::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-checkbox .mdc-checkbox__ripple::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-checkbox .mdc-checkbox__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-checkbox.mdc-ripple-upgraded--unbounded .mdc-checkbox__ripple::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-checkbox.mdc-ripple-upgraded--foreground-activation .mdc-checkbox__ripple::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-checkbox.mdc-ripple-upgraded--foreground-deactivation .mdc-checkbox__ripple::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-checkbox .mdc-checkbox__ripple::after,.mdc-checkbox .mdc-checkbox__ripple::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple::after,.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-checkbox{z-index:0}.mdc-checkbox .mdc-checkbox__ripple::after,.mdc-checkbox .mdc-checkbox__ripple::before{z-index:-1;z-index:var(--mdc-ripple-z-index,-1)}.mdc-checkbox__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.forge-checkbox--dense{padding:calc((28px - 18px)/ 2);padding:calc((var(--mdc-checkbox-ripple-size,28px) - 18px)/ 2);margin:calc((28px - 28px)/ 2);margin:calc((var(--mdc-checkbox-ripple-size,28px) - var(--mdc-checkbox-ripple-size,28px))/ 2)}.forge-checkbox--dense .mdc-checkbox__background{top:calc((28px - 18px)/ 2);top:calc((var(--mdc-checkbox-ripple-size,28px) - 18px)/ 2);left:calc((28px - 18px)/ 2);left:calc((var(--mdc-checkbox-ripple-size,28px) - 18px)/ 2)}.forge-checkbox--dense ::slotted(input[type=checkbox]){top:calc((28px - 28px)/ 2);top:calc((var(--mdc-checkbox-ripple-size,28px) - var(--mdc-checkbox-ripple-size,28px))/ 2);right:calc((28px - 28px)/ 2);right:calc((var(--mdc-checkbox-ripple-size,28px) - var(--mdc-checkbox-ripple-size,28px))/ 2);left:calc((28px - 28px)/ 2);left:calc((var(--mdc-checkbox-ripple-size,28px) - var(--mdc-checkbox-ripple-size,28px))/ 2);width:28px;width:var(--mdc-checkbox-ripple-size,28px);height:28px;height:var(--mdc-checkbox-ripple-size,28px)}.forge-checkbox-wrapper--disabled{cursor:not-allowed}.forge-checkbox-wrapper--disabled ::slotted(label){cursor:not-allowed}.mdc-checkbox--disabled+::slotted(label){color:rgba(0,0,0,.38);color:var(--forge-theme-label-disabled-on-background,rgba(0,0,0,.38))}.forge-form-field{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;vertical-align:middle}.forge-form-field ::slotted([slot=label]){-webkit-box-ordinal-group:1;order:0;margin-right:auto;padding-left:4px}.forge-form-field forge-switch~::slotted([slot=label]){padding-left:8px}.forge-form-field--align-end ::slotted([slot=label]){-webkit-box-ordinal-group:0;order:-1;margin-left:auto;padding-right:4px}:host{display:inline-block}:host([hidden]){display:none}';
+const template = '<template><div class=\"forge-checkbox\" part=\"checkbox\"><div id=\"container\" class=\"container\"><slot name=\"input\"><input id=\"input\" class=\"input\" type=\"checkbox\"></slot><div class=\"background\" part=\"background\"><svg class=\"icon icon--checked\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" part=\"checkmark\"><path d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path></svg> <svg class=\"icon icon--indeterminate\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" part=\"mixedmark\"><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"></line></svg><forge-focus-indicator target=\"container\" exportparts=\"indicator:focus-indicator\"></forge-focus-indicator></div><forge-state-layer target=\"container\" exportparts=\"surface:state-layer\"></forge-state-layer></div><label id=\"label\" for=\"input\" class=\"label\" part=\"label\"><slot></slot></label></div></template>';
+const styles = ':host{display:inline-block}:host([hidden]){display:none}.forge-checkbox{--_checkbox-primary-color:var(--forge-checkbox-primary-color, var(--forge-theme-tertiary, #3d5afe));--_checkbox-size:var(--forge-checkbox-size, 16px);--_checkbox-border-width:var(--forge-checkbox-border-width, var(--forge-border-medium, 2px));--_checkbox-icon-color:var(--forge-checkbox-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_checkbox-state-layer-size:var(--forge-checkbox-state-layer-size, 40px);--_checkbox-state-layer-dense-size:var(--forge-checkbox-state-layer-size, 24px);--_checkbox-background-color:var(--forge-checkbox-background-color, var(--forge-theme-surface, #ffffff));--_checkbox-width:var(--forge-checkbox-width, var(--_checkbox-size));--_checkbox-height:var(--forge-checkbox-height, var(--_checkbox-size));--_checkbox-unchecked-border-width:var(--forge-checkbox-unchecked-border-width, var(--_checkbox-border-width));--_checkbox-unchecked-border-color:var(--forge-checkbox-unchecked-border-color, var(--forge-theme-surface-container-high, #9e9e9e));--_checkbox-shape:var(--forge-checkbox-shape, var(--forge-shape-small, 2px));--_checkbox-elevation:var(--forge-checkbox-elevation, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12));--_checkbox-checked-background-color:var(--forge-checkbox-checked-background-color, var(--_checkbox-primary-color));--_checkbox-checked-border-width:var(--forge-checkbox-checked-border-width, var(--_checkbox-border-width));--_checkbox-checked-border-color:var(--forge-checkbox-checked-border-color, var(--_checkbox-checked-background-color));--_checkbox-icon-checked-color:var(--forge-checkbox-icon-checked-color, var(--_checkbox-icon-color));--_checkbox-icon-indeterminate-color:var(--forge-checkbox-icon-indeterminate-color, var(--_checkbox-icon-color));--_checkbox-icon-stroke-width:var(--forge-checkbox-icon-stroke-width, 4px);--_checkbox-gap:var(--forge-checkbox-gap, 0);--_checkbox-justify:var(--forge-switch-justify, space-between);--_checkbox-direction:var(--forge-switch-direction, initial);--_checkbox-state-layer-width:var(--forge-checkbox-state-layer-width, var(--_checkbox-state-layer-size));--_checkbox-state-layer-height:var(--forge-checkbox-state-layer-height, var(--_checkbox-state-layer-size));--_checkbox-state-layer-checked-color:var(--forge-checkbox-state-layer-checked-color, var(--_checkbox-primary-color));--_checkbox-state-layer-unchecked-color:var(--forge-state-layer-state-layer-unchecked-color, var(--_state-layer-color));--_checkbox-state-layer-shape:var(--forge-checkbox-state-layer-shape, var(--forge-shape-full, 9999px));--_checkbox-state-layer-dense-width:var(--forge-checkbox-state-layer-dense-width, var(--_checkbox-state-layer-dense-size));--_checkbox-state-layer-dense-height:var(--forge-checkbox-state-layer-dense-height, var(--_checkbox-state-layer-dense-size));--_checkbox-disabled-opacity:var(--forge-checkbox-disabled-opacity, 0.38);--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, var(--forge-animation-duration-short2, 100ms));--_checkbox-background-animation-timing:var(--forge-checkbox-animation-duration, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_checkbox-icon-animation-timing:var(--forge-checkbox-animation-duration, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-checkbox{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:var(--_checkbox-direction);flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_checkbox-justify);justify-content:var(--_checkbox-justify);gap:var(--_checkbox-gap);display:-webkit-box;display:flex}.forge-checkbox .container{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;border-radius:var(--_checkbox-state-layer-shape);inline-size:var(--_checkbox-state-layer-width);block-size:var(--_checkbox-state-layer-height);cursor:pointer}.forge-checkbox .input{position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-checkbox .background{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;-webkit-transition-property:background-color,border-width,border-color;transition-property:background-color,border-width,border-color;-webkit-transition-duration:var(--_checkbox-animation-duration);transition-duration:var(--_checkbox-animation-duration);-webkit-transition-timing-function:var(--_checkbox-background-animation-timing);transition-timing-function:var(--_checkbox-background-animation-timing);-webkit-box-shadow:var(--_checkbox-elevation);box-shadow:var(--_checkbox-elevation);border-style:solid;border-width:var(--_checkbox-unchecked-border-width);border-color:var(--_checkbox-unchecked-border-color);border-radius:var(--_checkbox-shape);-webkit-box-sizing:border-box;box-sizing:border-box;block-size:var(--_checkbox-height);inline-size:var(--_checkbox-width);background-color:var(--_checkbox-background-color)}.forge-checkbox .icon{position:absolute;-webkit-transition-property:stroke-dashoffset;transition-property:stroke-dashoffset;-webkit-transition-duration:var(--_checkbox-animation-duration);transition-duration:var(--_checkbox-animation-duration);-webkit-transition-timing-function:var(--_checkbox-icon-animation-timing);transition-timing-function:var(--_checkbox-icon-animation-timing);fill:none;stroke-width:var(--_checkbox-icon-stroke-width)}.forge-checkbox .icon--checked{stroke:var(--_checkbox-icon-checked-color);stroke-dasharray:30;-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:30}.forge-checkbox .icon--indeterminate{stroke:var(--_checkbox-icon-indeterminate-color);stroke-dasharray:20;-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:20}.forge-checkbox .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label-font-weight,400);line-height:var(--forge-typography-label-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label-text-decoration,inherit);text-decoration:var(--forge-typography-label-text-decoration,inherit)}.forge-checkbox .label:empty{display:none}.forge-checkbox ::slotted([slot=input]){position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([checked]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background-color:var(--_checkbox-checked-background-color)}:host([checked]) .icon--checked{-webkit-transition-delay:var(--_checkbox-animation-duration);transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([checked]) .icon--checked:dir(rtl){stroke-dashoffset:60}:host([checked]) .icon--indeterminate{-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:20}:host([checked]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([indeterminate]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background-color:var(--_checkbox-checked-background-color)}:host([indeterminate]) .icon--checked{-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:30}:host([indeterminate]) .icon--indeterminate{-webkit-transition-delay:var(--_checkbox-animation-duration);transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([indeterminate]) .icon--indeterminate:dir(rtl){stroke-dashoffset:40}:host([indeterminate]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([dense]) .forge-checkbox .container{inline-size:var(--_checkbox-state-layer-dense-width);block-size:var(--_checkbox-state-layer-dense-height)}:host([disabled]) .forge-checkbox{opacity:var(--_checkbox-disabled-opacity)}:host([disabled]) .forge-checkbox .container{cursor:not-allowed}:host([readonly]) .forge-checkbox .container{cursor:not-allowed}@media (prefers-reduced-motion){.forge-checkbox{--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-unchecked-color)}forge-focus-indicator{--forge-focus-indicator-shape:0px;--forge-focus-indicator-outward-offset:8px}';
 /**
- * The custom element class behind the `<forge-checkbox>` element.
- *
  * @tag forge-checkbox
+ *
+ * @summary Checkboxes select single values for submission in a form.
+ *
+ * @description
+ * Use checkboxes to:
+ * - Select one or multiple items from a list.
+ * - Present a list containing sub-selections.
+ * - Turn an option on or off in desktop environment.
+ *
+ * @property {boolean} checked - Whether the checkbox is checked.
+ * @property {boolean} defaultChecked - Whether the checkbox is checked by default.
+ * @property {boolean} indeterminate - Toggles the indeterminate state. This does not affect whether the checkbox is checked or its form submission.
+ * @property {string} value - The value of the checkbox when checked.
+ * @property {boolean} disabled - Controls if the checkbix is disabled.
+ * @property {boolean} required = Controls if the checkbox is required.
+ * @property {boolean} readonly = Controls if the checkbox is readonly.
+ * @property {boolean} dense - The density state.
+ * @property {SwitchLabelPosition} labelPosition - Whether the label appears before or after the checkbox.
+ *
+ * @attribute {string} checked - Controls whether the checkbox is checked.
+ * @attribute {string} defaultChecked - Controls whether the checkbox is checked by default.
+ * @attribute {string} indeterminate - Controls the indeterminate state.
+ * @attribute {string} value - The value of the checkbox when checked.
+ * @attribute {string} disabled - Controls if the switch is disabled.
+ * @attribute {string} required - Controls if the switch is required.
+ * @attribute {string} readonly - Controls if the switch is readonly.
+ * @attribute {string} dense - Sets the density state.
+ * @attribute {string} label-position - Sets whether the label appears before or after the switch.
+ *
+ * @method {(force?: boolean) => void} toggle - Toggles whether the checkbox is is checked or forces a checked state.
+ *
+ * @event {Event} change - Dispatches when the checkbox is checked or unchecked.
+ *
+ * @cssproperty --forge-theme-tertiary - The primary color of the checkbox.
+ * @cssproperty --forge-theme-on-tertiary - The color of the checkmark and indeterminate mark.
+ * @cssproperty --forge-checkbox-primary-color - The primary color of the checkbox.
+ * @cssproperty --forge-checkbox-size - The inline and block size of the checkbox.
+ * @cssproperty --forge-checkbox-border-width - The width of the checkbox border.
+ * @cssproperty --forge-checkbox-state-layer-size - The inline and block size of the state layer.
+ * @cssproperty --forge-checkbox-state-layer-dense-size - The inline and block size of the state layer when dense.
+ * @cssproperty --forge-checkbox-background-color - The color of the checkbox background when unchecked and not indeterminate.
+ * @cssproperty --forge-checkbox-width - The inline size of the checkbox.
+ * @cssproperty --forge-checkbox-height - The block size of the checkbox.
+ * @cssproperty --forge-checkbox-unchecked-border-width - The width of the checkbox border when unchecked and not indeterminate.
+ * @cssproperty --forge-checkbox-unchecked-border-color - The color of the checkbox border when unchecked and not indeterminate.
+ * @cssproperty --forge-checkbox-shape - The shape of the checkbox.
+ * @cssproperty --forge-checkbox-elevation - The shadow of the checkbox.
+ * @cssproperty --forge-checkbox-gap - The space between the checkbox and label.
+ * @cssproperty --forge-checkbox-justify - How the checkbox and label are distributed along their main axis.
+ * @cssproperty --forge-checkbox-direction - Whether the checkbox and label are arranged along the inline or block axis.
+ * @cssproperty --forge-checkbox-checked-background-color - The color of the checkbox background when checked or indeterminate.
+ * @cssproperty --forge-checkbox-checked-border-width - The width of the checkbox border when checked or indeterminate.
+ * @cssproperty --forge-checkbox-checked-border-color - The color of the checkbox border when checked or indeterminate.
+ * @cssproperty --forge-checkbox-icon-color - The color of the checkmark and indeterminate mark.
+ * @cssproperty --forge-checkbox-icon-checked-color - The color of the checkmark mark.
+ * @cssproperty --forge-checkbox-icon-indeterminate-color - The color of the indeterminate mark.
+ * @cssproperty --forge-checkbox-icon-stroke-width - The stroke width of the checkmark and indeterminate marks.
+ * @cssproperty --forge-checkbox-state-layer-width - The inline size of the state layer.
+ * @cssproperty --forge-checkbox-state-layer-width - The inline size of the state layer.
+ * @cssproperty --forge-checkbox-state-layer-height - The block size of the state layer.
+ * @cssproperty --forge-checkbox-state-layer-checked-color - The color of the state layer when checked.
+ * @cssproperty --forge-checkbox-state-layer-unchecked-color - The color of the state layer when unchecked.
+ * @cssproperty --forge-checkbox-state-layer-shape - The shape of the state layer.
+ * @cssproperty --forge-checkbox-state-layer-dense-width - The inline size of the state layer when dense.
+ * @cssproperty --forge-checkbox-state-layer-dense-height - The block size of the state layer when dense.
+ * @cssproperty --forge-checkbox-disabled-opacity - The opacity when disabled.
+ * @cssproperty --forge-checkbox-animation-duration - The duration of animations.
+ * @cssproperty --forge-checkbox-background-animation-timing - The timing function of the background animations.
+ * @cssproperty --forge-checkbox-icon-animation-timing - The timing function of the checked and indeterminate icons animations.
+ *
+ * @csspart checkbox - Styles the checkbox container element.
+ * @csspart background - Styles the checkbox background element.
+ * @csspart checkmark - Styles the checkmark element.
+ * @csspart mixedmark - Styles the indeterminate mark element.
+ * @csspart label - Styles the label element.
+ * @csspart state-layer - Styles the state layer element.
+ * @csspart focus-indicator - Styles the focus indicator element.
  */
-let CheckboxComponent = class CheckboxComponent extends BaseComponent {
+let CheckboxComponent = class CheckboxComponent extends BaseNullableFormComponent {
     static get observedAttributes() {
-        return [CHECKBOX_CONSTANTS.attributes.DENSE];
+        return [
+            CHECKBOX_CONSTANTS.attributes.CHECKED,
+            CHECKBOX_CONSTANTS.attributes.DEFAULT_CHECKED,
+            CHECKBOX_CONSTANTS.attributes.INDETERMINATE,
+            CHECKBOX_CONSTANTS.attributes.VALUE,
+            CHECKBOX_CONSTANTS.attributes.DENSE,
+            CHECKBOX_CONSTANTS.attributes.DISABLED,
+            CHECKBOX_CONSTANTS.attributes.REQUIRED,
+            CHECKBOX_CONSTANTS.attributes.READONLY,
+            CHECKBOX_CONSTANTS.attributes.LABEL_POSITION
+        ];
+    }
+    get name() {
+        var _a;
+        return (_a = this.getAttribute('name')) !== null && _a !== void 0 ? _a : '';
+    }
+    set name(value) {
+        toggleAttribute(this, !!value, 'name', value !== null && value !== void 0 ? value : '');
+    }
+    get form() {
+        return this[internals].form;
+    }
+    get labels() {
+        return this[internals].labels;
+    }
+    get validity() {
+        this._foundation.syncValidity(this._hasCustomValidityError);
+        return this[internals].validity;
+    }
+    get validationMessage() {
+        this._foundation.syncValidity(this._hasCustomValidityError);
+        return this[internals].validationMessage;
+    }
+    get willValidate() {
+        return this[internals].willValidate;
     }
     constructor() {
         super();
-        attachShadowTemplate(this, template, styles);
+        attachShadowTemplate(this, template, styles, true);
+        this[internals] = this.attachInternals();
         this._foundation = new CheckboxFoundation(new CheckboxAdapter(this));
     }
-    async connectedCallback() {
-        await this._ensureInputElement();
-        this._foundation.connect();
+    connectedCallback() {
+        this._foundation.initialize();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
+            case CHECKBOX_CONSTANTS.attributes.CHECKED:
+                this.checked = coerceBoolean(newValue);
+                break;
+            case CHECKBOX_CONSTANTS.attributes.DEFAULT_CHECKED:
+                this.defaultChecked = coerceBoolean(newValue);
+                break;
+            case CHECKBOX_CONSTANTS.attributes.INDETERMINATE:
+                this.indeterminate = coerceBoolean(newValue);
+                break;
+            case CHECKBOX_CONSTANTS.attributes.VALUE:
+                this.value = newValue;
+                break;
             case CHECKBOX_CONSTANTS.attributes.DENSE:
                 this.dense = coerceBoolean(newValue);
                 break;
+            case CHECKBOX_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                break;
+            case CHECKBOX_CONSTANTS.attributes.REQUIRED:
+                this.required = coerceBoolean(newValue);
+                break;
+            case CHECKBOX_CONSTANTS.attributes.READONLY:
+                this.readonly = coerceBoolean(newValue);
+                break;
+            case CHECKBOX_CONSTANTS.attributes.LABEL_POSITION:
+                this.labelPosition = newValue;
+                break;
         }
     }
-    disconnectedCallback() {
-        this._foundation.disconnect();
-    }
-    async _ensureInputElement() {
-        // Not using core function ensureChild because it was not selecting the input properly
-        return new Promise(resolve => {
-            const element = this.querySelector('input');
-            if (element) {
-                resolve(element);
-            }
-            const observer = new MutationObserver(changes => {
-                const hasAddedNodes = changes.reduce((prev, curr) => prev + curr.addedNodes.length, 0) > 0;
-                if (hasAddedNodes) {
-                    const foundElement = this.querySelector('input');
-                    if (foundElement) {
-                        observer.disconnect();
-                        resolve(foundElement);
-                    }
-                }
-            });
-            observer.observe(this, { childList: true, subtree: true });
-        });
+    setFormValue(value, state) {
+        this[internals].setFormValue(value, state);
+        if (state) {
+            const stateValue = isString(state) ? state : state[this.name];
+            this.checked = stateValue === 'checked' || stateValue === 'checked-indeterminate';
+            this.indeterminate = stateValue === 'unchecked-indeterminate' || stateValue === 'checked-indeterminate';
+            return;
+        }
+        if (isString(value)) {
+            this.checked = !!value;
+        }
+        else if (value === null || value === void 0 ? void 0 : value[this.name]) {
+            this.checked = !!value[this.name];
+        }
+        else {
+            this.checked = false;
+        }
+    }
+    checkValidity() {
+        this._foundation.syncValidity(this._hasCustomValidityError);
+        return this[internals].checkValidity();
+    }
+    reportValidity() {
+        this._foundation.syncValidity(this._hasCustomValidityError);
+        return this[internals].reportValidity();
+    }
+    setCustomValidity(error) {
+        this._hasCustomValidityError = !!error;
+        this._foundation.setValidity({ customError: !!error }, error);
+    }
+    formResetCallback() {
+        this.checked = this.defaultChecked;
+    }
+    formStateRestoreCallback(state, reason) {
+        this.checked = state === 'checked' || state === 'checked-indeterminate';
+        this.indeterminate = state === 'unchecked-indeterminate' || state === 'checked-indeterminate';
+    }
+    formDisabledCallback(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    labelClickedCallback() {
+        this._foundation.proxyClick();
+    }
+    labelChangedCallback(value) {
+        this._foundation.proxyLabel(value);
+    }
+    /**
+     * Toggles the checkbox checked or unchecked.
+     * @param force Whether to set the checkbox checked or unchecked.
+     */
+    toggle(force) {
+        if (isDefined(force)) {
+            this._foundation.checked = force;
+        }
+        else {
+            this._foundation.checked = !this._foundation.checked;
+        }
     }
 };
+__decorate([
+    FoundationProperty()
+], CheckboxComponent.prototype, "checked", void 0);
+__decorate([
+    FoundationProperty()
+], CheckboxComponent.prototype, "defaultChecked", void 0);
+__decorate([
+    FoundationProperty()
+], CheckboxComponent.prototype, "indeterminate", void 0);
+__decorate([
+    FoundationProperty()
+], CheckboxComponent.prototype, "value", void 0);
 __decorate([
     FoundationProperty()
 ], CheckboxComponent.prototype, "dense", void 0);
+__decorate([
+    FoundationProperty()
+], CheckboxComponent.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty()
+], CheckboxComponent.prototype, "required", void 0);
+__decorate([
+    FoundationProperty()
+], CheckboxComponent.prototype, "readonly", void 0);
+__decorate([
+    FoundationProperty()
+], CheckboxComponent.prototype, "labelPosition", void 0);
 CheckboxComponent = __decorate([
     CustomElement({
-        name: CHECKBOX_CONSTANTS.elementName
+        name: CHECKBOX_CONSTANTS.elementName,
+        dependencies: [
+            FocusIndicatorComponent,
+            StateLayerComponent
+        ]
     })
 ], CheckboxComponent);
 export { CheckboxComponent };

package/esm/checkbox/index.d.ts

@@ -3,8 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export * from './checkbox-constants';
 export * from './checkbox-adapter';
+export * from './checkbox-constants';
 export * from './checkbox-foundation';
 export * from './checkbox';
 export * from './checkbox-component-delegate';

package/esm/checkbox/index.js

@@ -5,8 +5,8 @@
  */
 import { defineCustomElement } from '@tylertech/forge-core';
 import { CheckboxComponent } from './checkbox';
-export * from './checkbox-constants';
 export * from './checkbox-adapter';
+export * from './checkbox-constants';
 export * from './checkbox-foundation';
 export * from './checkbox';
 export * from './checkbox-component-delegate';

package/esm/chip-field/chip-field-adapter.js

@@ -46,7 +46,7 @@ export class ChipFieldAdapter extends FieldAdapter {
     tryPropagateClick(target) {
         var _a;
         // We only propagate the click to the input if it originated from our internal input container
-        if (target instanceof HTMLElement && target.matches(CHIP_FIELD_CONSTANTS.selectors.INPUT_CONTAINER)) {
+        if (!this._inputElement.disabled && target instanceof HTMLElement && target.matches(CHIP_FIELD_CONSTANTS.selectors.INPUT_CONTAINER)) {
             (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new MouseEvent('click'));
         }
     }

package/esm/chip-field/chip-field-constants.d.ts

@@ -4,6 +4,9 @@
  * License: Apache-2.0
  */
 export declare const CHIP_FIELD_CONSTANTS: {
+    attributes: {
+        ADD_ON_BLUR: string;
+    };
     elementName: "forge-chip-field";
     classes: {
         ROOT: string;

package/esm/chip-field/chip-field-constants.js

@@ -27,7 +27,11 @@ const events = {
     MEMBER_ADDED: `${elementName}-member-added`,
     MEMBER_REMOVED: `${elementName}-member-removed`
 };
+const attributes = {
+    ADD_ON_BLUR: 'add-on-blur'
+};
 export const CHIP_FIELD_CONSTANTS = {
+    attributes,
     elementName,
     classes,
     slots,

package/esm/chip-field/chip-field-foundation.d.ts

@@ -6,9 +6,11 @@
 import { IChipFieldAdapter } from './chip-field-adapter';
 import { IFieldFoundation, FieldFoundation } from '../field/field-foundation';
 export interface IChipFieldFoundation extends IFieldFoundation {
+    addOnBlur: boolean;
 }
 export declare class ChipFieldFoundation extends FieldFoundation implements IChipFieldFoundation {
     protected _adapter: IChipFieldAdapter;
+    private _addOnBlur;
     private _memberSlotListener;
     private _inputContainerMouseDownListener;
     private _handleRootKeyDown;
@@ -16,6 +18,9 @@ export declare class ChipFieldFoundation extends FieldFoundation implements IChi
     constructor(_adapter: IChipFieldAdapter);
     initialize(): void;
     disconnect(): void;
+    /** Controls adding a member of entered text on blur. */
+    get addOnBlur(): boolean;
+    set addOnBlur(value: boolean);
     private _onInputContainerMouseDown;
     protected _onBlur(event: FocusEvent): void;
     private _onRootKeyDown;

package/esm/chip-field/chip-field-foundation.js

@@ -10,6 +10,7 @@ export class ChipFieldFoundation extends FieldFoundation {
     constructor(_adapter) {
         super(_adapter);
         this._adapter = _adapter;
+        this._addOnBlur = false;
         this._memberSlotListener = () => this._onMemberSlotChanged();
         this._inputContainerMouseDownListener = evt => this._onInputContainerMouseDown(evt);
         this._handleRootKeyDown = evt => this._onRootKeyDown(evt);
@@ -29,6 +30,17 @@ export class ChipFieldFoundation extends FieldFoundation {
         this._adapter.removeRootListener('keydown', this._handleRootKeyDown);
         this._adapter.removeInputListener('keydown', this._handleKeyDown);
     }
+    /** Controls adding a member of entered text on blur. */
+    get addOnBlur() {
+        return this._addOnBlur;
+    }
+    set addOnBlur(value) {
+        value = Boolean(value);
+        if (this._addOnBlur !== value) {
+            this._addOnBlur = value;
+            this._adapter.toggleHostAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_ON_BLUR, this._addOnBlur);
+        }
+    }
     _onInputContainerMouseDown(evt) {
         evt.preventDefault();
         this._adapter.focusInput();
@@ -36,6 +48,9 @@ export class ChipFieldFoundation extends FieldFoundation {
     }
     _onBlur(event) {
         const input = event.target;
+        if (this._addOnBlur) {
+            this._addMember(input);
+        }
         input.value = '';
         super._onBlur(event);
     }
@@ -69,9 +84,13 @@ export class ChipFieldFoundation extends FieldFoundation {
                 break;
             case 'Esc':
             case 'Escape':
-            case 'Tab':
                 input.value = '';
                 break;
+            case 'Tab':
+                if (!this._addOnBlur) {
+                    input.value = '';
+                }
+                break;
             default:
                 break;
         }

package/esm/chip-field/chip-field.d.ts

@@ -6,6 +6,7 @@
 import { ChipFieldFoundation } from './chip-field-foundation';
 import { FieldComponent, IFieldComponent } from '../field/field';
 export interface IChipFieldComponent extends IFieldComponent {
+    addOnBlur: boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -22,5 +23,9 @@ declare global {
  * @tag forge-chip-field
  */
 export declare class ChipFieldComponent extends FieldComponent<ChipFieldFoundation> implements IChipFieldComponent {
+    static get observedAttributes(): string[];
     constructor();
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /** Controls whether or not the value should be set onBlur */
+    addOnBlur: boolean;
 }