From aad973e20d4057c1a5dde7d233e22d6efacb5369 Mon Sep 17 00:00:00 2001
From: Igor Bari <mucsi96@gmail.com>
Date: Sat, 4 May 2024 07:10:26 +0000
Subject: [PATCH] Drop lit css

---
 TODO.md                                    |  1 +
 src/Avatar/Avatar.css                      | 14 ++++
 src/Avatar/Avatar.stories.ts               | 13 ++--
 src/Avatar/Avatar.ts                       | 27 +------
 src/Badge/Badge.css                        | 21 +++++
 src/Badge/Badge.stories.ts                 |  9 +--
 src/Badge/Badge.ts                         | 34 +--------
 src/Button/Button.css                      | 40 ++++++++++
 src/Button/Button.stories.ts               | 13 ++--
 src/Button/Button.ts                       | 55 +------------
 src/DropdownMenu/DropdownMenu.css          | 76 ++++++++++++++++++
 src/DropdownMenu/DropdownMenu.stories.ts   | 35 +++++----
 src/DropdownMenu/DropdownMenu.ts           | 89 +---------------------
 src/Header/Header.css                      | 18 +++++
 src/Header/Header.stories.ts               | 11 ++-
 src/Header/Header.ts                       | 33 +-------
 src/Heading/Heading.css                    | 20 +++++
 src/Heading/Heading.stories.ts             | 13 ++--
 src/Heading/Heading.ts                     | 28 +------
 src/InputLabel/InputLabel.css              | 33 ++++++++
 src/InputLabel/InputLabel.stories.ts       |  7 +-
 src/InputLabel/InputLabel.ts               | 46 +----------
 src/Loader/Loader.css                      | 44 +++++++++++
 src/Loader/Loader.stories.ts               | 14 +++-
 src/Loader/Loader.ts                       | 67 +---------------
 src/Main/Main.css                          | 14 ++++
 src/Main/Main.stories.ts                   |  9 +--
 src/Main/Main.ts                           | 27 +------
 src/Notifications/Notification.css         | 42 ++++++++++
 src/Notifications/Notification.ts          | 48 +-----------
 src/Notifications/Notifications.stories.ts |  4 +-
 src/Notifications/Notifications.ts         |  2 +-
 src/Popover/Popover.css                    | 26 +++++++
 src/Popover/Popover.stories.ts             | 12 +--
 src/Popover/Popover.ts                     | 32 +-------
 src/Table/RowSelector.css                  | 11 +++
 src/Table/RowSelector.ts                   | 16 +---
 src/Table/Table.css                        | 60 +++++++++++++++
 src/Table/Table.stories.ts                 | 11 ++-
 src/Table/Table.ts                         | 73 +-----------------
 40 files changed, 509 insertions(+), 639 deletions(-)
 create mode 100644 src/Avatar/Avatar.css
 create mode 100644 src/Badge/Badge.css
 create mode 100644 src/Button/Button.css
 create mode 100644 src/DropdownMenu/DropdownMenu.css
 create mode 100644 src/Header/Header.css
 create mode 100644 src/Heading/Heading.css
 create mode 100644 src/InputLabel/InputLabel.css
 create mode 100644 src/Loader/Loader.css
 create mode 100644 src/Main/Main.css
 create mode 100644 src/Notifications/Notification.css
 create mode 100644 src/Popover/Popover.css
 create mode 100644 src/Table/RowSelector.css
 create mode 100644 src/Table/Table.css

diff --git a/TODO.md b/TODO.md
index 128e98f..0e15f5f 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,3 +1,4 @@
 - add button group
 - add header menu
 - add text
+- drop dependency to lit and ungap
diff --git a/src/Avatar/Avatar.css b/src/Avatar/Avatar.css
new file mode 100644
index 0000000..a46226d
--- /dev/null
+++ b/src/Avatar/Avatar.css
@@ -0,0 +1,14 @@
+button[bt-avatar] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  background-color: hsl(215, 14%, 34%);
+  border-radius: 9999px;
+  border: none;
+  color: hsl(216, 12%, 84%);
+  cursor: pointer;
+}
diff --git a/src/Avatar/Avatar.stories.ts b/src/Avatar/Avatar.stories.ts
index 14df905..4f998ce 100644
--- a/src/Avatar/Avatar.stories.ts
+++ b/src/Avatar/Avatar.stories.ts
@@ -1,19 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import { BTAvatarProps } from './Avatar';
 
-const meta: Meta<BTAvatarProps> = {
+const meta: Meta = {
   title: 'BTAvatar',
   render: () =>
-    html`<header is="bt-header">
+    html`<header bt>
         <nav>
-          <a href="/"><h1 is="bt-heading">App</h1></a>
+          <a href="/"><h1 bt>App</h1></a>
           <section>
-            <button is="bt-avatar" id="avatar" popovertarget="avatar-popover">
+            <button bt-avatar id="avatar" popovertarget="avatar-popover">
               JD
             </button>
             <div popover id="avatar-popover" is="bt-popover">
-              <ul is="bt-dropdown-menu">
+              <ul bt-dropdown-menu>
                 <li separated>
                   <p>John Doe</p>
                   <p>john.doe@authelia.com</p>
@@ -29,7 +28,7 @@ const meta: Meta<BTAvatarProps> = {
     layout: 'fullscreen',
   },
 };
-type Story = StoryObj<BTAvatarProps>;
+type Story = StoryObj;
 
 export default meta;
 
diff --git a/src/Avatar/Avatar.ts b/src/Avatar/Avatar.ts
index 4f41d66..a9b976e 100644
--- a/src/Avatar/Avatar.ts
+++ b/src/Avatar/Avatar.ts
@@ -1,26 +1 @@
-import { css } from 'lit';
-import { customElement } from '../utils';
-
-export type BTAvatarProps = {};
-
-@customElement({
-  name: 'bt-avatar',
-  extends: 'button',
-  styles: css`
-    :host {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 40px;
-      height: 40px;
-      overflow: hidden;
-      background-color: hsl(215, 14%, 34%);
-      border-radius: 9999px;
-      border: none;
-      color: hsl(216, 12%, 84%);
-      cursor: pointer;
-    }
-  `,
-})
-export class BTAvatar extends HTMLButtonElement {}
+import './Avatar.css';
diff --git a/src/Badge/Badge.css b/src/Badge/Badge.css
new file mode 100644
index 0000000..eddf1be
--- /dev/null
+++ b/src/Badge/Badge.css
@@ -0,0 +1,21 @@
+span[bt-badge] {
+  position: relative;
+  color: rgb(30, 66, 159);
+  display: inline-block;
+  font-weight: 700;
+  white-space: nowrap;
+  margin: 0 0.6em;
+  z-index: 1;
+  transform: scale(0.8) translateY(0.05em);
+  transform-origin: center left;
+
+  &:before {
+    display: inline-block;
+    content: '';
+    inset: 0 -0.4em;
+    border-radius: 0.6em;
+    background-color: var(--bt-strong-text-color);
+    position: absolute;
+    z-index: -1;
+  }
+}
diff --git a/src/Badge/Badge.stories.ts b/src/Badge/Badge.stories.ts
index a6d4830..26ee31d 100644
--- a/src/Badge/Badge.stories.ts
+++ b/src/Badge/Badge.stories.ts
@@ -1,18 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import { BTBadgeProps } from './Badge';
 
-const meta: Meta<BTBadgeProps> = {
+const meta: Meta = {
   title: 'BTBadge',
 };
-type Story = StoryObj<BTBadgeProps>;
+type Story = StoryObj;
 
 export default meta;
 
 export const Normal: Story = {
-  render: () => html`text<span is="bt-badge">Badge text</span>`,
+  render: () => html`text<span bt-badge>Badge text</span>`,
 };
 
 export const Large: Story = {
-  render: () => html`<h1>text<span is="bt-badge">Badge text</span></h1>`,
+  render: () => html`<h1>text<span bt-badge>Badge text</span></h1>`,
 };
diff --git a/src/Badge/Badge.ts b/src/Badge/Badge.ts
index 6bc03d6..aab68f2 100644
--- a/src/Badge/Badge.ts
+++ b/src/Badge/Badge.ts
@@ -1,33 +1 @@
-import { css } from 'lit';
-import { customElement } from '../utils';
-
-export type BTBadgeProps = {};
-
-@customElement({
-  name: 'bt-badge',
-  extends: 'span',
-  styles: css`
-    :host {
-      position: relative;
-      color: rgb(30, 66, 159);
-      display: inline-block;
-      font-weight: 700;
-      white-space: nowrap;
-      margin: 0 0.6em;
-      z-index: 1;
-      transform: scale(0.8) translateY(0.05em);
-      transform-origin: center left;
-
-      &:before {
-        display: inline-block;
-        content: '';
-        inset: 0 -0.4em;
-        border-radius: 0.6em;
-        background-color: var(--bt-strong-text-color);
-        position: absolute;
-        z-index: -1;
-      }
-    }
-  `,
-})
-export class BTBadge extends HTMLSpanElement {}
+import './Badge.css'
diff --git a/src/Button/Button.css b/src/Button/Button.css
new file mode 100644
index 0000000..ec73370
--- /dev/null
+++ b/src/Button/Button.css
@@ -0,0 +1,40 @@
+button[bt] {
+  --button-color: hsl(220, 89%, 53%);
+  --button-hover-color: hsl(221, 79%, 48%);
+  background-color: var(--button-color);
+  border: 1px solid var(--button-color);
+  padding: 10px 20px;
+  border-radius: 8px;
+  color: var(--bt-strong-text-color);
+  font-weight: 500;
+  font-family: inherit;
+  transition: background-color 0.3s;
+
+  &:not([disabled]):hover {
+    background-color: var(--button-hover-color);
+    border: 1px solid var(--button-hover-color);
+    cursor: pointer;
+  }
+
+  &[disabled] {
+    background-color: hsl(215, 28%, 17%);
+    color: var(--bt-text-color);
+    border: 1px solid hsl(215, 14%, 34%);
+    pointer-events: none;
+  }
+
+  &[bt-color='green'] {
+    --button-color: hsl(161, 92%, 25%);
+    --button-hover-color: hsl(163, 93%, 22%);
+  }
+
+  &[bt-color='red'] {
+    --button-color: hsl(0, 75%, 51%);
+    --button-hover-color: hsl(0, 74%, 45%);
+  }
+
+  &[bt-color='yellow'] {
+    --button-color: hsl(42, 93%, 46%);
+    --button-hover-color: hsl(37, 97%, 39%);
+  }
+}
diff --git a/src/Button/Button.stories.ts b/src/Button/Button.stories.ts
index a98d21d..67961c8 100644
--- a/src/Button/Button.stories.ts
+++ b/src/Button/Button.stories.ts
@@ -1,31 +1,30 @@
 import { spread } from '@open-wc/lit-helpers';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import { BTButtonProps } from './Button';
 
-const meta: Meta<BTButtonProps> = {
+const meta: Meta = {
   title: 'BTButton',
   render: (props: any) =>
-    html`<button is="bt-button" ${spread(props)}>Button text</button>`,
+    html`<button bt ${spread(props)}>Button text</button>`,
 };
-type Story = StoryObj<BTButtonProps>;
+type Story = StoryObj;
 
 export default meta;
 
 export const Green: Story = {
   args: {
-    color: 'green',
+    'bt-color': 'green',
   },
 };
 
 export const Red: Story = {
   args: {
-    color: 'red',
+    'bt-color': 'red',
   },
 };
 
 export const Yellow: Story = {
   args: {
-    color: 'yellow',
+    'bt-color': 'yellow',
   },
 };
diff --git a/src/Button/Button.ts b/src/Button/Button.ts
index df80d22..57d6cec 100644
--- a/src/Button/Button.ts
+++ b/src/Button/Button.ts
@@ -1,54 +1 @@
-import { css } from 'lit';
-import { customElement } from '../utils';
-
-export type BTButtonProps = {
-  color: 'green' | 'red' | 'yellow';
-};
-
-@customElement({
-  name: 'bt-button',
-  extends: 'button',
-  styles: css`
-    :host {
-      --button-color: hsl(220, 89%, 53%);
-      --button-hover-color: hsl(221, 79%, 48%);
-      background-color: var(--button-color);
-      border: 1px solid var(--button-color);
-      padding: 10px 20px;
-      border-radius: 8px;
-      color: var(--bt-strong-text-color);
-      font-weight: 500;
-      font-family: inherit;
-      transition: background-color 0.3s;
-
-      &:not([disabled]):hover {
-        background-color: var(--button-hover-color);
-        border: 1px solid var(--button-hover-color);
-        cursor: pointer;
-      }
-
-      &[disabled] {
-        background-color: hsl(215, 28%, 17%);
-        color: var(--bt-text-color);
-        border: 1px solid hsl(215, 14%, 34%);
-        pointer-events: none;
-      }
-
-      &[color='green'] {
-        --button-color: hsl(161, 92%, 25%);
-        --button-hover-color: hsl(163, 93%, 22%);
-      }
-
-      &[color='red'] {
-        --button-color: hsl(0, 75%, 51%);
-        --button-hover-color: hsl(0, 74%, 45%);
-      }
-
-      &[color='yellow'] {
-        --button-color: hsl(42, 93%, 46%);
-        --button-hover-color: hsl(37, 97%, 39%);
-      }
-    }
-  `,
-})
-export class BTButton extends HTMLButtonElement {}
+import './Button.css';
diff --git a/src/DropdownMenu/DropdownMenu.css b/src/DropdownMenu/DropdownMenu.css
new file mode 100644
index 0000000..023684b
--- /dev/null
+++ b/src/DropdownMenu/DropdownMenu.css
@@ -0,0 +1,76 @@
+ul[bt-dropdown-menu] {
+  list-style-type: unset;
+  margin: unset;
+  padding: unset;
+
+  li {
+    display: block;
+    font-size: 0.875rem;
+    color: hsl(220, 13%, 91%);
+    --padding: var(--padding-top, 0.5rem) 1rem var(--padding-bottom, 0.5rem);
+    --separator-gap: calc(0.3rem + 1px);
+
+    &:has(a, button):hover {
+      background-color: hsl(215, 14%, 34%);
+      color: var(--bt-strong-text-color);
+    }
+
+    &:not(:has(a, button)) {
+      padding: var(--padding);
+    }
+
+    &:first-child {
+      --padding-top: 0.75rem;
+    }
+
+    &:last-child {
+      --padding-bottom: 0.75rem;
+    }
+
+    &[separated] {
+      position: relative;
+      margin-bottom: var(--separator-gap);
+
+      &:after {
+        position: absolute;
+        height: 0.3rem;
+        bottom: calc(-0.15rem - 1px);
+        left: 0;
+        right: 0;
+        border-bottom: 1px solid hsla(215, 14%, 34%);
+        content: '';
+        display: block;
+      }
+    }
+
+    [separated] + & {
+      margin-top: var(--separator-gap);
+    }
+  }
+
+  a,
+  button {
+    padding: var(--padding);
+  }
+
+  a {
+    display: block;
+    text-decoration: unset;
+    color: inherit;
+  }
+
+  button {
+    width: 100%;
+    border: unset;
+    background-color: unset;
+    font: inherit;
+    cursor: pointer;
+    text-align: left;
+    color: inherit;
+  }
+
+  p {
+    margin: unset;
+    padding: 0.2rem 0;
+  }
+}
diff --git a/src/DropdownMenu/DropdownMenu.stories.ts b/src/DropdownMenu/DropdownMenu.stories.ts
index 73aa719..c2cf376 100644
--- a/src/DropdownMenu/DropdownMenu.stories.ts
+++ b/src/DropdownMenu/DropdownMenu.stories.ts
@@ -1,24 +1,27 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import { BTDropdownMenuProps } from './DropdownMenu';
 
-const meta: Meta<BTDropdownMenuProps> = {
+const meta: Meta = {
   title: 'BTDropdownMenu',
-  render: () =>
-    html`<div is="bt-popover">
-      <ul is="bt-dropdown-menu">
-        <li separated>
-          <p>John Doe</p>
-          <p>john.doe@authelia.com</p>
-        </li>
-        <li><a href="#">Menu item 1</a></li>
-        <li><a href="#">Menu item 2</a></li>
-        <li separated><a href="#">Menu item 3</a></li>
-        <li><button type="button">Sign out</button></li>
-      </ul>
-    </div>`,
+  render: () => {
+    return html`<button bt type="button" popovertarget="dropdown-menu-popover">
+        Open
+      </button>
+      <div popover is="bt-popover" id="dropdown-menu-popover">
+        <ul bt-dropdown-menu>
+          <li separated>
+            <p>John Doe</p>
+            <p>john.doe@authelia.com</p>
+          </li>
+          <li><a href="#">Menu item 1</a></li>
+          <li><a href="#">Menu item 2</a></li>
+          <li separated><a href="#">Menu item 3</a></li>
+          <li><button type="button">Sign out</button></li>
+        </ul>
+      </div>`;
+  },
 };
-type Story = StoryObj<BTDropdownMenuProps>;
+type Story = StoryObj;
 
 export default meta;
 
diff --git a/src/DropdownMenu/DropdownMenu.ts b/src/DropdownMenu/DropdownMenu.ts
index 619961d..ec8bbb3 100644
--- a/src/DropdownMenu/DropdownMenu.ts
+++ b/src/DropdownMenu/DropdownMenu.ts
@@ -1,88 +1 @@
-import { css } from 'lit';
-import { customElement } from '../utils';
-
-export type BTDropdownMenuProps = {};
-
-@customElement({
-  name: 'bt-dropdown-menu',
-  extends: 'ul',
-  styles: css`
-    :host {
-      list-style-type: unset;
-      margin: unset;
-      padding: unset;
-
-      li {
-        display: block;
-        font-size: 0.875rem;
-        color: hsl(220, 13%, 91%);
-        --padding: var(--padding-top, 0.5rem) 1rem var(--padding-bottom, 0.5rem);
-        --separator-gap: calc(0.3rem + 1px);
-
-        &:has(a, button):hover {
-          background-color: hsl(215, 14%, 34%);
-          color: var(--bt-strong-text-color);
-        }
-
-        &:not(:has(a, button)) {
-          padding: var(--padding);
-        }
-
-        &:first-child {
-          --padding-top: 0.75rem;
-        }
-
-        &:last-child {
-          --padding-bottom: 0.75rem;
-        }
-
-        &[separated] {
-          position: relative;
-          margin-bottom: var(--separator-gap);
-
-          &:after {
-            position: absolute;
-            height: 0.3rem;
-            bottom: calc(-0.15rem - 1px);
-            left: 0;
-            right: 0;
-            border-bottom: 1px solid hsla(215, 14%, 34%);
-            content: '';
-            display: block;
-          }
-        }
-
-        [separated] + & {
-          margin-top: var(--separator-gap);
-        }
-      }
-
-      a,
-      button {
-        padding: var(--padding);
-      }
-
-      a {
-        display: block;
-        text-decoration: unset;
-        color: inherit;
-      }
-
-      button {
-        width: 100%;
-        border: unset;
-        background-color: unset;
-        font: inherit;
-        cursor: pointer;
-        text-align: left;
-        color: inherit;
-      }
-
-      p {
-        margin: unset;
-        padding: 0.2rem 0;
-      }
-    }
-  `,
-})
-export class BTDropdownMenu extends HTMLUListElement {}
+import './DropdownMenu.css';
diff --git a/src/Header/Header.css b/src/Header/Header.css
new file mode 100644
index 0000000..290ed28
--- /dev/null
+++ b/src/Header/Header.css
@@ -0,0 +1,18 @@
+header[bt] {
+  display: block;
+  background-color: hsl(215, 28%, 17%);
+  border-bottom: 1px solid hsl(215, 14%, 34%);
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  font-family: var(--bt-font-family);
+
+  > * {
+    padding: 0.75rem 1rem;
+    max-width: 90rem;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
diff --git a/src/Header/Header.stories.ts b/src/Header/Header.stories.ts
index 49a5936..ae436c0 100644
--- a/src/Header/Header.stories.ts
+++ b/src/Header/Header.stories.ts
@@ -1,14 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import { BTHeaderProps } from './Header';
 
-const meta: Meta<BTHeaderProps> = {
+const meta: Meta = {
   title: 'BTHeader',
   render: () =>
-    html`<header is="bt-header">
+    html`<header bt>
         <nav>
-          <a href="/"><h1 is="bt-heading">App</h1></a>
-          <button is="bt-button">Sign in</button>
+          <a href="/"><h1 bt>App</h1></a>
+          <button bt>Sign in</button>
         </nav>
       </header>
       <div style="min-height: 50px"></div>`,
@@ -16,7 +15,7 @@ const meta: Meta<BTHeaderProps> = {
     layout: 'fullscreen',
   },
 };
-type Story = StoryObj<BTHeaderProps>;
+type Story = StoryObj;
 
 export default meta;
 
diff --git a/src/Header/Header.ts b/src/Header/Header.ts
index c1edebc..025f924 100644
--- a/src/Header/Header.ts
+++ b/src/Header/Header.ts
@@ -1,32 +1 @@
-import { css } from 'lit';
-import { customElement } from '../utils';
-
-export type BTHeaderProps = {
-  title?: string;
-};
-
-@customElement({
-  name: 'bt-header',
-  extends: 'header',
-  styles: css`
-    :host {
-      display: block;
-      background-color: hsl(215, 28%, 17%);
-      border-bottom: 1px solid hsl(215, 14%, 34%);
-      position: sticky;
-      top: 0;
-      z-index: 40;
-      font-family: var(--bt-font-family);
-
-      > * {
-        padding: 0.75rem 1rem;
-        max-width: 90rem;
-        margin: 0 auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-    }
-  `,
-})
-export class BTHeader extends HTMLElement {}
+import './Header.css'
diff --git a/src/Heading/Heading.css b/src/Heading/Heading.css
new file mode 100644
index 0000000..16b4a9d
--- /dev/null
+++ b/src/Heading/Heading.css
@@ -0,0 +1,20 @@
+h1[bt],
+h2[bt],
+h3[bt],
+h4[bt],
+h5[bt],
+h6[bt] {
+  display: block;
+  color: var(--heading-color, var(--bt-strong-text-color));
+  transition: color 0.3s;
+  margin: unset;
+
+  a:has(&) {
+    color: var(--bt-strong-text-color);
+    text-decoration: none;
+  }
+
+  a:has(&):hover {
+    --heading-color: var(--bt-link-hover-color);
+  }
+}
diff --git a/src/Heading/Heading.stories.ts b/src/Heading/Heading.stories.ts
index be3c980..5cf956e 100644
--- a/src/Heading/Heading.stories.ts
+++ b/src/Heading/Heading.stories.ts
@@ -1,26 +1,25 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import { BTHeadingProps } from './Heading';
 
-const meta: Meta<BTHeadingProps> = {
+const meta: Meta = {
   title: 'BTHeading',
 };
-type Story = StoryObj<BTHeadingProps>;
+type Story = StoryObj;
 
 export default meta;
 
 export const Level1: Story = {
-  render: () => html`<h1 is="bt-heading">Heading 1</h1>`,
+  render: () => html`<h1 bt>Heading 1</h1>`,
 };
 
 export const Level2: Story = {
-  render: () => html`<h2 is="bt-heading">Heading 2</h2>`,
+  render: () => html`<h2 bt>Heading 2</h2>`,
 };
 
 export const Level3: Story = {
-  render: () => html`<h3 is="bt-heading">Heading 3</h3>`,
+  render: () => html`<h3 bt>Heading 3</h3>`,
 };
 
 export const Level4: Story = {
-  render: () => html`<h4 is="bt-heading">Heading 4</h4>`,
+  render: () => html`<h4 bt>Heading 4</h4>`,
 };
diff --git a/src/Heading/Heading.ts b/src/Heading/Heading.ts
index 33eaed4..e92031a 100644
--- a/src/Heading/Heading.ts
+++ b/src/Heading/Heading.ts
@@ -1,27 +1 @@
-import { css } from 'lit';
-import { customElement } from '../utils';
-
-export type BTHeadingProps = {};
-
-@customElement({
-  name: 'bt-heading',
-  extends: 'h1',
-  styles: css`
-    [is='bt-heading'] {
-      display: block;
-      color: var(--heading-color, var(--bt-strong-text-color));
-      transition: color 0.3s;
-      margin: unset;
-
-      a:has(&) {
-        color: var(--bt-strong-text-color);
-        text-decoration: none;
-      }
-
-      a:has(&):hover {
-        --heading-color: var(--bt-link-hover-color);
-      }
-    }
-  `,
-})
-export class BTHeading extends HTMLHeadingElement {}
+import './Heading.css';
diff --git a/src/InputLabel/InputLabel.css b/src/InputLabel/InputLabel.css
new file mode 100644
index 0000000..ba3c1f2
--- /dev/null
+++ b/src/InputLabel/InputLabel.css
@@ -0,0 +1,33 @@
+label[bt] {
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+
+  color: var(--bt-strong-text-color);
+  font-weight: 500;
+
+  input {
+    background-color: hsl(217, 19%, 27%);
+    border: 1px solid hsl(215, 14%, 34%);
+    color: var(--bt-strong-text-color);
+    font-weight: 400;
+    font-family: inherit;
+    padding: 10px;
+    border-radius: 8px;
+    outline: none;
+
+    &:focus {
+      border: 1px solid hsl(218, 93%, 61%);
+      box-shadow: hsl(218, 93%, 61%) 0 0 0 1px;
+    }
+
+    &:invalid {
+      border: 1px solid hsl(0, 96%, 77%);
+      box-shadow: hsl(0, 96%, 77%) 0 0 0 1px;
+    }
+
+    &::-webkit-inner-spin-button {
+      opacity: 0 !important;
+    }
+  }
+}
diff --git a/src/InputLabel/InputLabel.stories.ts b/src/InputLabel/InputLabel.stories.ts
index 10d8142..48f7be3 100644
--- a/src/InputLabel/InputLabel.stories.ts
+++ b/src/InputLabel/InputLabel.stories.ts
@@ -1,16 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import { BTInputLabelProps } from './InputLabel';
 
-const meta: Meta<BTInputLabelProps> = {
+const meta: Meta = {
   title: 'BTInputLabel',
   render: (props: any) =>
-    html`<label is="bt-input-label">
+    html`<label bt>
       Label text
       <input type="text" value="test value" />
     </label>`,
 };
-type Story = StoryObj<BTInputLabelProps>;
+type Story = StoryObj;
 
 export default meta;
 
diff --git a/src/InputLabel/InputLabel.ts b/src/InputLabel/InputLabel.ts
index b65c25e..8a6b8b1 100644
--- a/src/InputLabel/InputLabel.ts
+++ b/src/InputLabel/InputLabel.ts
@@ -1,45 +1 @@
-import { css } from 'lit';
-import { customElement } from '../utils';
-
-export type BTInputLabelProps = {};
-
-@customElement({
-  name: 'bt-input-label',
-  extends: 'label',
-  styles: css`
-    :host {
-      display: flex;
-      gap: 8px;
-      flex-direction: column;
-
-      color: var(--bt-strong-text-color);
-      font-weight: 500;
-
-      input {
-        background-color: hsl(217, 19%, 27%);
-        border: 1px solid hsl(215, 14%, 34%);
-        color: var(--bt-strong-text-color);
-        font-weight: 400;
-        font-family: inherit;
-        padding: 10px;
-        border-radius: 8px;
-        outline: none;
-
-        &:focus {
-          border: 1px solid hsl(218, 93%, 61%);
-          box-shadow: hsl(218, 93%, 61%) 0 0 0 1px;
-        }
-
-        &:invalid {
-          border: 1px solid hsl(0, 96%, 77%);
-          box-shadow: hsl(0, 96%, 77%) 0 0 0 1px;
-        }
-
-        &::-webkit-inner-spin-button {
-          opacity: 0 !important;
-        }
-      }
-    }
-  `,
-})
-export class BTInputLabel extends HTMLLabelElement {}
+import './InputLabel.css';
diff --git a/src/Loader/Loader.css b/src/Loader/Loader.css
new file mode 100644
index 0000000..3649585
--- /dev/null
+++ b/src/Loader/Loader.css
@@ -0,0 +1,44 @@
+[role='progressbar'][bt] {
+  display: grid;
+  justify-content: center;
+  height: 300px;
+  align-items: center;
+  grid-template-columns: repeat(5, auto);
+  gap: 3px;
+
+  div {
+    background-color: var(--bt-strong-text-color);
+    opacity: 0.85;
+    height: 60px;
+    width: 7px;
+    display: inline-block;
+    animation: bt-stretch-delay 1.2s infinite ease-in-out;
+
+    &:nth-child(2) {
+      animation-delay: -1.1s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: -1s;
+    }
+
+    &:nth-child(4) {
+      animation-delay: -0.9s;
+    }
+
+    &:nth-child(5) {
+      animation-delay: -0.8s;
+    }
+  }
+}
+
+@keyframes bt-stretch-delay {
+  0%,
+  40%,
+  100% {
+    transform: scaleY(0.4);
+  }
+  20% {
+    transform: scaleY(1);
+  }
+}
diff --git a/src/Loader/Loader.stories.ts b/src/Loader/Loader.stories.ts
index ed95a20..0ae5ef8 100644
--- a/src/Loader/Loader.stories.ts
+++ b/src/Loader/Loader.stories.ts
@@ -1,12 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import { BTLoaderProps } from './Loader';
 
-const meta: Meta<BTLoaderProps> = {
+const meta: Meta = {
   title: 'BTLoader',
-  render: () => html`<div is="bt-loader"></div>`,
+  render: () =>
+    html`<div role="progressbar" bt>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>`,
 };
-type Story = StoryObj<BTLoaderProps>;
+type Story = StoryObj;
 
 export default meta;
 
diff --git a/src/Loader/Loader.ts b/src/Loader/Loader.ts
index 599cea7..dd5b278 100644
--- a/src/Loader/Loader.ts
+++ b/src/Loader/Loader.ts
@@ -1,66 +1 @@
-import { css, html } from 'lit';
-import { customElement, htmlToString } from '../utils';
-
-export type BTLoaderProps = {};
-
-@customElement({
-  name: 'bt-loader',
-  extends: 'div',
-  styles: css`
-    :host {
-      display: grid;
-      justify-content: center;
-      height: 300px;
-      align-items: center;
-      grid-template-columns: repeat(5, auto);
-      gap: 3px;
-
-      div {
-        background-color: var(--bt-strong-text-color);
-        opacity: 0.85;
-        height: 60px;
-        width: 7px;
-        display: inline-block;
-        animation: sk-stretchdelay 1.2s infinite ease-in-out;
-
-        &:nth-child(2) {
-          animation-delay: -1.1s;
-        }
-
-        &:nth-child(3) {
-          animation-delay: -1s;
-        }
-
-        &:nth-child(4) {
-          animation-delay: -0.9s;
-        }
-
-        &:nth-child(5) {
-          animation-delay: -0.8s;
-        }
-      }
-    }
-
-    @keyframes sk-stretchdelay {
-      0%,
-      40%,
-      100% {
-        transform: scaleY(0.4);
-      }
-      20% {
-        transform: scaleY(1);
-      }
-    }
-  `,
-})
-export class BTLoader extends HTMLDivElement {
-  connectedCallback() {
-    this.innerHTML = htmlToString(html`
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
-    `);
-  }
-}
+import './Loader.css';
diff --git a/src/Main/Main.css b/src/Main/Main.css
new file mode 100644
index 0000000..4427ead
--- /dev/null
+++ b/src/Main/Main.css
@@ -0,0 +1,14 @@
+:root {
+  --bt-background-color: hsl(221, 39%, 11%);
+  --bt-text-color: hsl(218, 11%, 65%);
+  --bt-strong-text-color: white;
+  --bt-font-family: system-ui;
+  --bt-link-hover-color: hsl(218, 93%, 61%);
+}
+
+main[bt] {
+  display: block;
+  padding: 1px 1rem;
+  max-width: 90rem;
+  margin: 0 auto;
+}
diff --git a/src/Main/Main.stories.ts b/src/Main/Main.stories.ts
index 42b67a6..be052ca 100644
--- a/src/Main/Main.stories.ts
+++ b/src/Main/Main.stories.ts
@@ -1,15 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import { BTMainProps } from './Main';
 
-const meta: Meta<BTMainProps> = {
+const meta: Meta = {
   title: 'BTMain',
-  render: () => html`<main is="bt-main"><h1 is="bt-heading">Heading in main</h1></main>`,
+  render: () => html`<main bt><h1 bt>Heading in main</h1></main>`,
   parameters: {
     layout: 'fullscreen',
-  }
+  },
 };
-type Story = StoryObj<BTMainProps>;
+type Story = StoryObj;
 
 export default meta;
 
diff --git a/src/Main/Main.ts b/src/Main/Main.ts
index 041f543..df8b448 100644
--- a/src/Main/Main.ts
+++ b/src/Main/Main.ts
@@ -1,26 +1 @@
-import { css } from 'lit';
-import { customElement } from '../utils';
-
-export type BTMainProps = {};
-
-@customElement({
-  name: 'bt-main',
-  extends: 'main',
-  styles: css`
-    :root {
-      --bt-background-color: hsl(221, 39%, 11%);
-      --bt-text-color: hsl(218, 11%, 65%);
-      --bt-strong-text-color: white;
-      --bt-font-family: system-ui;
-      --bt-link-hover-color: hsl(218, 93%, 61%);
-    }
-
-    :host {
-      display: block;
-      padding: 1px 1rem;
-      max-width: 90rem;
-      margin: 0 auto;
-    }
-  `,
-})
-export class BTMain extends HTMLElement {}
+import './Main.css';
diff --git a/src/Notifications/Notification.css b/src/Notifications/Notification.css
new file mode 100644
index 0000000..f7fa412
--- /dev/null
+++ b/src/Notifications/Notification.css
@@ -0,0 +1,42 @@
+output[is="bt-notification"] {
+  grid-row-start: -1;
+  font-family: var(--bt-font-family);
+  font-weight: 500;
+  display: inline-block;
+  border-radius: 8px;
+  padding: 16px;
+  width: 400px;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
+  animation:
+    bt-fade-in 0.3s ease,
+    bt-slide-in 0.3s ease,
+    bt-fade-out 0.3s ease 3s forwards;
+
+  &[bt-type='error'] {
+    background-color: hsl(0, 96%, 77%);
+    color: hsl(0, 74%, 16%);
+  }
+
+  &[bt-type='success'] {
+    background-color: hsl(145, 78%, 68%);
+    color: hsl(145, 100%, 14%);
+  }
+}
+
+@keyframes bt-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes bt-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes bt-slide-in {
+  from {
+    transform: translateY(-5vh);
+  }
+}
diff --git a/src/Notifications/Notification.ts b/src/Notifications/Notification.ts
index 48ea008..b60c3f8 100644
--- a/src/Notifications/Notification.ts
+++ b/src/Notifications/Notification.ts
@@ -1,9 +1,5 @@
-import { css } from 'lit';
 import { customElement } from '../utils';
-
-export type BTNotificationProps = {
-  type: 'error' | 'success';
-};
+import './Notification.css';
 
 export class NotificationEvent extends CustomEvent<string> {
   constructor(name: string, message?: string) {
@@ -32,48 +28,6 @@ export class NotificationEndEvent extends NotificationEvent {
 @customElement({
   name: 'bt-notification',
   extends: 'output',
-  styles: css`
-    @keyframes fade-in {
-      from {
-        opacity: 0;
-      }
-    }
-
-    @keyframes fade-out {
-      to {
-        opacity: 0;
-      }
-    }
-
-    @keyframes slide-in {
-      from {
-        transform: translateY(-5vh);
-      }
-    }
-
-    :host {
-      grid-row-start: -1;
-      font-family: var(--bt-font-family);
-      font-weight: 500;
-      display: inline-block;
-      border-radius: 8px;
-      padding: 16px;
-      width: 400px;
-      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
-      animation: fade-in 0.3s ease, slide-in 0.3s ease,
-        fade-out 0.3s ease 3s forwards;
-
-      &[type='error'] {
-        background-color: hsl(0, 96%, 77%);
-        color: hsl(0, 74%, 16%);
-      }
-
-      &[type='success'] {
-        background-color: hsl(145, 78%, 68%);
-        color: hsl(145, 100%, 14%);
-      }
-    }
-  `,
 })
 export class BTNotification extends HTMLOutputElement {
   connectedCallback() {
diff --git a/src/Notifications/Notifications.stories.ts b/src/Notifications/Notifications.stories.ts
index 6af81ba..6c300dc 100644
--- a/src/Notifications/Notifications.stories.ts
+++ b/src/Notifications/Notifications.stories.ts
@@ -15,10 +15,10 @@ class NotificationDocs extends HTMLElement {
     super();
     this.innerHTML = htmlToString(
       html`<div>
-        <button type="button" is="bt-button" color="green" id="success">
+        <button type="button" bt bt-color="green" id="success">
           Success
         </button>
-        <button type="button" is="bt-button" color="red" id="error">
+        <button type="button" bt bt-color="red" id="error">
           Error
         </button>
       </div>`,
diff --git a/src/Notifications/Notifications.ts b/src/Notifications/Notifications.ts
index 1443da5..09fdee8 100644
--- a/src/Notifications/Notifications.ts
+++ b/src/Notifications/Notifications.ts
@@ -76,7 +76,7 @@ export class BTNotifications extends HTMLElement {
       'template'
     )?.content.firstElementChild?.cloneNode(true) as BTNotification;
     notification.textContent = text;
-    notification.setAttribute('type', type);
+    notification.setAttribute('bt-type', type);
     this.appendChild(notification);
     const heightAfter = this.offsetHeight;
     const initialOffset = heightBefore - heightAfter;
diff --git a/src/Popover/Popover.css b/src/Popover/Popover.css
new file mode 100644
index 0000000..7d60a4e
--- /dev/null
+++ b/src/Popover/Popover.css
@@ -0,0 +1,26 @@
+[popover][is='bt-popover'] {
+  margin: unset;
+  padding: unset;
+  white-space: nowrap;
+  top: calc(var(--trigger-bottom) + 0.5rem);
+  background-color: hsl(217, 19%, 27%);
+  border-radius: 0.5rem;
+  min-width: 11rem;
+  border: none;
+  color: var(--bt-strong-text-color);
+  overflow: hidden;
+
+  &.left {
+    left: var(--trigger-left);
+  }
+
+  &.right {
+    left: var(--trigger-right);
+    transform: translateX(-100%);
+  }
+
+  &.center {
+    left: var(--trigger-center);
+    transform: translateX(-50%);
+  }
+}
diff --git a/src/Popover/Popover.stories.ts b/src/Popover/Popover.stories.ts
index 4dbb4b4..aae6668 100644
--- a/src/Popover/Popover.stories.ts
+++ b/src/Popover/Popover.stories.ts
@@ -1,19 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import { BTPopoverProps } from './Popover';
 
-const meta: Meta<BTPopoverProps> = {
+const meta: Meta = {
   title: 'BTPopover',
   render: () =>
-    html`<button is="bt-button" id="trigger" popovertarget="test-popover">
-        Open
-      </button>
+    html`<button bt id="trigger" popovertarget="test-popover">Open</button>
       <div popover id="test-popover" is="bt-popover">
         <div>Content text</div>
-      </div>
-      <div style="min-height: 50px"></div>`,
+      </div>`,
 };
-type Story = StoryObj<BTPopoverProps>;
+type Story = StoryObj;
 
 export default meta;
 
diff --git a/src/Popover/Popover.ts b/src/Popover/Popover.ts
index a708b33..da814de 100644
--- a/src/Popover/Popover.ts
+++ b/src/Popover/Popover.ts
@@ -1,39 +1,9 @@
-import { css } from 'lit';
 import { customElement } from '../utils';
-
-export type BTPopoverProps = {};
+import './Popover.css';
 
 @customElement({
   name: 'bt-popover',
   extends: 'div',
-  styles: css`
-    :host {
-      margin: unset;
-      padding: unset;
-      white-space: nowrap;
-      top: calc(var(--trigger-bottom) + 0.5rem);
-      background-color: hsl(217, 19%, 27%);
-      border-radius: 0.5rem;
-      min-width: 11rem;
-      border: none;
-      color: var(--bt-strong-text-color);
-      overflow: hidden;
-
-      &.left {
-        left: var(--trigger-left);
-      }
-
-      &.right {
-        left: var(--trigger-right);
-        transform: translateX(-100%);
-      }
-
-      &.center {
-        left: var(--trigger-center);
-        transform: translateX(-50%);
-      }
-    }
-  `,
 })
 export class BTPopover extends HTMLDivElement {
   connectedCallback() {
diff --git a/src/Table/RowSelector.css b/src/Table/RowSelector.css
new file mode 100644
index 0000000..1c5ecc8
--- /dev/null
+++ b/src/Table/RowSelector.css
@@ -0,0 +1,11 @@
+td[is='bt-row-selector'] {
+  transition: color 0.3s;
+
+  &[aria-selected='true'] {
+    color: var(--bt-strong-text-color);
+  }
+
+  svg {
+    transform: rotate(-90deg);
+  }
+}
diff --git a/src/Table/RowSelector.ts b/src/Table/RowSelector.ts
index ad2ba6b..d26ddc8 100644
--- a/src/Table/RowSelector.ts
+++ b/src/Table/RowSelector.ts
@@ -1,22 +1,10 @@
-import { css, html } from 'lit';
+import { html } from 'lit';
 import { customElement, htmlToString } from '../utils';
+import './RowSelector.css';
 
 @customElement({
   name: 'bt-row-selector',
   extends: 'td',
-  styles: css`
-    :host {
-      transition: color 0.3s;
-
-      &[selected] {
-        color: var(--bt-strong-text-color);
-      }
-
-      svg {
-        transform: rotate(-90deg);
-      }
-    }
-  `,
 })
 export class BTRowSelector extends HTMLTableCellElement {
   template = document.createElement('template');
diff --git a/src/Table/Table.css b/src/Table/Table.css
new file mode 100644
index 0000000..76b5be4
--- /dev/null
+++ b/src/Table/Table.css
@@ -0,0 +1,60 @@
+table[bt] {
+  border-collapse: collapse;
+  text-align: left;
+  font-size: 0.85em;
+
+  th {
+    padding: 12px 24px;
+    font-weight: 600;
+    background-color: hsl(217, 19%, 27%);
+    color: var(--bt-text-color);
+    text-transform: uppercase;
+  }
+
+  tr {
+    font-weight: 500;
+    background-color: hsl(215, 28%, 17%);
+    transition: background-color 0.3s;
+
+    &:has([is='bt-row-selector']) {
+      cursor: pointer;
+
+      &:hover {
+        background-color: hsl(217, 19%, 27%);
+      }
+    }
+
+    &:has([is='bt-row-selector'][aria-selected='true']) {
+      background-color: hsl(215, 44%, 28%);
+      color: var(--bt-text-color);
+
+      &:hover {
+        background-color: hsl(215, 44%, 28%);
+      }
+    }
+  }
+
+  td {
+    padding: 0 24px;
+    border-bottom: 1px solid hsl(217, 19%, 27%);
+
+    &:not([is='bt-row-selector']) {
+      line-height: 52px;
+    }
+  }
+
+  th[right-align],
+  td[right-align] {
+    text-align: right;
+  }
+
+  th[center-align],
+  td[center-align] {
+    text-align: center;
+  }
+
+  th[no-wrap],
+  td[no-wrap] {
+    white-space: nowrap;
+  }
+}
diff --git a/src/Table/Table.stories.ts b/src/Table/Table.stories.ts
index 5860dcb..8765546 100644
--- a/src/Table/Table.stories.ts
+++ b/src/Table/Table.stories.ts
@@ -1,17 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import { BTTableProps } from './Table';
 
-const meta: Meta<BTTableProps> = {
+const meta: Meta = {
   title: 'BTTable',
 };
-type Story = StoryObj<BTTableProps>;
+type Story = StoryObj;
 
 export default meta;
 
 export const Default: Story = {
   render: () =>
-    html`<table is="bt-table">
+    html`<table bt>
       <thead>
         <tr>
           <th>Person</th>
@@ -46,7 +45,7 @@ export const Default: Story = {
 
 export const WithSelection: Story = {
   render: () =>
-    html`<table is="bt-table">
+    html`<table bt>
       <thead>
         <tr>
           <th></th>
@@ -63,7 +62,7 @@ export const WithSelection: Story = {
           <td>22</td>
         </tr>
         <tr>
-          <td is="bt-row-selector" selected></td>
+          <td is="bt-row-selector" aria-selected="true"></td>
           <td>Dennis</td>
           <td>Web accessibility</td>
           <td>45</td>
diff --git a/src/Table/Table.ts b/src/Table/Table.ts
index 0420ca6..967908a 100644
--- a/src/Table/Table.ts
+++ b/src/Table/Table.ts
@@ -1,72 +1 @@
-import { css } from 'lit';
-import { customElement } from '../utils';
-
-export type BTTableProps = {};
-
-@customElement({
-  name: 'bt-table',
-  extends: 'table',
-  styles: css`
-    :host {
-      border-collapse: collapse;
-      text-align: left;
-      font-size: .85em;
-
-      th {
-        padding: 12px 24px;
-        font-weight: 600;
-        background-color: hsl(217, 19%, 27%);
-        color: var(--bt-text-color);
-        text-transform: uppercase;
-      }
-
-      tr {
-        font-weight: 500;
-        background-color: hsl(215, 28%, 17%);
-        transition: background-color 0.3s;
-
-        &:has([is='bt-row-selector']) {
-          cursor: pointer;
-
-          &:hover {
-            background-color: hsl(217, 19%, 27%);
-          }
-        }
-
-        &:has([is='bt-row-selector'][selected]) {
-          background-color: hsl(215, 44%, 28%);
-          color: var(--bt-text-color);
-
-          &:hover {
-            background-color: hsl(215, 44%, 28%);
-          }
-        }
-      }
-
-      td {
-        padding: 0 24px;
-        border-bottom: 1px solid hsl(217, 19%, 27%);
-
-        &:not([is='bt-row-selector']) {
-          line-height: 52px;
-        }
-      }
-
-      th[right-align],
-      td[right-align] {
-        text-align: right;
-      }
-
-      th[center-align],
-      td[center-align] {
-        text-align: center;
-      }
-
-      th[no-wrap],
-      td[no-wrap] {
-        white-space: nowrap;
-      }
-    }
-  `,
-})
-export class BTTable extends HTMLTableElement {}
+import './Table.css';