@bexis2/bexis2-core-ui 0.4.19 → 0.4.20

package/README.md

@@ -1,13 +1,20 @@
 # bexis-core-ui
+
+## 0.4.20
+- Add aria-label to Table and other components
+- Facets
+  - Add aria-label to Facets component
+  - sort by count if exists, reorder more view, truncate long names,
+- Search
+  - Add aria-label to Search component
+- Table: add column
 ## 0.4.19
+
 ## 0.4.18
 - Updates indicator text for current page and possible number of pages in a Table
 - Fixes client-side search on Table
 - Adds "No rows available" text in Table if search or filter returns no rows.
 
-## 0.4.17
-- Table
-  - Fix client-side search
 ## 0.4.16
 - Facets
   - Replaces groups array with a writable store to re-render component on data manipulation.
@@ -19,9 +26,9 @@
   - Adds on:change action
 
 ## 0.4.14
-- Table 
+- Table
   - fixes rendering issues with Table filters and different components
-  
+
 - Facets
   - Exports Facets component
 
@@ -45,7 +52,7 @@
   - Updates the structure of server-side configuration for Tables.
   - Adds new page size dropdown in Table for to fix contrast issues in the component.
   - Adds showing/hiding Table columns.
-  
+
 - Facets:
   - Adds Facets component.
 
@@ -73,7 +80,7 @@
 - update libs
   - remove eslint-plugin-svelte3
   - update svelte, sveltekit, typescript, tailwind ...
-  
+
 ## 0.4.3
 - table
   - Enable searching on server-side
@@ -104,7 +111,7 @@
 
 ## 0.3.11
 - add on:change passthrough to TextInput, TextArea, DateInput, NumberInput, CheckBox
-  
+
 ## 0.3.10
 - multi select
   - update svelte-select libary

package/dist/components/CodeEditor/CodeEditor.svelte

@@ -82,6 +82,7 @@ $: isValid = language === "json" ? isValidJSON(value) : language === "js" ? isVa
 		<div class="flex gap-2">
 			<button
 				class="btn variant-filled-warning"
+				title="Reset"
 				id="{id}-reset"
 				on:click|preventDefault={() => modalStore.trigger(modal)}
 				><Fa icon={faArrowRotateLeft} /></button
@@ -90,6 +91,7 @@ $: isValid = language === "json" ? isValidJSON(value) : language === "js" ? isVa
 					class="btn border"
 					class:bg-slate-700={dark}
 					class:bg-white={!dark}
+					title="Toggle dark mode"
 					id="{id}-toggle"
 					on:click|preventDefault={() => (dark = !dark)}
 				>
@@ -106,11 +108,13 @@ $: isValid = language === "json" ? isValidJSON(value) : language === "js" ? isVa
 			<div class="flex gap-2">
 				<button
 					class="btn variant-filled-warning"
+					title="Cancel"
 					id="{id}-cancel"
 					on:click|preventDefault={() => dispatch('cancel')}><Fa icon={faXmark} /></button
 				>
 				<button
 					class="btn variant-filled-primary"
+					title="Save"
 					id="{id}-save"
 					disabled={!isValid}
 					on:click|preventDefault={() => dispatch('save')}><Fa icon={faSave} /></button

package/dist/components/Facets/Facets.svelte

@@ -18,7 +18,7 @@ export const showMore = (groupName) => {
       ref: ShowMore,
       props: {
         group,
-        handleSave,
+        handleApply,
         handleCancel
       }
     }
@@ -29,7 +29,7 @@ let selectedItems = {};
 let selectedGroups = {};
 const dispatch = createEventDispatcher();
 const modalStore = getModalStore();
-const handleSave = (group) => {
+const handleApply = (group) => {
   const { name: groupName, children } = group;
   dispatch("showMoreOpenChange", {
     group: groupName,
@@ -90,11 +90,14 @@ const sortOptions = () => {
       if (a.count != void 0 && b.count != void 0) {
         return b.count - a.count;
       }
-      return a.displayName.localeCompare(b.displayName);
+      return 0;
+    }).map((item) => item.name);
+    const unchecked = Object.keys(selected[group].children).filter((item) => !checked.includes(item)).map((item) => selected[group].children[item]).sort((a, b) => {
+      if (a.count != void 0 && b.count != void 0) {
+        return b.count - a.count;
+      }
+      return 0;
     }).map((item) => item.name);
-    const unchecked = Object.keys(selected[group].children).filter(
-      (item) => !checked.includes(item)
-    );
     const groupIndex = displayedGroups.findIndex((g) => g.name === group);
     displayedGroups[groupIndex].children = [
       ...checked.map(
@@ -131,7 +134,7 @@ groups.subscribe((data) => {
   });
 });
 $: displayedGroups = structuredClone($groups);
-$: selectedItems, mapSelected("items");
+$: selectedItems, mapSelected("items"), sortOptions();
 $: selectedGroups, mapSelected("groups");
 </script>
 
@@ -145,7 +148,7 @@ $: selectedGroups, mapSelected("groups");
 			bind:checked={selectedGroups[group.name]}
 			bind:group={selectedGroups}
 		>
-			<p class="font-semibold">
+			<p class="font-semibold whitespace-nowrap">
 				{group.displayName}{group.count !== undefined ? ` (${group.count})` : ''}
 			</p>
 
@@ -163,7 +166,12 @@ $: selectedGroups, mapSelected("groups");
 							selection
 							multiple
 						>
-							<p>{item.displayName} ({item.count})</p>
+							<div class="flex gap-2">
+								<p class="w-max grow truncate">
+									<span title={item.displayName}>{item.displayName}</span>
+								</p>
+								<span>({item.count})</span>
+							</div>
 						</TreeViewItem>
 					{/each}
 					<!-- Trigger for the Modal to view all options -->
@@ -185,7 +193,12 @@ $: selectedGroups, mapSelected("groups");
 							selection
 							multiple
 						>
-							<p>{item.displayName} ({item.count})</p>
+							<div class="flex gap-2">
+								<p class="w-max grow truncate">
+									<span title={item.displayName}>{item.displayName}</span>
+								</p>
+								<span>({item.count})</span>
+							</div>
 						</TreeViewItem>
 					{/each}
 				{/if}

package/dist/components/Facets/ShowMore.svelte

@@ -1,5 +1,5 @@
 <script>export let group;
-export let handleSave;
+export let handleApply;
 export let handleCancel;
 let selected = structuredClone(group.children);
 const selectAll = () => {
@@ -8,8 +8,8 @@ const selectAll = () => {
 const selectNone = () => {
   Object.keys(selected).forEach((key) => selected[key].selected = false);
 };
-const onSave = () => {
-  handleSave({
+const onApply = () => {
+  handleApply({
     ...group,
     children: selected
   });
@@ -20,31 +20,44 @@ const onCancel = () => {
   handleCancel(group.name);
 };
 const gridClass = (items) => {
-  if (items.length >= 50) {
-    return "grid-cols-5";
-  } else if (items.length >= 30) {
-    return "grid-cols-4";
-  } else if (items.length >= 20) {
-    return "grid-cols-3";
-  }
-  return "grid-cols-2";
+  const ceil = Math.ceil(Math.sqrt(items.length));
+  const max = Math.max(ceil, Math.floor(items.length / 3));
+  const classes = [
+    "grid-rows-1",
+    "grid-rows-2",
+    "grid-rows-3",
+    "grid-rows-4",
+    "grid-rows-5",
+    "grid-rows-6",
+    "grid-rows-7",
+    "grid-rows-8",
+    "grid-rows-9",
+    "grid-rows-10",
+    "grid-rows-11",
+    "grid-rows-12"
+  ];
+  if (max > 12) {
+    return "grid-rows-12";
+  } else return classes[max - 1 || 1];
 };
 </script>
 
-<div class="p-5 rounded-md bg-surface-50 dark:bg-surface-800 border-primary-500 border-2">
+<div class="p-5 rounded-md max-w-6xl bg-surface-50 dark:bg-surface-800 border-primary-500 border-2">
 	<!-- Header -->
 	<h2 class="text-xl font-semibold">{group.displayName}</h2>
 
 	<!-- Items -->
 	<div
-		class="grid {gridClass(
+		class="{gridClass(
 			Object.keys(selected)
-		)} !gap-x-20 gap-y-2 py-10 px-2 max-h-[1000px] overflow-x-auto max-w-6xl"
+		)} grid grid-flow-col gap-x-10 gap-y-2 py-10 px-2 h-full overflow-x-auto"
 	>
 		{#each Object.keys(selected) as key}
-			<label class="flex gap-3 items-center">
+			<label class="flex gap-3 items-center w-48">
 				<input type="checkbox" class="checkbox" bind:checked={selected[key].selected} />
-				<span class="whitespace-nowrap break-before-avoid break-after-avoid"
+				<span
+					title={selected[key].displayName}
+					class="whitespace-nowrap break-before-avoid break-after-avoid truncate"
 					>{selected[key].displayName}</span
 				>
 			</label>
@@ -58,7 +71,7 @@ const gridClass = (items) => {
 			<button class="btn btn-sm variant-filled-tertiary" on:click={selectAll}>All</button>
 		</div>
 		<div class="flex gap-3">
-			<button class="btn btn-sm variant-filled-primary" on:click={onSave}>Save</button>
+			<button class="btn btn-sm variant-filled-primary" on:click={onApply}>Apply</button>
 			<button class="btn btn-sm variant-filled-secondary" on:click={onCancel}>Cancel</button>
 		</div>
 	</div>

package/dist/components/Facets/ShowMore.svelte.d.ts

@@ -3,7 +3,7 @@ import type { SelectedFacetGroup } from '../../models/Models';
 declare const __propDef: {
     props: {
         group: SelectedFacetGroup;
-        handleSave: (group: SelectedFacetGroup) => {};
+        handleApply: (group: SelectedFacetGroup) => {};
         handleCancel: (groupName: string) => {};
     };
     events: {

package/dist/components/File/FileUploader.svelte

@@ -121,7 +121,7 @@ async function handleSubmit() {
 			{/if}
 		</div>
 
-		<button id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
+		<button title="Submit" id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
 	{:else}
 		<!-- while data is not loaded show a loading information -->
 

package/dist/components/Table/ColumnsMenu.svelte

@@ -10,7 +10,9 @@ const popupCombobox = {
 
 <button
 	type="button"
+	title="Hide or show columns"
 	class="btn btn-sm variant-filled-primary rounded-full order-last"
+	aria-label="Open menu to hide/show columns"
 	use:popup={popupCombobox}>Columns</button
 >
 
@@ -20,8 +22,11 @@ const popupCombobox = {
 >
 	{#each columns as column}
 		<div class="flex gap-3 items-center">
+			<label for={column.id} class="cursor-pointer" title={column.label}></label>
 			<input
+				aria-label="Toggle column visibility for column {column.label}"
 				type="checkbox"
+				id = {column.id}
 				bind:checked={column.visible}
 				disabled={columns.filter((c) => c.visible).length === 1 && column.visible}
 			/>

package/dist/components/Table/TableContent.svelte

@@ -143,8 +143,8 @@ const tableColumns = [
         header: header ?? key,
         accessor,
         // Render the cell with the provided component, or use the toStringFn if provided, or just use the value
-        cell: ({ value, row }) => {
-          return renderComponent ? createRender(renderComponent, { value, row, dispatchFn: actionDispatcher }) : toStringFn ? toStringFn(value) : value;
+        cell: ({ value, row, column }) => {
+          return renderComponent ? createRender(renderComponent, { value, row, column, dispatchFn: actionDispatcher }) : toStringFn ? toStringFn(value) : value;
         },
         plugins: {
           // Sorting config
@@ -326,7 +326,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 						} else {
 							sendModel.q = searchValue;
 						}
-            
+
 						$filterValue = searchValue;
 					}}
 				>
@@ -334,13 +334,16 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 						<input
 							class="input p-2 border border-primary-500"
 							type="text"
+							title="Search within all table rows"
 							bind:value={searchValue}
 							placeholder="Search rows..."
 							id="{tableId}-search"
 						/><button
 							type="reset"
+							title="Clear search"
 							id="{tableId}-searchReset"
 							class="absolute right-3 items-center"
+							aria-label="Clear search"
 							on:click|preventDefault={() => {
 								if (serverSide && !sendModel) {
 									throw new Error('Server-side configuration is missing');
@@ -355,6 +358,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 					</div>
 					<button
 						type="submit"
+						title="Search"
 						id="{tableId}-searchSubmit"
 						class="btn variant-filled-primary"
 						on:click|preventDefault={() => {
@@ -380,6 +384,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 					{#if toggle}
 						<SlideToggle
 							name="slider-label"
+							label="Fit to screen"
 							active="bg-primary-500"
 							size="sm"
 							checked={fitToScreen}
@@ -393,6 +398,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 					{#if resizable !== 'none'}
 						<button
 							type="button"
+							title="Reset column and row sizing"
 							class="btn btn-sm variant-filled-primary rounded-full order-last"
 							on:click|preventDefault={() =>
 								resetResize($headerRows, $pageRows, tableId, columns, resizable)}
@@ -402,6 +408,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 					{#if exportable}
 						<button
 							type="button"
+							title="Export table data as CSV"
 							class="btn btn-sm variant-filled-primary rounded-full order-last"
 							on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
 							>Export as CSV</button
@@ -418,6 +425,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 					{...$tableAttrs}
 					class="table table-auto table-compact bg-tertiary-500/30 dark:bg-tertiary-900/10 overflow-clip"
 					id="{tableId}-table"
+					title="Table"
 				>
 					<!-- If table height is provided, making the top row sticky -->
 					<thead class={height != null && $pageRows.length > 0 ? `sticky top-0` : ''}>
@@ -443,6 +451,8 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 														<div class="flex gap-1 whitespace-pre-wrap">
 															<!-- Adding sorting config and styling -->
 															<span
+																role="button"
+																tabindex="0"
 																class:underline={props.sort.order}
 																class:normal-case={cell.id !== cell.label}
 																class:cursor-pointer={!props.sort.disabled}

package/dist/components/Table/TableFilter.svelte

@@ -201,6 +201,7 @@ onMount(() => {
 		type="button"
 		use:popup={popupFeatured}
 		id="{popupId}-button"
+		aria-label="Open filter menu for column {id}"
 	>
 		<Fa icon={faFilter} size="12" />
 	</button>
@@ -210,6 +211,7 @@ onMount(() => {
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"
+				aria-label="Clear Filters"
 				on:click|preventDefault={() => {
 					// Set the defaults when cleared
 					clearFilters();
@@ -234,6 +236,7 @@ onMount(() => {
 								{#each options[type] as option (option)}
 									<option
 										value={option.value}
+										aria-label={option.label}
 										selected={dropdown.option === option.value}
 										disabled={Object.keys($filters[id]).includes(option.value) &&
 											dropdown.option !== option.value}>{option.label}</option
@@ -242,7 +245,10 @@ onMount(() => {
 							</select>
 							{#if dropdowns.length > 1}
 								<div
+									role="button"
+									tabindex="0"
 									class="btn variant-filled-warning btn-sm h-full"
+									aria-label="Remove filter"
 									on:click|preventDefault={() => removeFilter(dropdown.option)}
 									on:keydown|preventDefault={() => removeFilter(dropdown.option)}
 								>
@@ -257,6 +263,7 @@ onMount(() => {
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.value}
+								aria-label="Filter value"
 							/>
 						{:else}
 							<input
@@ -264,6 +271,7 @@ onMount(() => {
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.formValue}
+								aria-label="Filter value"
 							/>
 						{/if}
 					</div>
@@ -276,12 +284,15 @@ onMount(() => {
 			{#if remainingFilters.length}
 				<div
 					class="btn variant-filled-secondary btn-sm cursor-pointer"
+					role="button"
+					tabindex="0"
 					on:click|stopPropagation={() => {
 						addFilter(remainingFilters[0].value, undefined);
 					}}
 					on:keydown|stopPropagation={() => {
 						addFilter(remainingFilters[0].value, undefined);
 					}}
+					aria-label="Add filter"
 				>
 					<div class="flex gap-1 items-center"><Fa icon={faPlus} />Add Filter</div>
 				</div>
@@ -289,6 +300,7 @@ onMount(() => {
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"
+				aria-label="Apply filters"
 				on:click|preventDefault={() => {
 					$pageIndex = 0;
 					$filterValue = $filters[id];

package/dist/components/Table/TableFilterServer.svelte

@@ -190,6 +190,7 @@ $: console.log($filters);
 		type="button"
 		use:popup={popupFeatured}
 		id="{popupId}-button"
+		aria-label="Open filter menu for column {id}"
 	>
 		<Fa icon={faFilter} size="12" />
 	</button>
@@ -199,6 +200,7 @@ $: console.log($filters);
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"
+				aria-label="Clear Filters"
 				on:click|preventDefault={() => {
 					// Set the defaults when cleared
 					clearFilters();
@@ -221,6 +223,7 @@ $: console.log($filters);
 								{#each options[type] as option (option)}
 									<option
 										value={option.value}
+										aria-label={option.label}
 										selected={dropdown.option === option.value}
 										disabled={Object.keys($filters[id]).includes(option.value) &&
 											dropdown.option !== option.value}>{option.label}</option
@@ -229,10 +232,13 @@ $: console.log($filters);
 							</select>
 							{#if dropdowns.length > 1}
 								<div
+									role="button"
+									tabindex="0"
 									class="btn variant-filled-warning btn-sm h-full"
 									on:click|preventDefault={() => removeFilter(dropdown.option)}
 									on:keydown|preventDefault={() => removeFilter(dropdown.option)}
-								>
+									aria-label="Remove filter"
+									>
 									<Fa icon={faXmark} />
 								</div>
 							{/if}
@@ -251,6 +257,7 @@ $: console.log($filters);
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.value}
+								aria-label="Filter value"
 							/>
 						{:else}
 							<input
@@ -258,6 +265,7 @@ $: console.log($filters);
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.value}
+								aria-label="Filter value"
 							/>
 						{/if}
 					</div>
@@ -270,6 +278,9 @@ $: console.log($filters);
 			{#if remainingFilters.length}
 				<div
 					class="btn variant-filled-secondary btn-sm cursor-pointer"
+					aria-label="Add filter"
+					role="button"
+					tabindex="0"
 					on:click|stopPropagation={() => {
 						addFilter(remainingFilters[0].value, undefined);
 					}}
@@ -283,6 +294,7 @@ $: console.log($filters);
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"
+				aria-label="Apply filters"
 				on:click|preventDefault={applyFilters}>Apply</button
 			>
 		</div>

package/dist/components/Table/TablePagination.svelte

@@ -52,7 +52,11 @@ $: $pageSize = pageSizeDropdownValue;
 			{/each}
 		</select> -->
 
-		<button class="btn variant-filled-primary w-20 justify-between" use:popup={pageSizePopup}>
+		<button
+			aria-label="Open menu to select number of items per page"
+			class="btn variant-filled-primary w-20 justify-between"
+			use:popup={pageSizePopup}
+		>
 			<span class="capitalize font-semibold">{pageSizeDropdownValue}</span>
 			<Fa icon={faChevronDown} size="xs" />
 		</button>
@@ -72,6 +76,7 @@ $: $pageSize = pageSizeDropdownValue;
 		<button
 			class="btn btn-sm variant-filled-primary"
 			on:click|preventDefault={goToFirstPage}
+			aria-label="Go to first page"
 			disabled={goToFirstPageDisabled}
 			id="{id}-first"
 		>
@@ -80,6 +85,7 @@ $: $pageSize = pageSizeDropdownValue;
 		<button
 			class="btn btn-sm variant-filled-primary"
 			id="{id}-previous"
+			aria-label="Go to previous page"
 			on:click|preventDefault={goToPreviousPage}
 			disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
 		>
@@ -88,17 +94,20 @@ $: $pageSize = pageSizeDropdownValue;
 			class="input border border-primary-500 rounded flex w-24"
 			value={$pageIndex + 1}
 			max={$pageCount}
+			aria-label="Current page"
 			min={1}
 			on:change={handleChange}
 		/>
 		<button
 			class="btn btn-sm variant-filled-primary"
 			id="{id}-next"
+			aria-label="Go to next page"
 			on:click|preventDefault={goToNextPage}
 			disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
 		>
 		<button
 			class="btn btn-sm variant-filled-primary"
+			aria-label="Go to last page"
 			id="{id}-last"
 			on:click|preventDefault={goToLastPage}
 			disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button

package/dist/components/Table/TablePaginationServer.svelte

@@ -59,6 +59,7 @@ updateTable();
 		<select
 			name="pageSize"
 			id="{id}-pageSize"
+			aria-label="Open menu to select number of items per page"
 			class="select variant-filled-primary w-min font-bold"
 			bind:value={$pageSize}
 		>
@@ -70,21 +71,26 @@ updateTable();
 	<div class="flex justify-center gap-1">
 		<button
 			class="btn btn-sm variant-filled-primary"
+			title="Go to first page"
 			on:click|preventDefault={() => goTo('first')}
 			disabled={goToFirstPageDisabled}
+			aria-label="Go to first page"
 			id="{id}-first"
 		>
 			<Fa icon={faAnglesLeft} /></button
 		>
 		<button
 			class="btn btn-sm variant-filled-primary"
+			title="Go to previous page"
 			id="{id}-previous"
+			aria-label="Go to previous page"
 			on:click|preventDefault={() => goTo('previous')}
 			disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
 		>
 		<input
 			type="number"
 			class="input border border-primary-500 rounded flex w-24"
+			aria-label="Current page"
 			value={$pageIndex + 1}
 			max={pageCount}
 			min={1}
@@ -94,11 +100,13 @@ updateTable();
 			class="btn btn-sm variant-filled-primary"
 			id="{id}-next"
 			on:click|preventDefault={() => goTo('next')}
+			aria-label="Go to next page"
 			disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
 		>
 		<button
 			class="btn btn-sm variant-filled-primary"
 			id="{id}-last"
+			aria-label="Go to last page"
 			on:click|preventDefault={() => goTo('last')}
 			disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
 		>

package/dist/components/form/Checkbox.svelte

@@ -11,7 +11,7 @@ export let feedback;
 <InputContainer {label} {feedback} {required}>
 	<input
 		{id}
-		class="input variant-form-material"
+		class="input variant-form-material bg-zinc-50 dark:bg-zinc-50"
 		type="checkbox"
 		class:input-success={valid}
 		class:input-error={invalid}

package/dist/components/form/CheckboxKvPList.svelte

@@ -12,13 +12,14 @@ let feedback;
 
 <InputContainer {id} label={title} {feedback} {required} {help}>
 	{#each source as item}
-		<label class="flex items-center space-x-2" for={key}>
+		<label class="flex items-center space-x-2" for={item.key}>
 			<input
 				class="checkbox"
 				type="checkbox"
 				bind:group={target}
 				checked={item.key}
 				value={item.key}
+				id={item.key}
 			/>
 			<p>{item.value}</p>
 		</label>

package/dist/components/form/CheckboxList.svelte

@@ -10,8 +10,8 @@ let feedback;
 
 <InputContainer label={title} {feedback} {required}>
 	{#each source as item}
-		<label class="flex items-center space-x-2" for={key}>
-			<input class="checkbox" type="checkbox" bind:group={target} value={item} />
+		<label class="flex items-center space-x-2" for={item}>
+			<input class="checkbox" type="checkbox" bind:group={target} value={item} id={item}/>
 			<p>{item}</p>
 		</label>
 	{/each}

package/dist/components/form/DateInput.svelte

@@ -13,7 +13,7 @@ export let disabled = false;
 <InputContainer {id} {label} {feedback} {required} {help}>
 	<input
 		{id}
-		class="input variant-form-material"
+		class="input variant-form-material bg-zinc-50 dark:bg-zinc-700 placeholder:text-gray-400"
 		type="date"
 		class:input-success={valid}
 		class:input-error={invalid}