diff --git a/src/components/checkbox/Checkbox.js b/src/components/checkbox/Checkbox.js
index 8deee4b5..58245796 100644
--- a/src/components/checkbox/Checkbox.js
+++ b/src/components/checkbox/Checkbox.js
@@ -1,89 +1,14 @@
-import { html, css, LitElement } from "lit"
+import { html, LitElement } from "lit"
 import { Icon } from "../icon/icon.js"
 import { defineElement } from "../../lib/defineElement.js"
 
+import styles from "./checkbox.css"
+
 /**
  * @tagname leu-checkbox
  */
 export class LeuCheckbox extends LitElement {
-  static styles = css`
-    :host {
-      --checkbox-color: var(--leu-color-black-40);
-      --checkbox-color-disabled: var(--leu-color-black-20);
-      --checkbox-color-focus: var(--leu-color-func-cyan);
-
-      --checkbox-label-color: var(--leu-color-black-100);
-      --checkbox-label-color-disabled: var(--checkbox-color-disabled);
-
-      --checkbox-tick-color: var(--leu-color-black-0);
-
-      --checkbox-font-regular: var(--leu-font-regular);
-
-      position: relative;
-
-      display: inline-flex;
-      align-items: flex-start;
-      gap: 0.5rem;
-
-      font-family: var(--checkbox-font-regular);
-    }
-
-    .checkbox {
-      --_length: 1.5rem;
-      appearance: none;
-      cursor: pointer;
-
-      width: var(--_length);
-      height: var(--_length);
-      margin: 0;
-
-      border: 2px solid var(--checkbox-color);
-      border-radius: 2px;
-
-      flex: 1 0 var(--_length);
-
-      display: grid;
-      place-items: center;
-    }
-
-    .checkbox:checked {
-      background-color: var(--checkbox-color);
-    }
-
-    .checkbox:is(:hover, :checked, :focus) {
-      --checkbox-color: var(--checkbox-color-focus);
-    }
-
-    .checkbox:focus-visible {
-      outline: 2px solid var(--checkbox-color-focus);
-      outline-offset: 2px;
-    }
-
-    .checkbox:disabled {
-      --checkbox-color: var(--checkbox-color-disabled);
-      cursor: not-allowed;
-    }
-
-    .label {
-      cursor: pointer;
-      color: var(--checkbox-label-color);
-      font-size: 1rem;
-      line-height: 1.5;
-    }
-
-    .checkbox:disabled + .label {
-      --checkbox-label-color: var(--checkbox-label-color-disabled);
-      cursor: not-allowed;
-    }
-
-    .icon {
-      position: absolute;
-      top: 0;
-      left: 0;
-      color: var(--checkbox-tick-color);
-      pointer-events: none;
-    }
-  `
+  static styles = styles
 
   static shadowRootOptions = {
     ...LitElement.shadowRootOptions,
diff --git a/src/components/checkbox/CheckboxGroup.js b/src/components/checkbox/CheckboxGroup.js
index 35cb29e0..85aa92d6 100644
--- a/src/components/checkbox/CheckboxGroup.js
+++ b/src/components/checkbox/CheckboxGroup.js
@@ -1,42 +1,14 @@
-import { html, css, LitElement } from "lit"
+import { html, LitElement } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { defineElement } from "../../lib/defineElement.js"
 
+import styles from "./checkbox-group.css"
+
 /**
  * @tagname leu-checkbox-group
  */
 export class LeuCheckboxGroup extends LitElement {
-  static styles = css`
-    :host {
-      --group-font-regular: var(--leu-font-regular);
-      --group-font-black: var(--leu-font-black);
-
-      font-family: var(--group-font-regular);
-    }
-
-    .fieldset {
-      display: flex;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      gap: 0.5rem 1rem;
-
-      border: none;
-      padding: 0;
-    }
-
-    .fieldset--vertical {
-      flex-direction: column;
-      gap: 1rem;
-    }
-
-    .legend {
-      font-family: var(--group-font-black);
-      font-size: 1.125rem;
-      line-height: 1.5;
-
-      margin-bottom: 0.5rem;
-    }
-  `
+  static styles = styles
 
   static properties = {
     orientation: { type: String, reflect: true },
diff --git a/src/components/checkbox/checkbox-group.css b/src/components/checkbox/checkbox-group.css
new file mode 100644
index 00000000..0f081b1c
--- /dev/null
+++ b/src/components/checkbox/checkbox-group.css
@@ -0,0 +1,29 @@
+:host {
+  --group-font-regular: var(--leu-font-regular);
+  --group-font-black: var(--leu-font-black);
+
+  font-family: var(--group-font-regular);
+}
+
+.fieldset {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+
+  border: none;
+  padding: 0;
+}
+
+.fieldset--vertical {
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.legend {
+  font-family: var(--group-font-black);
+  font-size: 1.125rem;
+  line-height: 1.5;
+
+  margin-bottom: 0.5rem;
+}
diff --git a/src/components/checkbox/checkbox.css b/src/components/checkbox/checkbox.css
new file mode 100644
index 00000000..a30f39d2
--- /dev/null
+++ b/src/components/checkbox/checkbox.css
@@ -0,0 +1,76 @@
+:host {
+  --checkbox-color: var(--leu-color-black-40);
+  --checkbox-color-disabled: var(--leu-color-black-20);
+  --checkbox-color-focus: var(--leu-color-func-cyan);
+
+  --checkbox-label-color: var(--leu-color-black-100);
+  --checkbox-label-color-disabled: var(--checkbox-color-disabled);
+
+  --checkbox-tick-color: var(--leu-color-black-0);
+
+  --checkbox-font-regular: var(--leu-font-regular);
+
+  position: relative;
+
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+
+  font-family: var(--checkbox-font-regular);
+}
+
+.checkbox {
+  --_length: 1.5rem;
+  appearance: none;
+  cursor: pointer;
+
+  width: var(--_length);
+  height: var(--_length);
+  margin: 0;
+
+  border: 2px solid var(--checkbox-color);
+  border-radius: 2px;
+
+  flex: 1 0 var(--_length);
+
+  display: grid;
+  place-items: center;
+}
+
+.checkbox:checked {
+  background-color: var(--checkbox-color);
+}
+
+.checkbox:is(:hover, :checked, :focus) {
+  --checkbox-color: var(--checkbox-color-focus);
+}
+
+.checkbox:focus-visible {
+  outline: 2px solid var(--checkbox-color-focus);
+  outline-offset: 2px;
+}
+
+.checkbox:disabled {
+  --checkbox-color: var(--checkbox-color-disabled);
+  cursor: not-allowed;
+}
+
+.label {
+  cursor: pointer;
+  color: var(--checkbox-label-color);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.checkbox:disabled + .label {
+  --checkbox-label-color: var(--checkbox-label-color-disabled);
+  cursor: not-allowed;
+}
+
+.icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: var(--checkbox-tick-color);
+  pointer-events: none;
+}
diff --git a/src/components/radio/RadioGroup.js b/src/components/radio/RadioGroup.js
index ef337f7e..5899e78d 100644
--- a/src/components/radio/RadioGroup.js
+++ b/src/components/radio/RadioGroup.js
@@ -1,42 +1,14 @@
-import { html, css, LitElement } from "lit"
+import { html, LitElement } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { defineElement } from "../../lib/defineElement.js"
 
+import styles from "./radio-group.css"
+
 /**
  * @tagname leu-radio-group
  */
 export class LeuRadioGroup extends LitElement {
-  static styles = css`
-    :host {
-      --group-font-regular: var(--leu-font-regular);
-      --group-font-black: var(--leu-font-black);
-
-      font-family: var(--group-font-regular);
-    }
-
-    .fieldset {
-      display: flex;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      gap: 0.5rem 1rem;
-
-      border: none;
-      padding: 0;
-    }
-
-    .fieldset--vertical {
-      flex-direction: column;
-      gap: 1rem;
-    }
-
-    .legend {
-      font-family: var(--group-font-black);
-      font-size: 1.125rem;
-      line-height: 1.5;
-
-      margin-bottom: 0.5rem;
-    }
-  `
+  static styles = styles
 
   static properties = {
     orientation: { type: String, reflect: true },
diff --git a/src/components/radio/radio-group.css b/src/components/radio/radio-group.css
new file mode 100644
index 00000000..0f081b1c
--- /dev/null
+++ b/src/components/radio/radio-group.css
@@ -0,0 +1,29 @@
+:host {
+  --group-font-regular: var(--leu-font-regular);
+  --group-font-black: var(--leu-font-black);
+
+  font-family: var(--group-font-regular);
+}
+
+.fieldset {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+
+  border: none;
+  padding: 0;
+}
+
+.fieldset--vertical {
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.legend {
+  font-family: var(--group-font-black);
+  font-size: 1.125rem;
+  line-height: 1.5;
+
+  margin-bottom: 0.5rem;
+}
diff --git a/src/components/table/Table.js b/src/components/table/Table.js
index 4fd781ca..74704de1 100644
--- a/src/components/table/Table.js
+++ b/src/components/table/Table.js
@@ -1,4 +1,4 @@
-import { html, css, LitElement, nothing } from "lit"
+import { html, LitElement, nothing } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { styleMap } from "lit/directives/style-map.js"
 import { createRef, ref } from "lit/directives/ref.js"
@@ -6,97 +6,13 @@ import { Icon } from "../icon/icon.js"
 import { defineElement } from "../../lib/defineElement.js"
 import { definePaginationElements } from "../pagination/Pagination.js"
 
+import styles from "./table.css"
+
 /**
  * @tagname leu-table
  */
 export class LeuTable extends LitElement {
-  static styles = css`
-    :host {
-      position: relative;
-      display: block;
-    }
-    div.scroll {
-      display: inline-block;
-      width: 100%;
-      overflow: auto;
-    }
-    div.shadow {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      z-index: 1;
-    }
-    div.pagination {
-      height: calc(100% - 66px);
-    }
-    table {
-      width: 100%;
-      border-spacing: 0;
-      color: rgb(0 0 0 / 60%);
-      font-size: 16px;
-      font-family: var(--leu-font-regular);
-      line-height: 1.5;
-    }
-    td {
-      padding: 12px;
-    }
-    th {
-      padding: 16px 16px 8px;
-      text-align: left;
-      font-size: 12px;
-      font-weight: normal;
-      font-family: var(--leu-font-black);
-      background: var(--table-even-row-bg);
-    }
-    td:first-child,
-    th:first-child {
-      left: 0;
-      background: inherit;
-      z-index: 1;
-    }
-    tr {
-      background: #fff;
-    }
-    tbody tr:nth-child(odd) {
-      background: var(--leu-color-black-5);
-    }
-    button {
-      background: none;
-      cursor: pointer;
-      line-height: 1.5;
-      padding: 0;
-      border: 0;
-      width: 100%;
-      display: flex;
-      align-items: flex-center;
-      font-size: inherit;
-      font-family: inherit;
-    }
-    thead svg {
-      display: inline-block;
-      color: var(--leu-color-accent-blue);
-      padding: 0;
-    }
-
-    table.sticky td:first-child,
-    table.sticky th:first-child {
-      position: sticky;
-    }
-    div.shadow-left table.sticky td:first-child,
-    div.shadow-left table.sticky th:first-child {
-      box-shadow: 0 0 5px rgb(0 0 0 / 50%);
-      clip-path: inset(0 -15px 0 0);
-    }
-    div.shadow-left {
-      box-shadow: inset 5px 0 5px -5px rgb(0 0 0 / 50%);
-    }
-    div.shadow-right {
-      box-shadow: inset -5px 0 5px -5px rgb(0 0 0 / 50%);
-    }
-  `
+  static styles = styles
 
   static properties = {
     columns: { type: Array },
diff --git a/src/components/table/table.css b/src/components/table/table.css
new file mode 100644
index 00000000..ea0cd29e
--- /dev/null
+++ b/src/components/table/table.css
@@ -0,0 +1,99 @@
+:host {
+  position: relative;
+  display: block;
+}
+
+div.scroll {
+  display: inline-block;
+  width: 100%;
+  overflow: auto;
+}
+
+div.shadow {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+div.pagination {
+  height: calc(100% - 66px);
+}
+
+table {
+  width: 100%;
+  border-spacing: 0;
+  color: rgb(0 0 0 / 60%);
+  font-size: 16px;
+  font-family: var(--leu-font-regular);
+  line-height: 1.5;
+}
+
+td {
+  padding: 12px;
+}
+
+th {
+  padding: 16px 16px 8px;
+  text-align: left;
+  font-size: 12px;
+  font-weight: normal;
+  font-family: var(--leu-font-black);
+  background: var(--table-even-row-bg);
+}
+
+td:first-child,
+th:first-child {
+  left: 0;
+  background: inherit;
+  z-index: 1;
+}
+
+tr {
+  background: #fff;
+}
+
+tbody tr:nth-child(odd) {
+  background: var(--leu-color-black-5);
+}
+
+button {
+  background: none;
+  cursor: pointer;
+  line-height: 1.5;
+  padding: 0;
+  border: 0;
+  width: 100%;
+  display: flex;
+  align-items: flex-center;
+  font-size: inherit;
+  font-family: inherit;
+}
+
+thead svg {
+  display: inline-block;
+  color: var(--leu-color-accent-blue);
+  padding: 0;
+}
+
+table.sticky td:first-child,
+table.sticky th:first-child {
+  position: sticky;
+}
+
+div.shadow-left table.sticky td:first-child,
+div.shadow-left table.sticky th:first-child {
+  box-shadow: 0 0 5px rgb(0 0 0 / 50%);
+  clip-path: inset(0 -15px 0 0);
+}
+
+div.shadow-left {
+  box-shadow: inset 5px 0 5px -5px rgb(0 0 0 / 50%);
+}
+
+div.shadow-right {
+  box-shadow: inset -5px 0 5px -5px rgb(0 0 0 / 50%);
+}