@kaizen/components 1.74.0 → 1.74.2

package/locales/lv.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Datums līdz"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "Notīrīt<VisuallyHidden> atlases</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> pieejams</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "Filtrēt opcijas pēc meklēšanas vaicājuma"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Meklēt…"
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Atlasīt visus"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "Notīrīt meklēšanu"

package/locales/mi.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Date to"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "Clear<VisuallyHidden> selections</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> available</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "Whiriwhiria nga whiringa ma te uiui rapu"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Rapua"
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Tīpakohia te katoa"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "Maama te rapu"

package/locales/ms.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Tarikh hingga"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "Kosongkan<VisuallyHidden> pemilihan</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> tersedia</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "Tapis pilihan mengikut pertanyaan carian"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Cari…"
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Pilih semua"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "Kosongkan carian"

package/locales/nb.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Dato til"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "Fjern<VisuallyHidden> valg</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> tilgjengelig</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "Filteralternativer etter søkespørring"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Søk …"
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Velg alle"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "Fjern søk"

package/locales/nl.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Datum tot"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "<VisuallyHidden>Selecties</VisuallyHidden> wissen"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> beschikbaar</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "Opties filteren op zoekopdracht"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Zoeken…"
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Alle selecteren"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "Zoekopdracht wissen"

package/locales/pl.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Data zakończenia"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "Wyczyść<VisuallyHidden> zaznaczone elementy</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> dostępne</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "Opcje filtrowania według wyszukiwanego hasła"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Wyszukaj..."
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Zaznacz wszystko"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "Wyczyść wyszukiwanie"

package/locales/pt-BR.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Data final"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "Limpar<VisuallyHidden> seleções</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> disponível</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "Opções de filtro por consulta"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Pesquisa…"
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Selecionar tudo"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "Limpar pesquisa"

package/locales/pt.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Data final"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "Limpar<VisuallyHidden> seleções</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> disponível</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "Opções de filtro por consulta"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Procurar…"
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Selecionar tudo"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "Limpar pesquisa"

package/locales/ro.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Data până la"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "Șterge<VisuallyHidden> selecțiile</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> disponibile</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "Opțiuni de filtrare după interogarea de căutare"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Căutare…"
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Selectează toate"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "Ștergere căutare"

package/locales/ru.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Дата по"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "Очистить<VisuallyHidden> выбор</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> доступно</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "Параметры фильтрации по поисковому запросу"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Поиск..."
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Выбрать все"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "Очистить поиск"

package/locales/si-LK.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "දිනය දක්වා"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "<VisuallyHidden> තේරීම්</VisuallyHidden> ඉවත් කරන්න"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge>ක් <VisuallyHidden> ලද හැකිය</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "සෙවුම් විමසුම මගින් විකල්ප පෙරහන් කරන්න"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "සොයන්න…"
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "සියල්ල තෝරන්න"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "සෙවීම ඉවත් කරන්න"

package/locales/sk.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Dátum do"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "Zrušiť<VisuallyHidden> výbery</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> je k dispozícii</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "Filtrovať možnosti podľa vyhľadávacieho dopytu"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Vyhľadáva sa..."
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Vybrať všetky"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "Zmazať vyhľadávanie"

package/locales/sr.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Datum „Do“"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "Obriši<VisuallyHidden> izbore</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> dostupno</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "Filtriranje opcija po upitu pretrage"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Pretraga..."
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Izaberi sve"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "Obriši pretragu"

package/locales/sv.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Slutdatum"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "Rensa<VisuallyHidden> val</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> tillgänglig</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "Filtrera alternativ efter sökfråga"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Sök …"
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Välj alla"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "Rensa sökning"

package/locales/th.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "จนถึงวันที่"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "ล้าง<VisuallyHidden>รายการที่เลือก</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> รายการที่พร้อมใช้งาน</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "กรองตัวเลือกตามคิวรีการค้นหา"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "ค้นหา…"
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "เลือกทั้งหมด"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "ล้างการค้นหา"

package/locales/tl.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Petsa hanggang"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "I-clear ang<VisuallyHidden> mga pinili</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> ang available</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "I-filter ang mga opsyon ayon sa query sa paghahanap"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Hanapin..."
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Piliin lahat"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "I-clear ang paghahanap"

package/locales/tr.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Şu tarihe kadar"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "<VisuallyHidden>Seçimleri</VisuallyHidden> temizle"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> kullanılabilir</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "Seçenekleri arama sorgusuna göre filtrele"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Ara..."
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Tümünü seç"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "Aramayı temizle"

package/locales/uk.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Дата по"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "Очистити<VisuallyHidden> виділення</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> доступно</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "Параметри фільтрування за пошуковим запитом"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Пошук…"
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Вибрати все"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "Очистити пошук"

package/locales/vi.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Ngày đến"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "Xóa<VisuallyHidden> lựa chọn</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> có sẵn</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "Tùy chọn lọc theo truy vấn tìm kiếm"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Tìm kiếm…"
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Chọn tất cả"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "Tìm kiếm rõ ràng"

package/locales/zh-TW.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "結束日期："
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "清除<VisuallyHidden>選取項目</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> available</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "依搜尋查詢篩選選項"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "搜尋..."
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "全選"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "清除搜尋"

package/locales/zh.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "结束日期"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "清除<VisuallyHidden>选择</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> 个可用</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "按搜索查询筛选选项"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "搜索…"
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "全选"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "清除搜索"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.74.0",
+  "version": "1.74.2",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Checkbox/Checkbox/Checkbox.module.scss

@@ -57,6 +57,9 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
   .checkbox:focus + & {
     background: white;
     border-color: $dt-color-form-border-color-hover;
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
   }
 
   .checkbox:checked:focus + &,
@@ -70,21 +73,6 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
     background: $dt-color-form-border-color-hover;
     border-color: $dt-color-form-border-color-hover;
   }
-
-  .checkbox:focus + &::after {
-    content: '';
-    box-sizing: border-box;
-    position: absolute;
-    background: transparent;
-    border-radius: $border-focus-ring-border-radius;
-    border-width: $border-focus-ring-border-width;
-    border-style: $border-focus-ring-border-style;
-    border-color: $dt-color-form-border-color-focus;
-    top: calc(-#{$focus-ring-offset} - calc(#{$checkbox-size} / 8));
-    left: calc(-#{$focus-ring-offset} - calc(#{$checkbox-size} / 8));
-    width: calc(#{$checkbox-size} + #{$focus-ring-offset} + #{$border-solid-border-width} * 2);
-    height: calc(#{$checkbox-size} + #{$focus-ring-offset} + #{$border-solid-border-width} * 2);
-  }
 }
 
 .box.reversed {
@@ -96,6 +84,10 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
     background: rgba($color-white-rgb, 0.65);
   }
 
+  .checkbox:focus + & {
+    outline-color: var(--color-blue-300);
+  }
+
   .checkbox:not([checked]):hover + &,
   .checkbox:not([checked]):focus + & {
     border-color: $color-white;
@@ -113,8 +105,4 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
     background: $color-white;
     border-color: $color-white;
   }
-
-  .checkbox:focus + &::after {
-    border-color: $dt-color-form-border-color-reversed-focus;
-  }
 }