feat(checkbox): refactor checkbox component

src/dev/pages/app-bar/app-bar.ts

@@ -78,7 +78,7 @@ appBarSearch.addEventListener('forge-app-bar-search-input', ({ detail }) => {
 });
 
 const useProfileCardBuilderToggle = document.querySelector('#app-bar-profile-card-builder-toggle') as ISwitchComponent;
-useProfileCardBuilderToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+useProfileCardBuilderToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   appBarProfileButton.profileCardBuilder = selected ? profileCardBuilder : undefined;
 });
 
@@ -113,7 +113,7 @@ function profileCardBuilder(): HTMLElement {
 }
 
 const appBarRaisedToggle = document.querySelector('#app-bar-raised-toggle') as ISwitchComponent;
-appBarRaisedToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+appBarRaisedToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   appBar.raised = selected;
   pageAppBar.raised = selected;
 });
@@ -135,7 +135,7 @@ appBarThemeSelect.addEventListener('change', () => {
 });
 
 const showAppBarTabsToggle = document.querySelector('#app-bar-show-tabs-toggle') as ISwitchComponent;
-showAppBarTabsToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+showAppBarTabsToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   if (selected) {
     appBarTabs.style.removeProperty('display');
   } else {

src/dev/pages/autocomplete/autocomplete.ts

@@ -39,7 +39,7 @@ autocomplete.addEventListener('forge-autocomplete-select', ({ detail }) => {
 
 // Options
 const multipleToggle = document.querySelector('#autocomplete-multiple') as HTMLInputElement;
-multipleToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+multipleToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   autocomplete.multiple = selected;
 });
 
@@ -59,58 +59,58 @@ optionLimitInput.addEventListener('input', () => {
 });
 
 const filterOnFocusToggle = document.querySelector('#autocomplete-filter-on-focus') as HTMLInputElement;
-filterOnFocusToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+filterOnFocusToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   autocomplete.filterOnFocus = selected;
 });
 
 const filterFocusFirstToggle = document.querySelector('#autocomplete-filter-focus-first') as HTMLInputElement;
-filterFocusFirstToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+filterFocusFirstToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   autocomplete.filterFocusFirst = selected;
 });
 
 const itemBuilderToggle = document.querySelector('#autocomplete-item-builder') as HTMLInputElement;
-itemBuilderToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+itemBuilderToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   autocomplete.optionBuilder = selected ? itemBuilder : undefined;
 });
 
 const allowUnmatchedToggle = document.querySelector('#autocomplete-allow-unmatched') as HTMLInputElement;
-allowUnmatchedToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+allowUnmatchedToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   autocomplete.allowUnmatched = selected;
 });
 
 const selectedTextBuilderToggle = document.querySelector('#autocomplete-selected-text-builder') as HTMLInputElement;
-selectedTextBuilderToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+selectedTextBuilderToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   autocomplete.selectedTextBuilder = selected ? selectedTextBuilder : undefined;
 });
 
 const scrollObserverToggle = document.querySelector('#autocomplete-scroll-observer') as HTMLInputElement;
-scrollObserverToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+scrollObserverToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   autocomplete.observeScroll = selected;
 });
 
 const syncPopupWidthToggle = document.querySelector('#autocomplete-sync-popup-width') as HTMLInputElement;
-syncPopupWidthToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+syncPopupWidthToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   autocomplete.syncPopupWidth = selected;
 });
 
 const headerBuilderToggle = document.querySelector('#autocomplete-header-builder') as HTMLInputElement;
-headerBuilderToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+headerBuilderToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   autocomplete.popupHeaderBuilder = selected ? headerBuilderCallback : undefined;
 });
 
 const footerBuilderToggle = document.querySelector('#autocomplete-footer-builder') as HTMLInputElement;
-footerBuilderToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+footerBuilderToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   autocomplete.popupFooterBuilder = selected ? footerBuilderCallback : undefined;
 });
 
 const simulateAsyncToggle = document.querySelector('#autocomplete-simulate-async') as HTMLInputElement;
-simulateAsyncToggle.addEventListener('forge-switch-select', ({ detail: selected }) => asyncFilter = selected);
+simulateAsyncToggle.addEventListener('forge-switch-change', ({ detail: selected }) => asyncFilter = selected);
 
 const groupToggle = document.querySelector('#autocomplete-group') as HTMLInputElement;
-groupToggle.addEventListener('forge-switch-select', ({ detail: selected }) => useGroupedData = selected);
+groupToggle.addEventListener('forge-switch-change', ({ detail: selected }) => useGroupedData = selected);
 
 const groupHeaderBuilderToggle = document.querySelector('#autocomplete-group-header-builder') as HTMLInputElement;
-groupHeaderBuilderToggle.addEventListener('forge-switch-select', ({ detail: selected }) => useGroupHeaderBuilder = selected);
+groupHeaderBuilderToggle.addEventListener('forge-switch-change', ({ detail: selected }) => useGroupHeaderBuilder = selected);
 
 
 function itemBuilder(option: IListDropdownOption, filterText: string, _listItem: IListItemComponent): HTMLElement {

src/dev/pages/avatar/avatar.ts

@@ -9,7 +9,7 @@ function getAvatarElements(): NodeListOf<AvatarComponent> {
 }
 
 const autoColorToggle = document.querySelector('#auto-color-checkbox') as ISwitchComponent;
-autoColorToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+autoColorToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   const avatars = getAvatarElements();
   avatars.forEach(avatar => avatar.autoColor = selected);
 });

src/dev/pages/banner/banner.ts

@@ -24,22 +24,22 @@ themeSelect.addEventListener('change', ({ detail: theme }) => {
 });
 
 const dismissToggle = document.querySelector('#dismissed-toggle') as ISwitchComponent;
-dismissToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+dismissToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   banner.dismissed = selected;
 });
 
 const showLeadingIconToggle = document.querySelector('#show-leading-icon-toggle') as ISwitchComponent;
-showLeadingIconToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+showLeadingIconToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   leadingIcon.style.display = selected ? 'block' : 'none';
 });
 
 const showDismissToggle = document.querySelector('#show-dismiss-toggle') as ISwitchComponent;
-showDismissToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+showDismissToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   banner.canDismiss = selected;
 });
 
 const useMoreTextToggle = document.querySelector('#use-more-text-toggle') as ISwitchComponent;
-useMoreTextToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+useMoreTextToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   textEl.textContent = selected ?
     'Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit explicabo labore soluta ex culpa, consectetur possimus quidem ullam voluptas est facilis quasi enim error doloribus omnis recusandae! Dolore, eaque ipsa!' :
     'Lorem, ipsum dolor sit amet consectetur adipisicing elit.';

src/dev/pages/button-toggle/button-toggle.ts

@@ -30,37 +30,37 @@ buttonToggleGroupStatic.addEventListener('forge-button-toggle-select', ({ detail
 });
 
 const multipleToggle = document.querySelector('#button-toggle-multiple') as ISwitchComponent;
-multipleToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+multipleToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   buttonToggleGroupStatic.multiple = selected;
   buttonToggleGroupDynamic.multiple = selected;
 });
 
 const mandatoryToggle = document.querySelector('#button-toggle-mandatory') as ISwitchComponent;
-mandatoryToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+mandatoryToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   buttonToggleGroupStatic.mandatory = selected;
   buttonToggleGroupDynamic.mandatory = selected;
 });
 
 const verticalToggle = document.querySelector('#button-toggle-vertical') as ISwitchComponent;
-verticalToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+verticalToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   buttonToggleGroupStatic.vertical = selected;
   buttonToggleGroupDynamic.vertical = selected;
 });
 
 const stretchToggle = document.querySelector('#button-toggle-stretch') as ISwitchComponent;
-stretchToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+stretchToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   buttonToggleGroupStatic.stretch = selected;
   buttonToggleGroupDynamic.stretch = selected;
 });
 
 const denseToggle = document.querySelector('#button-toggle-dense') as ISwitchComponent;
-denseToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+denseToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   buttonToggleGroupStatic.dense = selected;
   buttonToggleGroupDynamic.dense = selected;
 });
 
 const disabledToggle = document.querySelector('#button-toggle-disabled') as ISwitchComponent;
-disabledToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+disabledToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   buttonToggleGroupStatic.disabled = selected;
   buttonToggleGroupDynamic.disabled = selected;
 });

src/dev/pages/button/button.ts

@@ -22,7 +22,7 @@ function getButtonElements(): NodeListOf<ButtonComponent> {
 }
 
 const disabledToggle = document.querySelector('#disabled-switch') as ISwitchComponent;
-disabledToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+disabledToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   const buttons = getButtonElements();
   buttons.forEach(forgeButton => {
     const buttonEl = forgeButton.querySelector('button') as HTMLButtonElement;
@@ -31,7 +31,7 @@ disabledToggle.addEventListener('forge-switch-select', ({ detail: selected }) =>
 });
 
 const denseToggle = document.querySelector('#dense-switch') as ISwitchComponent;
-denseToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+denseToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   const buttons = getButtonElements();
   buttons.forEach(forgeButton => {
     const isChecked = selected;

src/dev/pages/calendar/calendar.ts

@@ -7,12 +7,12 @@ import type { ISelectComponent } from '@tylertech/forge/select';
 const calendar = document.querySelector('forge-calendar') as ICalendarComponent;
 
 const showTodayToggle = document.querySelector('#calendar-today') as ISwitchComponent;
-showTodayToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+showTodayToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   calendar.showToday = selected;
 });
 
 const readonlyToggle = document.querySelector('#calendar-readonly') as ISwitchComponent;
-readonlyToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+readonlyToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   calendar.readonly = selected;
 });
 

src/dev/pages/card/card.ts

@@ -11,5 +11,5 @@ import type { ICardComponent, ISwitchComponent } from '@tylertech/forge';
 const card = document.querySelector('.demo-card') as ICardComponent;
 
 const raisedToggle = document.querySelector('#opt-card-raised') as ISwitchComponent;
-raisedToggle.addEventListener('forge-switch-select', ({ detail: selected }) => card.raised = selected);
+raisedToggle.addEventListener('forge-switch-change', ({ detail: selected }) => card.raised = selected);
 

src/dev/pages/checkbox/checkbox.ejs

@@ -1,34 +1,41 @@
-<div class="vert">
+<div class="vert" id="container">
   <div>
     <h3 class="forge-typography--subtitle1">Default</h3>
-    <forge-checkbox>
-      <input type="checkbox" id="default-checkbox" checked>
-      <label for="default-checkbox">Checkbox label</label>
+    <forge-checkbox>Default</forge-checkbox>
+  </div>
+
+  <div>
+    <h3 class="forge-typography--subtitle1">Exposed input</h3>
+    <forge-checkbox id="exposed-input-checkbox">
+      <span>Exposed input</span>
     </forge-checkbox>
   </div>
 
   <div>
     <h3 class="forge-typography--subtitle1">Dense</h3>
-    <forge-checkbox dense>
-      <input type="checkbox" id="dense-checkbox" checked>
-      <label for="dense-checkbox">Dense checkbox</label>
-    </forge-checkbox>
+    <forge-checkbox dense>Dense</forge-checkbox>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1">Indeterminate</h3>
-    <forge-checkbox >
-      <input type="checkbox" id="indeterminate-checkbox" checked>
-      <label for="indeterminate-checkbox">Indeterminate checkbox</label>
-    </forge-checkbox>
+    <h3 class="forge-typography--subtitle1">Readonly</h3>
+    <forge-checkbox readonly>Readonly</forge-checkbox>
   </div>
 
   <div>
     <h3 class="forge-typography--subtitle1">Disabled</h3>
-    <forge-checkbox>
-      <input type="checkbox" id="disabled-checkbox" checked disabled>
-      <label for="disabled-checkbox">Disabled checkbox</label>
-    </forge-checkbox>
+    <forge-checkbox disabled>Disabled</forge-checkbox>
+  </div>
+
+  <div>
+    <h3 class="forge-typography--subtitle1">Start label</h3>
+    <forge-checkbox label-position="start">Start label</forge-checkbox>
+  </div>
+
+  <div>
+    <h3 class="forge-typography--subtitle1">Form associated</h3>
+    <form name="test-form">
+      <forge-checkbox name="test-checkbox">Form associated</forge-checkbox>
+    </form>
   </div>
 </div>
 

src/dev/pages/checkbox/checkbox.html

@@ -2,7 +2,12 @@
 include('./src/partials/page.ejs', {
   page: {
     title: 'Checkbox',
-    includePath: './pages/checkbox/checkbox.ejs'
+    includePath: './pages/checkbox/checkbox.ejs',
+    options: [
+      { type: 'switch', label: 'Checked', id: 'opt-checked' },
+      { type: 'switch', label: 'Indeterminate', id: 'opt-indeterminate' },
+      { type: 'switch', label: 'Expose input', id: 'opt-expose-input' }
+    ]
   }
 })
 %>

src/dev/pages/checkbox/checkbox.ts

@@ -1,6 +1,35 @@
 import '$src/shared';
 import '@tylertech/forge/checkbox';
 import './checkbox.scss';
+import { ICheckboxComponent, ISwitchComponent } from '@tylertech/forge';
 
-const indeterminateCheckbox = document.getElementById('indeterminate-checkbox') as HTMLInputElement;
-indeterminateCheckbox.indeterminate = true;
+const checkboxesCheckedToggle = document.getElementById('opt-checked') as ISwitchComponent;
+const checkboxesIndeterminateToggle = document.getElementById('opt-indeterminate') as ISwitchComponent;
+const exposeInputToggle = document.getElementById('opt-expose-input') as ISwitchComponent;
+
+checkboxesCheckedToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
+  const checkboxes = document.querySelectorAll('forge-checkbox') as NodeListOf<ICheckboxComponent>;
+  checkboxes.forEach(checkbox => checkbox.checked = selected);
+});
+
+checkboxesIndeterminateToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
+  const checkboxes = document.querySelectorAll('forge-checkbox') as NodeListOf<ICheckboxComponent>;
+  checkboxes.forEach(checkbox => checkbox.indeterminate = selected);
+});
+
+exposeInputToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
+  const checkbox = document.getElementById('exposed-input-checkbox') as ICheckboxComponent;
+  if (selected) {
+    const input = document.createElement('input');
+    input.type = 'checkbox';
+    input.slot = 'input';
+    input.setAttribute('aria-labelledby', 'exposed-input-checkbox');
+    checkbox.append(input);
+  } else {
+    checkbox.querySelector('input')?.remove();
+  }
+});
+
+document.querySelectorAll('forge-checkbox').forEach(checkbox => {
+  checkbox.addEventListener('change', evt => console.log(evt));
+});

src/dev/pages/chip-field/chip-field.ts

@@ -23,10 +23,10 @@ const denseToggle = document.querySelector('#opt-dense') as ISwitchComponent;
 const populateButton = document.querySelector('#opt-btn-populate') as HTMLButtonElement;
 const clearButton = document.querySelector('#opt-btn-clear') as HTMLButtonElement;
 
-requiredToggle.addEventListener('forge-switch-select', updateRequiredState);
-invalidToggle.addEventListener('forge-switch-select', updateInvalidState);
-disabledToggle.addEventListener('forge-switch-select', updateDisabledState);
-denseToggle.addEventListener('forge-switch-select', updateDenseState);
+requiredToggle.addEventListener('forge-switch-change', updateRequiredState);
+invalidToggle.addEventListener('forge-switch-change', updateInvalidState);
+disabledToggle.addEventListener('forge-switch-change', updateDisabledState);
+denseToggle.addEventListener('forge-switch-change', updateDenseState);
 populateButton.addEventListener('click', () => populateMembers(45));
 clearButton.addEventListener('click', removeAllMembers);
 

src/dev/pages/chips/chips.ts

@@ -44,15 +44,15 @@ refreshButton.addEventListener('click', () => {
 });
 
 // Dense toggling
-chipsDenseToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+chipsDenseToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   const chipSets = document.querySelectorAll('forge-chip-set') as NodeListOf<IChipSetComponent>;
   for (const chipSet of chipSets) {
     chipSet.dense = selected;
   }
 });
 
 // Disabled toggling
-chipsDisabledToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+chipsDisabledToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   const chipSets = document.querySelectorAll('forge-chip-set') as NodeListOf<IChipSetComponent>;
   for (const chipSet of chipSets) {
     chipSet.disabled = selected;

src/dev/pages/circular-progress/circular-progress.ts

@@ -7,7 +7,7 @@ const circularProgress = document.querySelector('forge-circular-progress#circula
 let determinateIntervalTimer: number | undefined;
 
 const showTrackToggle = document.getElementById('opt-show-track') as ISwitchComponent;
-showTrackToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+showTrackToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   if (selected) {
     circularProgress.style.removeProperty('--forge-circular-progress-track-background');
   } else {
@@ -16,7 +16,7 @@ showTrackToggle.addEventListener('forge-switch-select', ({ detail: selected }) =
 });
 
 const showPercentToggle = document.getElementById('opt-show-percent') as ISwitchComponent;
-showPercentToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+showPercentToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   circularProgress.textContent = selected ? '0%' : '';
 });
 
@@ -30,7 +30,7 @@ themeSelect.addEventListener('change', ({ detail }) => {
 });
 
 const determinateToggle = document.getElementById('opt-determinate') as ISwitchComponent;
-determinateToggle.addEventListener('forge-switch-select', ({ detail: selected }) => {
+determinateToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   circularProgress.determinate = selected;
 
   showPercentToggle.disabled = !circularProgress.determinate;