10 files changed, 433 insertions, 0 deletions
diff --git a/docs/components/ui/Tabs/DemoCSS.jinja b/docs/components/ui/Tabs/DemoCSS.jinja
new file mode 100644
index 0000000..07db8f0
--- /dev/null
+++ b/docs/components/ui/Tabs/DemoCSS.jinja
@@ -0,0 +1,59 @@
+{% filter markdown %}{% raw %}
+```css
+.ui-tablist {
+  display: flex;
+}
+.ui-tablist > :not([hidden]) ~ :not([hidden]) {
+  margin-left: 0.25rem ;
+}
+.ui-tablist {
+  border-radius: 1rem;
+  background-color: rgb(30 58 138 / 0.6);
+  padding: 0.5rem;
+  color: #111;
+}
+.ui-tablist > .ui-tab:not([hidden]) ~ .ui-tab:not([hidden]) {
+  margin-left: 0.5rem;
+}
+.ui-tab {
+  width: 100%;
+  border-radius: 0.5rem;
+  color: #222;
+  background-color: rgb(255 255 255 / 0.7);
+  padding: 0.75rem 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+}
+.ui-tab:focus {
+  outline: 2px solid rgb(59 130 246 / 0.8);
+  outline-offset: 2px;
+}
+.ui-tab.ui-selected {
+  background-color: white;
+  color: black;
+}
+.ui-tab:hover:not(.ui-selected, .ui-disabled),
+.ui-tab:focus:not(.ui-selected, .ui-disabled) {
+  background-color: rgb(255 255 255 / 0.8);
+}
+.ui-tabpanel {
+  margin-top: 0.5rem;
+  border-radius: 0.75rem;
+  background-color: rgb(254 254 254);
+  border: 2px solid rgb(59 130 246 / 0.8);
+  padding: 0.1rem;
+  min-height: 8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ui-tabpanel:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.ui-tabpanel.ui-hidden {
+  display: none;
+}
+```
+{% endraw %}{% endfilter %}
+\ No newline at end of file
diff --git a/docs/components/ui/Tabs/DemoHTML.jinja b/docs/components/ui/Tabs/DemoHTML.jinja
new file mode 100644
index 0000000..e267335
--- /dev/null
+++ b/docs/components/ui/Tabs/DemoHTML.jinja
@@ -0,0 +1,23 @@
+{% filter markdown %}{% raw %}
+```html+jinja
+<TabGroup>
+  <TabList>
+    <Tab target="demo-recent" selected>Recent</Tab>
+    <Tab target="demo-popular">Popular</Tab>
+    <Tab target="demo-trending">Trending</Tab>
+  </TabList>
+
+  <TabPanel id>
+    <p>This is the tab panel for <b>"Recent"</b>.</p>
+  </TabPanel>
+
+  <TabPanel id="demo-popular" hidden>
+    <p>This is the tab panel for <b>"Popular"</b>.</p>
+  </TabPanel>
+
+  <TabPanel id="demo-trending" hidden>
+    <p>This is the tab panel for <b>"Trending"</b>.</p>
+  </TabPanel>
+</TabGroup>
+```
+{% endraw %}{% endfilter %}
diff --git a/docs/components/ui/Tabs/DemoResult.jinja b/docs/components/ui/Tabs/DemoResult.jinja
new file mode 100644
index 0000000..3306eac
--- /dev/null
+++ b/docs/components/ui/Tabs/DemoResult.jinja
@@ -0,0 +1,28 @@
+{#css ui/Tabs/Tabs.css #}
+
+<div class="bg-cover"
+  style="background-image:linear-gradient(to right, rgba(56,189,248, 0.9), rgba(37,99,235, 0.9))"
+  data-md-skip
+></div>
+
+<div class="horizontal-tabs" data-md-skip>
+  <TabGroup>
+    <TabList>
+      <Tab target="demo-recent" selected>Recent</Tab>
+      <Tab target="demo-popular">Popular</Tab>
+      <Tab target="demo-trending">Trending</Tab>
+    </TabList>
+
+    <TabPanel id="demo-recent">
+      <p>This is the tab panel for <b>"Recent"</b>.</p>
+    </TabPanel>
+
+    <TabPanel id="demo-popular" hidden>
+      <p>This is the tab panel for <b>"Popular"</b>.</p>
+    </TabPanel>
+
+    <TabPanel id="demo-trending" hidden>
+      <p>This is the tab panel for <b>"Trending"</b>.</p>
+    </TabPanel>
+  </TabGroup>
+</div>
diff --git a/docs/components/ui/Tabs/ManualHTML.jinja b/docs/components/ui/Tabs/ManualHTML.jinja
new file mode 100644
index 0000000..1a39f35
--- /dev/null
+++ b/docs/components/ui/Tabs/ManualHTML.jinja
@@ -0,0 +1,28 @@
+{% filter markdown %}{% raw %}
+```html+jinja
+<TabGroup>
+  <TabList manual>
+    <Tab target="manual-recent" selected>Recent</Tab>
+    <Tab target="manual-popular">Popular</Tab>
+    <Tab target="manual-disabled" disabled>Disabled</Tab>
+    <Tab target="manual-trending">Trending</Tab>
+  </TabList>
+
+  <TabPanel id="manual-recent">
+    <p>This is the tab panel for <b>"Recent"</b>.</p>
+  </TabPanel>
+
+  <TabPanel id="manual-popular" hidden>
+    <p>This is the tab panel for <b>"Popular"</b>.</p>
+  </TabPanel>
+
+  <TabPanel id="manual-disabled" hidden>
+    <p>This is the tab panel for "Disabled".</p>
+  </TabPanel>
+
+  <TabPanel id="manual-trending" hidden>
+    <p>This is the tab panel for <b>"Trending"</b>.</p>
+  </TabPanel>
+</TabGroup>
+```
+{% endraw %}{% endfilter %}
diff --git a/docs/components/ui/Tabs/ManualResult.jinja b/docs/components/ui/Tabs/ManualResult.jinja
new file mode 100644
index 0000000..2a067bd
--- /dev/null
+++ b/docs/components/ui/Tabs/ManualResult.jinja
@@ -0,0 +1,33 @@
+{#css ui/Tabs/Tabs.css #}
+
+<div class="bg-cover"
+  style="background-image:linear-gradient(to right, rgba(56,189,248, 0.3), rgba(37,99,235, 0.3))"
+  data-md-skip
+></div>
+
+<div class="horizontal-tabs" data-md-skip>
+  <TabGroup>
+    <TabList manual>
+      <Tab target="manual-recent" selected>Recent</Tab>
+      <Tab target="manual-popular">Popular</Tab>
+      <Tab target="manual-disabled" disabled>Disabled</Tab>
+      <Tab target="manual-trending">Trending</Tab>
+    </TabList>
+
+    <TabPanel id="manual-recent">
+      <p>This is the tab panel for <b>"Recent"</b>.</p>
+    </TabPanel>
+
+    <TabPanel id="manual-popular" hidden>
+      <p>This is the tab panel for <b>"Popular"</b>.</p>
+    </TabPanel>
+
+    <TabPanel id="manual-disabled" hidden>
+      <p>This is the tab panel for "Disabled".</p>
+    </TabPanel>
+
+    <TabPanel id="manual-trending" hidden>
+      <p>This is the tab panel for <b>"Trending"</b>.</p>
+    </TabPanel>
+  </TabGroup>
+</div>
diff --git a/docs/components/ui/Tabs/SelectHTML.jinja b/docs/components/ui/Tabs/SelectHTML.jinja
new file mode 100644
index 0000000..7651bb8
--- /dev/null
+++ b/docs/components/ui/Tabs/SelectHTML.jinja
@@ -0,0 +1,35 @@
+{% filter markdown %}{% raw %}
+```html+jinja
+<TabGroup>
+  <TabSelect>
+    <TabOption target="select-recent">Recent</TabOption>
+    <TabOption target="select-popular">Popular</TabOption>
+    <TabOption target="select-disabled" disabled>Disabled</TabOption>
+    <TabOption target="select-trending">Trending</TabOption>
+  </TabSelect>
+
+  <TabList>
+    <Tab target="select-recent">Recent</Tab>
+    <Tab target="select-popular" selected>Popular</Tab>
+    <Tab target="select-disabled" disabled>Disabled</Tab>
+    <Tab target="select-trending">Trending</Tab>
+  </TabList>
+
+  <TabPanel id="select-recent">
+    <p>This is the tab panel for <b>"Recent"</b>.</p>
+  </TabPanel>
+
+  <TabPanel id="select-popular" hidden>
+    <p>This is the tab panel for <b>"Popular"</b>.</p>
+  </TabPanel>
+
+  <TabPanel id="select-disabled" hidden>
+    <p>This is the tab panel for "Disabled".</p>
+  </TabPanel>
+
+  <TabPanel id="select-trending" hidden>
+    <p>This is the tab panel for <b>"Trending"</b>.</p>
+  </TabPanel>
+</TabGroup>
+```
+{% endraw %}{% endfilter %}
diff --git a/docs/components/ui/Tabs/SelectResult.jinja b/docs/components/ui/Tabs/SelectResult.jinja
new file mode 100644
index 0000000..ffdf0ea
--- /dev/null
+++ b/docs/components/ui/Tabs/SelectResult.jinja
@@ -0,0 +1,40 @@
+{#css ui/Tabs/Tabs.css #}
+
+<div class="bg-cover"
+  style="background-image:linear-gradient(to right, rgba(56,189,248, 0.3), rgba(37,99,235, 0.3))"
+  data-md-skip
+></div>
+
+<div class="horizontal-tabs" data-md-skip>
+  <TabGroup>
+    <TabSelect>
+      <TabOption target="select-recent">Recent</TabOption>
+      <TabOption target="select-popular">Popular</TabOption>
+      <TabOption target="select-disabled" disabled>Disabled</TabOption>
+      <TabOption target="select-trending">Trending</TabOption>
+    </TabSelect>
+
+    <TabList>
+      <Tab target="select-recent">Recent</Tab>
+      <Tab target="select-popular" selected>Popular</Tab>
+      <Tab target="select-disabled" disabled>Disabled</Tab>
+      <Tab target="select-trending">Trending</Tab>
+    </TabList>
+
+    <TabPanel id="select-recent">
+      <p>This is the tab panel for <b>"Recent"</b>.</p>
+    </TabPanel>
+
+    <TabPanel id="select-popular" hidden>
+      <p>This is the tab panel for <b>"Popular"</b>.</p>
+    </TabPanel>
+
+    <TabPanel id="select-disabled" hidden>
+      <p>This is the tab panel for "Disabled".</p>
+    </TabPanel>
+
+    <TabPanel id="select-trending" hidden>
+      <p>This is the tab panel for <b>"Trending"</b>.</p>
+    </TabPanel>
+  </TabGroup>
+</div>
diff --git a/docs/components/ui/Tabs/Tabs.css b/docs/components/ui/Tabs/Tabs.css
new file mode 100644
index 0000000..ddbef0e
--- /dev/null
+++ b/docs/components/ui/Tabs/Tabs.css
@@ -0,0 +1,126 @@
+@scope(.horizontal-tabs,.vertical-tabs) {
+  :scope {
+    width: 100%;
+    max-width: 36rem;
+    margin: 10% auto;
+    padding: 0.5rem;
+  }
+
+  .ui-tablist {
+    display: flex;
+    border-radius: 1rem;
+    background-color: #6383dd;
+    padding: 0.5rem;
+    color: #111;
+  }
+  .ui-tablist > .ui-tab:not([hidden]) ~ .ui-tab:not([hidden]) {
+    margin-left: 0.5rem;
+  }
+  .ui-tab {
+    width: 100%;
+    border-radius: 0.5rem;
+    color: #222;
+    background-color: rgb(255 255 255 / 0.7);
+    padding: 0.75rem 0.25rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+  }
+  .ui-tab:focus {
+    outline: 2px solid rgb(255 255 255 / 0.8);
+    outline-offset: 2px;
+  }
+  .ui-tab.ui-selected {
+    background-color: white;
+    color: black;
+  }
+  .ui-tab.ui-disabled {
+    background-color: rgb(255 255 255 / 0.5);
+    color: #666;
+    cursor: default;
+  }
+  .ui-tab:hover:not(.ui-selected, .ui-disabled),
+  .ui-tab:focus:not(.ui-selected, .ui-disabled) {
+    background-color: rgb(255 255 255 / 0.8);
+  }
+  .ui-tabpanel {
+    margin-top: 0.5rem;
+    border-radius: 1rem;
+    background-color: rgb(254 254 254);
+    border: 2px solid rgb(59 130 246 / 0.8);
+    padding: 0.1rem;
+    min-height: 8rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .ui-tabpanel:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+  .ui-tabpanel.ui-hidden {
+    display: none;
+  }
+  .ui-tabpanel b {
+    font-weight: bold;
+  }
+
+  .ui-tabselect {
+    display: block;
+    width: 100%;
+    border-radius: 0.5rem;
+    border-width: 1px;
+    border-color: rgb(209 213 219);
+    background-color: rgb(249 250 251);
+    padding: 0.5rem;
+    font-size: 1rem;
+    line-height: 1.25rem;
+    color: rgb(17 24 39);
+    margin-bottom: 0.5rem;
+  }
+  .ui-tabselect:focus {
+    border-color: rgb(59 130 246);
+  }
+  .ui-tabselect:is(.dark *) {
+    border-color: rgb(75 85 99);
+    background-color: rgb(55 65 81);
+    color: rgb(255 255 255);
+  }
+  .ui-tabselect:is(.dark *)::-moz-placeholder {
+    color: rgb(156 163 175);
+  }
+  .ui-tabselect:is(.dark *):-ms-input-placeholder {
+    color: rgb(156 163 175);
+  }
+  .ui-tabselect:is(.dark *)::placeholder {
+    color: rgb(156 163 175);
+  }
+  .ui-tabselect:is(.dark *):focus {
+    border-color: rgb(59 130 246);
+  }
+}
+
+@scope(.vertical-tabs) {
+  .ui-tabgroup {
+    display: flex;
+  }
+  .ui-tablist {
+    flex-direction: column;
+    width: 10rem;
+    border-radius: 1rem 0 0 1rem;
+    padding-right: 0;
+  }
+  .ui-tablist > .ui-tab:not([hidden]) ~ .ui-tab:not([hidden]) {
+    margin: 0.5rem 0 0 0;
+  }
+  .ui-tab {
+    border-radius: 0.5rem 0 0 0.5rem;
+    padding: 1rem;
+  }
+  .ui-tabpanel {
+    margin: 0;
+    border-radius: 0 1rem 1rem 0;
+    padding: 2rem;
+    min-width: 24rem;
+  }
+}
+\ No newline at end of file
diff --git a/docs/components/ui/Tabs/VerticalHTML.jinja b/docs/components/ui/Tabs/VerticalHTML.jinja
new file mode 100644
index 0000000..1dd7123
--- /dev/null
+++ b/docs/components/ui/Tabs/VerticalHTML.jinja
@@ -0,0 +1,28 @@
+{% filter markdown %}{% raw %}
+```html+jinja
+<TabGroup>
+  <TabList vertical>
+    <Tab target="vertical-recent" selected>Recent</Tab>
+    <Tab target="vertical-popular">Popular</Tab>
+    <Tab target="vertical-disabled" disabled>Disabled</Tab>
+    <Tab target="vertical-trending">Trending</Tab>
+  </TabList>
+
+  <TabPanel id="vertical-recent">
+    <p>This is the tab panel for <b>"Recent"</b>.</p>
+  </TabPanel>
+
+  <TabPanel id="vertical-popular" hidden>
+    <p>This is the tab panel for <b>"Popular"</b>.</p>
+  </TabPanel>
+
+  <TabPanel id="vertical-disabled" hidden>
+    <p>This is the tab panel for "Disabled".</p>
+  </TabPanel>
+
+  <TabPanel id="vertical-trending" hidden>
+    <p>This is the tab panel for <b>"Trending"</b>.</p>
+  </TabPanel>
+</TabGroup>
+```
+{% endraw %}{% endfilter %}
diff --git a/docs/components/ui/Tabs/VerticalResult.jinja b/docs/components/ui/Tabs/VerticalResult.jinja
new file mode 100644
index 0000000..b83204a
--- /dev/null
+++ b/docs/components/ui/Tabs/VerticalResult.jinja
@@ -0,0 +1,33 @@
+{#css ui/Tabs/Tabs.css #}
+
+<div class="bg-cover"
+  style="background-image:linear-gradient(to right, rgba(56,189,248, 0.3), rgba(37,99,235, 0.3))"
+  data-md-skip
+></div>
+
+<div class="vertical-tabs" data-md-skip>
+  <TabGroup>
+    <TabList vertical>
+      <Tab target="vertical-recent" selected>Recent</Tab>
+      <Tab target="vertical-popular">Popular</Tab>
+      <Tab target="vertical-disabled" disabled>Disabled</Tab>
+      <Tab target="vertical-trending">Trending</Tab>
+    </TabList>
+
+    <TabPanel id="vertical-recent">
+      <p>This is the tab panel for <b>"Recent"</b>.</p>
+    </TabPanel>
+
+    <TabPanel id="vertical-popular" hidden>
+      <p>This is the tab panel for <b>"Popular"</b>.</p>
+    </TabPanel>
+
+    <TabPanel id="vertical-disabled" hidden>
+      <p>This is the tab panel for "Disabled".</p>
+    </TabPanel>
+
+    <TabPanel id="vertical-trending" hidden>
+      <p>This is the tab panel for <b>"Trending"</b>.</p>
+    </TabPanel>
+  </TabGroup>
+</div>