feat: add components

src/base/typography.scss

@@ -61,4 +61,4 @@
     margin-block-start: 0.5em;
     color: $gray-500;
   }
-}
+}

src/components/details.scss

@@ -0,0 +1,36 @@
+@use '../utils/variables' as *;
+@use '../utils/functions' as *;
+@use '../utils/mixins' as *;
+@use '../utils/icons' as *;
+
+:where(details) {
+  > summary:first-of-type {
+    list-style-type: none;
+    cursor: pointer;
+
+    &::before {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      margin-inline-end: 0.5em;
+      content: '';
+      vertical-align: -0.125em;
+      background-position: center;
+      background-size: 1em 0.75em;
+      transform: rotate(-90deg);
+      transition: $duration-base;
+
+      @include themeify {
+        background-image: icon-arrow(themed('dark'));
+      }
+    }
+  }
+
+  &[open] > summary:first-of-type {
+    margin-block-end: 0.5em;
+
+    &::before {
+      transform: rotate(0);
+    }
+  }
+}

src/components/tooltip.scss

@@ -0,0 +1,111 @@
+@use '../utils/variables' as *;
+@use '../utils/functions' as *;
+@use '../utils/mixins' as *;
+
+:where([data-tooltip]) {
+  position: relative;
+
+  &::before,
+  &::after {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    display: block;
+    pointer-events: none;
+    transition: $duration-base;
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &:hover,
+  &:focus-visible {
+    &::before,
+    &::after {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  &::before {
+    padding: 0.25rem 0.5rem;
+    font-size: $font-sm;
+    font-weight: $font-medium;
+    white-space: nowrap;
+    content: attr(data-tooltip);
+    border-radius: $radius-sm;
+    transform: translate(-50%, -0.75rem);
+
+    @include themeify {
+      color: themed('light');
+      background-color: themed('dark');
+    }
+  }
+
+  &::after {
+    content: '';
+    border: 0.25rem solid transparent;
+    border-top: 0.25rem solid;
+    transform: translate(-50%, -0.25rem);
+
+    @include themeify {
+      color: themed('dark');
+    }
+  }
+
+  &[data-placement='right'] {
+    &::before,
+    &::after {
+      top: 50%;
+      bottom: auto;
+      left: 100%;
+    }
+
+    &::before {
+      transform: translate(0.75rem, -50%);
+    }
+
+    &::after {
+      border: 0.25rem solid transparent;
+      border-right: 0.25rem solid;
+      transform: translate(0.25rem, -50%);
+    }
+  }
+
+  &[data-placement='bottom'] {
+    &::before,
+    &::after {
+      top: 100%;
+      bottom: auto;
+    }
+
+    &::before {
+      transform: translate(-50%, 0.75rem);
+    }
+
+    &::after {
+      border: 0.25rem solid transparent;
+      border-bottom: 0.25rem solid;
+      transform: translate(-50%, 0.25rem);
+    }
+  }
+
+  &[data-placement='left'] {
+    &::before,
+    &::after {
+      top: 50%;
+      right: 100%;
+      bottom: auto;
+      left: auto;
+    }
+
+    &::before {
+      transform: translate(-0.75rem, -50%);
+    }
+
+    &::after {
+      border: 0.25rem solid transparent;
+      border-left: 0.25rem solid;
+      transform: translate(-0.25rem, -50%);
+    }
+  }
+}

src/elements/input.scss

@@ -90,6 +90,7 @@
   &[type='radio' i] {
     width: 1em;
     height: 1em;
+    vertical-align: -0.125em;
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;

src/index.scss

@@ -23,3 +23,5 @@
 
 // import components
 @forward 'components/loading.scss';
+@forward 'components/details.scss';
+@forward 'components/tooltip.scss';