python/jinjax
1
0
Fork 0
Code Issues Activity

Merging upstream version 0.46.

Browse source 
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
Daniel Baumann 2025-02-05 18:42:39 +01:00
parent d5bf7afd18
commit 76fe8c2886
Signed by: daniel
GPG key ID: FBB4F0E80A80222F
125 changed files with 8421 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

4
docs/components/Copyright.jinja Normal file
View file

@ -0,0 +1,4 @@
<div {{ attrs.render(class="copy") }}>
<p>Website &copy; <a href="https://jpscaletti.com">Juan-Pablo Scaletti</a>.</p>
<p>JinjaX and the documentation text licensed under the MIT license.</p>
</div>

154
docs/components/Home.jinja Normal file
View file

@ -0,0 +1,154 @@
<div class="homepage">
<section class="hero">
<h1>JinjaX</h1>
<h2>
Super
<span class="g1">components powers</span>
for your
<span class="g2">Jinja templates</span>
</h2>
</section>
<section class="code">
<div class="stack">
<div class="panel">
<h2>Before: chaos!</h2>
{% filter markdown %}{% raw %}
```html+jinja
{% extends "layout.html" %}
{% block title %}My title{% endblock %}
{% from "bunch_of_macros.html"
import card_macro, another_macro %}
{% block content -%}
<div>
<h2>Hello {{ mistery or "World?" }}</h2>
<div>
{% call card_macro(div="So verbose") %}
{% for product in products %}
{{ another_macro(product) }}
{% endfor %}
{% endcall %}
</div>
</div>
{% with items=products %}
{% include "snippets/pagination.html" %}
{% endwith %}
{%- endblock %}
```
{% endraw %}{% endfilter %}
</div>
<div class="panel">
<h2>After: ✨ clarity ✨</h2>
{% filter markdown %}{% raw %}
```html+jinja
{#def products, msg="World!" #}
<Layout title="My title">
<div>
<h2>Hello, {{ msg }}</h2>
<div>
<Card div="So clean">
{% for product in products %}
<Product product={{ product }} />
{% endfor %}
</Card>
</div>
</div>
<Paginator items={{ products }} />
</Layout>
```
{% endraw %}{% endfilter %}
</div>
</div>
</section>
<section class="features">
<h2>
Better than <code>include</code> and&nbsp;<code>macros</code>
</h2>
<div class="cd-cards">
<article class="card">
<div class="header">
<h3>Encapsulated</h3>
<img src="/static/img/encapsulated.svg" width="32" height="32">
</div>
<div class="body prose prose-zinc">
<div>
Link to their own <code>css</code> and/or <code>js</code> files
and can be copy/pasted to other projects without&nbsp;modifications.
</div>
</div>
</article>
<article class="card">
<div class="header">
<h3>Simple</h3>
<img src="/static/img/simple.svg" width="32" height="32">
</div>
<div class="body prose prose-zinc">
<div>
Just regular Jinja files and no need to import&nbsp;them.
Easier to use and easier to&nbsp;read.
</div>
</div>
</article>
<article class="card">
<div class="header">
<h3>Modern</h3>
<img src="/static/img/modern.svg" width="32" height="32">
</div>
<div class="body prose prose-zinc">
<div>
Components works great with
<a href="https://htmx.org/" target="_blank">htmx</a>,
<a href="https://tailwindcss.com/" target="_blank">TailwindCSS</a>,
or&nbsp;<a href="https://hotwired.dev/" target="_blank">Hotwire</a>
</div>
</div>
</article>
<article class="card">
<div class="header">
<h3>Composable</h3>
<img src="/static/img/composable.svg" width="32" height="32">
</div>
<div class="body prose prose-zinc">
<div>
Can wrap content (HTML, other components, etc.) in a natural&nbsp;way.
</div>
</div>
</article>
</div>
</section>
<section class="spaghetti">
<div class="wrapper">
<h2>
Say goodbye to spaghetti&nbsp;templates
</h2>
<div class="text">
<img src="/static/img/spaghetti_code.png" alt="Spaguetti code">
<p>Your Python code should be easy to understand and&nbsp;test.</p>
<p><b>Template code, however, often fails even basic code standards</b>: long methods, deep conditional nesting,and mystery variables&nbsp;everywhere.
</p>
<p><b>But when it's built with components, you see</b> where everything is, understand what are the possible statesof every piece of UI, and know exactly what data need to&nbsp;have.
</p>
<p>You can replace <b>all</b> your templates with components, or start with one&nbsp;section.</p>
</div>
</div>
</section>
<section class="engage" data-md-skip>
<div class="wrapper">
<h3>Ready to get going? Engage!</h3>
<a href="./guide/">Get started <i>&rarr;</i></a>
<div class="hint">Millions of people clicked a button in the last week alone!</div>
</div>
</section>
</div>

7
docs/components/Logo.jinja Normal file
View file

@ -0,0 +1,7 @@
{#def base_url="/" #}
<a
{{ attrs.render(class="Logo", href=base_url, title="Back home") }}>
<img class="light" src="/static/img/jinjax-logo.svg" width="140" aria-hidden>
<img class="dark" src="/static/img/jinjax-logo-w.svg" width="140" aria-hidden>
</a>

1
docs/components/NavExtra.jinja Normal file
View file

@ -0,0 +1 @@
<Source title="Go to repo" url="https://github.com/jpsca/jinjax" />

2
docs/components/NavLinks.jinja Normal file
View file

@ -0,0 +1,2 @@
<a href="/guide/">Documentation</a>
<a href="/ui/">UI components</a>

66
docs/components/SocialCardIndex.jinja Normal file
View file

@ -0,0 +1,66 @@
{#def page #}
<Layout
title={{ page.title }}
description={{ page.description }}
>
<style>
body {
background-color: black;
}
.sc1 {
width: 1200px;
height: 630px;
margin: 0;
font-family: SF Pro Display, system-ui, sans-serif;
color: black;
background-color: white
}
.sc1 > * {
position: absolute;
left: 100px;
width: 900px;
text-align: center;
overflow: hidden;
}
.sc1__logo {
top: 100px;
}
.sc1__logo img {
display: inline-block;
height: 200px;
width: auto;
margin: 0 auto;
}
.sc1__description {
top: 350px;
font-weight: bold;
font-size: 60px;
line-height: 1.2;
letter-spacing: -0.05em;
text-align: center;
}
.sc1__description .g1 {
background-image: linear-gradient(to bottom right, #fbbf24, #fb923c);
background-clip: text;
color: transparent;
}
.sc1__description .g2 {
background-image: linear-gradient(to bottom right, #34d399, #3b82f6);
background-clip: text;
color: transparent;
}
</style>
<article class="sc1">
<div class="sc1__logo">
<img src="/static/img/jinjax-logo.png" />
</div>
<div class="sc1__description">
Super
<span class="g1">components powers</span>
for your
<span class="g2">Jinja templates</span>
</div>
</article>
</Layout>

10
docs/components/guide/slots/CompArchive.jinja Normal file
View file

@ -0,0 +1,10 @@
{% filter markdown %}{% raw %}
```html+jinja
{#def posts #}
<Layout title="Archive">
{% for post in posts %}
<Post post={post} />
{% endfor %}
</Layout>
```
{% endraw %}{% endfilter %}

14
docs/components/guide/slots/CompLayout.jinja Normal file
View file

@ -0,0 +1,14 @@
{% filter markdown %}{% raw %}
```html+jinja
{#def title #}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ title }}</title>
</head>
<body>
{{ content }}
</body>
```
{% endraw %}{% endfilter %}

7
docs/components/guide/slots/Modal.jinja Normal file
View file

@ -0,0 +1,7 @@
{% filter markdown %}{% raw %}
```html+jinja
<dialog class="modal">
{{ content }}
</dialog>
```
{% endraw %}{% endfilter %}

7
docs/components/guide/slots/ModalBody.jinja Normal file
View file

@ -0,0 +1,7 @@
{% filter markdown %}{% raw %}
```html+jinja
<div class="modal-body">
{{ content }}
</div>
```
{% endraw %}{% endfilter %}

7
docs/components/guide/slots/ModalFooter.jinja Normal file
View file

@ -0,0 +1,7 @@
{% filter markdown %}{% raw %}
```html+jinja
<footer class="modal-footer">
{{ content }}
</footer>
```
{% endraw %}{% endfilter %}

10
docs/components/guide/slots/ModalHeader.jinja Normal file
View file

@ -0,0 +1,10 @@
{% filter markdown %}{% raw %}
```html+jinja
<header class="modal-header>
<h2 class="modal-title">
{{ content }}
</h2>
<CloseButton />
</header>
```
{% endraw %}{% endfilter %}

67
docs/components/ui/Accordion/Accordion.css Normal file
View file

@ -0,0 +1,67 @@
@scope (#accordion-demo) {
:scope {
position: relative;
display: block;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 0.5rem 0;
height: 360px;
margin: 0 auto;
}
@media (min-width: 38rem) {
:scope {
width: 36rem;
}
}
details {
margin: 0;
border-width: 1px;
border-color: rgb(212 212 212);
background-color: rgb(245 245 245);
padding: 0;
overflow: hidden;
height: 3.5rem;
transition: all 0.15s ease-in-out;
}
details[open] {
height: 10rem;
}
details:focus-within {
box-shadow: 0 1px 2px 0 #2563eb;
}
details:first-of-type {
margin-top: 0px;
border-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
}
details:last-of-type {
margin-bottom: 0px;
border-bottom-left-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
}
summary {
position: relative;
height: 3.5rem;
border-bottom-width: 1px;
border-color: transparent;
background-color: rgb(255, 255, 255);
padding: 1rem 1.25rem;
color: rgb(0, 0, 0);
cursor: default;
}
details[open] > summary {
border-color: rgb(229 229 229);
}
.panel {
color: rgb(82 82 82);
padding: 0 1.25rem;
padding: 0.75rem 1.25rem;
}
.panel code {
font-weight: bold;
}
}

51
docs/components/ui/Accordion/DemoCSS.jinja Normal file
View file

@ -0,0 +1,51 @@
{% filter markdown %}{% raw %}
```css
@scope (#accordion-demo) {
details {
margin: 0;
border-width: 1px;
border-color: rgb(212 212 212);
background-color: rgb(245 245 245);
padding: 0;
overflow: hidden;
height: 3.5rem;
width: 36rem;
transition: all 0.15s ease-in-out;
}
details[open] {
height: 10rem;
}
details:focus-within {
box-shadow: 0 1px 2px 0 #2563eb;
}
details:first-of-type {
margin-top: 0px;
border-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
}
details:last-of-type {
margin-bottom: 0px;
border-bottom-left-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
}
summary {
position: relative;
height: 3.5rem;
border-bottom-width: 1px;
border-color: transparent;
background-color: rgb(255, 255, 255);
padding: 1rem 1.25rem;
color: rgb(0, 0, 0);
cursor: default;
}
details[open] > summary {
border-color: rgb(229 229 229);
}
.panel {
color: rgb(82 82 82);
padding: 0 1.25rem;
padding: 0.75rem 1.25rem;
}
}
```
{% endraw %}{% endfilter %}

29
docs/components/ui/Accordion/DemoHTML.jinja Normal file
View file

@ -0,0 +1,29 @@
{% filter markdown %}{% raw %}
```html+jinja
<Accordion>
<details>
<summary>Is it accessible?</summary>
<div class="panel">
Yes, more than any custom accordion you'll find on the web, because it's made
with native elements.
</div>
</details>
<details>
<summary>Is it unstyled?</summary>
<div class="panel">
Yes. The Accordion doesn't need any styles, you are free to style your
<code>&lt;details&gt;</code> elements however you need.
</div>
</details>
<details>
<summary>Can it be animated?</summary>
<div class="panel">
The <code>&lt;details&gt;</code> elements can be animated (with some restrictions)
using CSS animations, or with JS.
</div>
</details>
</Accordion>
```
{% endraw %}{% endfilter %}

32
docs/components/ui/Accordion/DemoResult.jinja Normal file
View file

@ -0,0 +1,32 @@
{#css ui/Accordion/Accordion.css #}
<div class="bg-cover"
style="background-image:linear-gradient(to right, rgba(252,211,77, 0.9), rgba(251,146,60, 0.9))"
data-md-skip
></div>
<Accordion id="accordion-demo" data-md-skip>
<details>
<summary>Is it accessible?</summary>
<div class="panel">
Yes, more than any custom accordion you'll find on the web, because it's made
with native elements.
</div>
</details>
<details>
<summary>Is it unstyled?</summary>
<div class="panel">
Yes. The Accordion doesn't need any styles, you are free to style your
<code>&lt;details&gt;</code> elements however you need.
</div>
</details>
<details>
<summary>Can it be animated?</summary>
<div class="panel">
The <code>&lt;details&gt;</code> elements can be animated (with some restrictions)
using CSS animations, or with JS.
</div>
</details>
</Accordion>

6
docs/components/ui/Dialog/DemoCode.jinja Normal file
View file

@ -0,0 +1,6 @@
{% filter markdown %}{% raw %}
```html+jinja
{# Style classes and some content removed for clarity #}
```
{% endraw %}{% endfilter %}

0
docs/components/ui/Dialog/DemoPreview.jinja Normal file
View file

83
docs/components/ui/LinkedList/DemoCSS.jinja Normal file
View file

@ -0,0 +1,83 @@
{% filter markdown %}{% raw %}
```css
.ui-linkedlist {
padding: 0px;
background-color: rgb(255 255 255);
overscroll-behavior: contain;
overflow-y: scroll;
list-style-type: none;
height: 16rem;
margin: 0px;
border: 1px solid rgb(128 128 128);
border-radius: 0.25rem;
font-size: 0.85rem;
}
.ui-linkedlist li {
cursor: pointer;
display: flex;
padding: 0.25rem 1rem;
align-items: center;
}
.ui-linkedlist li[disabled] {
color: rgb(156 156 156);
cursor: default;
}
.ui-linkedlist li:hover {
background-color: rgb(243 244 246);
}
.ui-linkedlist input[type="checkbox"] {
margin-right: 0.5rem;
}
label {
display: inline-block;
font-weight: bold;
background-color: white;
padding: 0.25rem 2rem;
border: 1px solid rgb(128 128 128);
border-radius: 0.25rem 0.25rem 0 0;
font-size: 0.7rem;
margin-bottom: -1px;
}
button {
margin-top: 0.5rem;
display: inline-flex;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
align-items: center;
justify-content: center;
}
button > :not([hidden]) ~ :not([hidden]) {
margin-left: 0.25rem;
}
button {
white-space: nowrap;
border-radius: 0.25rem;
border: 1px solid transparent;
background-color: rgb(229 231 235);
padding: 0.5rem 0.75rem;
text-align: center;
font-size: 0.75rem;
line-height: 1rem;
}
button:hover {
border-color: rgb(219 234 254);
background-color: rgb(243 244 246);
}
button:focus {
background-color: rgb(229 231 235);
outline-offset: 1px;
outline-color: #3b82f6;
}
@media (min-width: 640px) {
button {
padding: 0.25rem 0.5rem;
}
}
button.select-all {
float: right;
}
```
{% endraw %}{% endfilter %}

35
docs/components/ui/LinkedList/DemoHTML.jinja Normal file
View file

@ -0,0 +1,35 @@
{% filter markdown %}{% raw %}
```html+jinja
<div>
<label>Known Mutants</label>
<LinkedList id="linkedlist-demo-list1" linked_to="linkedlist-demo-list2">
<li><input type="checkbox" name="users" value="1" />
Alexander Summers</li>
<!-- ... etc ... -->
<li><input type="checkbox" name="users" value="27" />
Warren Worthington III</li>
</LinkedList>
<button
type="button"
class="select-all"
onclick="document.getElementById('linkedlist-demo-list1').dispatchEvent(new CustomEvent('jxui:linked:sendall'));"
>
Select all &raquo;
</button>
</div>
<div>
<label>X-Men</label>
<LinkedList id="linkedlist-demo-list2" linked_to="linkedlist-demo-list1" active>
</LinkedList>
<button
type="button"
class="remove-all"
onclick="document.getElementById('linkedlist-demo-list2').dispatchEvent(new CustomEvent('jxui:linked:sendall'));"
>
&laquo; Remove all
</button>
</div>
```
{% endraw %}{% endfilter %}

89
docs/components/ui/LinkedList/DemoResult.jinja Normal file
View file

@ -0,0 +1,89 @@
{#css ui/LinkedList/LinkedList.css #}
<div class="bg-cover"
style="background-image:linear-gradient(to right, rgba(132,204,22,0.7), rgba(22,163,74,0.7))"
data-md-skip
></div>
<div id="linkedlist-demo" data-md-skip>
<div>
<label>Known Mutants</label>
<LinkedList id="linkedlist-demo-list1" linked_to="linkedlist-demo-list2">
<li><input type="checkbox" name="users" value="1" />
Alexander Summers</li>
<li><input type="checkbox" name="users" value="2" />
Alison Blaire</li>
<li><input type="checkbox" name="users" value="3" />
Anna Marie LeBeau</li>
<li><input type="checkbox" name="users" value="4" />
Charles Francis Xavier</li>
<li><input type="checkbox" name="users" value="5" />
Elizabeth Braddock</li>
<li><input type="checkbox" name="users" value="6" />
Emma Grace Frost</li>
<li disabled><input type="checkbox" name="users" value="7" disabled />
Erik Magnus Lehnsherr</li>
<li><input type="checkbox" name="users" value="8" />
Henry Philip McCoy</li>
<li><input type="checkbox" name="users" value="9" />
James Howlett</li>
<li><input type="checkbox" name="users" value="10" />
Jean Elaine Grey</li>
<li><input type="checkbox" name="users" value="11" />
John Proudstar</li>
<li><input type="checkbox" name="users" value="12" />
Jubilation Lee</li>
<li><input type="checkbox" name="users" value="13" />
Katherine Anne Pryde</li>
<li><input type="checkbox" name="users" value="14" />
Kurt Wagner</li>
<li><input type="checkbox" name="users" value="15" />
Lucas Bishop</li>
<li><input type="checkbox" name="users" value="16" />
Nathan Summers</li>
<li><input type="checkbox" name="users" value="17" />
Ororo Munroe</li>
<li><input type="checkbox" name="users" value="18" />
Piotr Nikolaievitch Rasputin</li>
<li><input type="checkbox" name="users" value="19
Rachel Anne Summers</li>
<li><input type="checkbox" name="users" value="20" />
Raven Darkhölme</li>
<li><input type="checkbox" name="users" value="21" />
Remy Etienne LeBeau</li>
<li><input type="checkbox" name="users" value="22" />
Robert Louis Drake</li>
<li><input type="checkbox" name="users" value="23" />
Roberto da Costa</li>
<li><input type="checkbox" name="users" value="24" />
Scott Summers</li>
<li><input type="checkbox" name="users" value="25" />
Sean Cassidy</li>
<li><input type="checkbox" name="users" value="26" />
Shiro Yoshida</li>
<li><input type="checkbox" name="users" value="27" />
Warren Worthington III</li>
</LinkedList>
<button
type="button"
class="select-all"
onclick="document.getElementById('linkedlist-demo-list1').dispatchEvent(new CustomEvent('jxui:linked:sendall'));"
>
Select all &raquo;
</button>
</div>
<div>
<label>X-Men</label>
<LinkedList id="linkedlist-demo-list2" linked_to="linkedlist-demo-list1" active>
</LinkedList>
<button
type="button"
class="remove-all"
onclick="document.getElementById('linkedlist-demo-list2').dispatchEvent(new CustomEvent('jxui:linked:sendall'));"
>
&laquo; Remove all
</button>
</div>
</div>

96
docs/components/ui/LinkedList/LinkedList.css Normal file
View file

@ -0,0 +1,96 @@
@scope (#linkedlist-demo) {
:scope {
position: relative;
display: block;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
height: 360px;
margin: 0 auto;
}
:scope > div {
width: 100%;
margin: 0 1rem;
}
.ui-linkedlist {
padding: 0px;
background-color: rgb(255 255 255);
overscroll-behavior: contain;
overflow-y: scroll;
list-style-type: none;
height: 16rem;
margin: 0px;
border: 1px solid rgb(128 128 128);
border-radius: 0.25rem;
font-size: 0.85rem;
}
.ui-linkedlist li {
cursor: pointer;
display: flex;
padding: 0.25rem 1rem;
align-items: center;
}
.ui-linkedlist li[disabled] {
color: rgb(156 156 156);
cursor: default;
}
.ui-linkedlist li:hover {
background-color: rgb(243 244 246);
}
.ui-linkedlist input[type="checkbox"] {
margin-right: 0.5rem;
}
label {
display: inline-block;
font-weight: bold;
background-color: white;
padding: 0.25rem 2rem;
border: 1px solid rgb(128 128 128);
border-radius: 0.25rem 0.25rem 0 0;
font-size: 0.7rem;
margin-bottom: -1px;
}
button {
margin-top: 0.5rem;
display: inline-flex;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
align-items: center;
justify-content: center;
}
button > :not([hidden]) ~ :not([hidden]) {
margin-left: 0.25rem;
}
button {
white-space: nowrap;
border-radius: 0.25rem;
border: 1px solid transparent;
background-color: rgb(229 231 235);
padding: 0.5rem 0.75rem;
text-align: center;
font-size: 0.75rem;
line-height: 1rem;
}
button:hover {
border-color: rgb(219 234 254);
background-color: rgb(243 244 246);
}
button:focus {
background-color: rgb(229 231 235);
outline-offset: 1px;
outline-color: #3b82f6;
}
@media (min-width: 640px) {
button {
padding: 0.25rem 0.5rem;
}
}
button.select-all {
float: right;
}
}

131
docs/components/ui/Menu/DemoCSS.jinja Normal file
View file

@ -0,0 +1,131 @@
{% filter markdown %}{% raw %}
```css
@scope (#menu-demo) {
:scope {
position: relative;
display: block;
padding: 2rem 0.5rem 0;
height: 300px;
margin: 0 auto;
}
.ui-menubutton {
border-radius: 0.25rem;
border-width: 1px;
background-color: rgb(0 0 0 / 0.1);
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem;
padding-right: 1rem;
font-weight: 600;
color: white;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
width: fit-content;
margin: 0 auto;
}
.ui-menubutton:hover {
background-color: rgb(0 0 0 / 0.2);
}
.ui-menubutton .icon {
margin-left: 0.25rem;
}
.group:not([hidden]) ~ .group:not([hidden]) {
border-top: 1px solid #d1d5db;
}
.ui-menu {
margin-top: 4px;
padding: 8px 0;
border-radius: 8px;
width: 400px;
background-color: #ffffff;
box-shadow: 0 1px 3px 4px rgba(0, 0, 0, 0.2);
overflow: visible;
font-size: 0.9rem;
font-weight: 400;
transition: all 0.2s allow-discrete;
/* Final state of the exit animation */
opacity: 0;
transform: translateY(-1rem);
}
.ui-menu:popover-open {
opacity: 1;
transform: translateY(0);
}
/* Needs to be after the previous .ui-menu:popover-open rule
to take effect, as the specificity is the same */
@starting-style {
.ui-menu:popover-open {
opacity: 0;
transform: translateY(-1rem);
}
}
.ui-menu:focus {
outline: none;
}
.ui-menu .ui-menu {
position: absolute;
margin: 0 0 0 -4px;
width: 300px;
z-index: 1;
transition: opacity 0.2s allow-discrete;
}
.ui-menu * {
user-select: none;
}
.ui-menuitem {
display: flex;
height: 40px;
padding-left: 24px;
padding-right: 24px;
align-items: center;
justify-items: flex-start;
line-height: 40px;
color: #000000;
background-color: #ffffff;
cursor: default;
user-select: none;
position: relative;
text-align: left;
}
.ui-menuitem.ui-selected {
background-color: #f2e7e4;
}
.ui-menuitem.ui-disabled {
color: #5f6368;
}
.ui-menuitem > .icon {
font-size: 1rem;
width: 24px;
text-align: left;
}
.ui-menuitem.ui-disabled > .icon {
color: #aca6a7;
}
.ui-menuitem > a {
flex-grow: 1;
}
.ui-menuitem > kbd {
visibility: hidden;
margin-left: auto;
font-size: 0.9rem;
font-family: inherit;
text-align: right;
color: #524f50;
}
.ui-menuitem:not(.ui-disabled):hover > kbd {
visibility: visible;
}
.ui-menuitem > .arrow {
margin-left: auto;
font-size: 0.7rem;
text-align: right;
}
}
```
{% endraw %}{% endfilter %}

89
docs/components/ui/Menu/DemoHTML.jinja Normal file
View file

@ -0,0 +1,89 @@
{% filter markdown %}{% raw %}
```html+jinja
<MenuButton id="menu-demo-btn" target="menu-demo-menu">
Menu <i class="icon">keyboard_arrow_down</i>
</MenuButton>
<Menu id="menu-demo-menu" anchor="menu-demo-btn" anchor-to="bottom end">
<div class="group">
<MenuItem>
<i class="icon">tab</i>
<a>New tab</a>
<kbd>Ctrl+T</kbd>
</MenuItem>
<MenuItem>
<i class="icon">new_window</i>
<a>New window</a>
<kbd>Ctrl+N</kbd>
</MenuItem>
<MenuItem disabled>
<i class="icon">fingerprint_off</i>
<a>Disabled item</a>
<kbd>Ctrl+Shift+N</kbd>
</MenuItem>
</div>
<div class="group">
<MenuItem>
<i class="icon">download</i>
<a>Downloads</a>
<kbd>Ctrl+J</kbd>
</MenuItem>
<MenuItemSub id="bookmarks-item">
<i class="icon">bookmarks</i>
<a>Bookmarks and lists</a>
<span class="icon arrow">keyboard_arrow_right</span>
<Menu anchor="bookmarks-item" anchor_to="right start">
<div class="group">
<MenuItem>
<i class="icon">bookmark_add</i>
<a>Bookmark this tab...</a>
<kbd>Ctrl+D</kbd>
</MenuItem>
<MenuItem>
<i class="icon">bookmarks</i>
<a>Bookmark all tabs...</a>
<kbd>Ctrl+Shift+D</kbd>
</MenuItem>
</div>
<div class="group">
<MenuItem>
<i class="icon">toolbar</i>
<a>Hide bookmarks bar</a>
<kbd>Ctrl+Shift+B</kbd>
</MenuItem>
<MenuItem>
<i class="icon">bookmarks</i>
<a>Show all bookmarks</a>
</MenuItem>
<MenuItem>
<i class="icon">bookmark_manager</i>
<a>Bookmark manager</a>
<kbd>Ctrl+Shift+O</kbd>
</MenuItem>
</div>
</Menu>
</MenuItemSub>
</div>
<div class="group">
<MenuItem>
<i class="icon">print</i>
<a>Print...</a>
<kbd>Ctrl+P</kbd>
</MenuItem>
<MenuItem>
<i class="icon">help</i>
<a>Help</a>
</MenuItem>
<MenuItem>
<i class="icon">settings</i>
<a>Settings</a>
</MenuItem>
<MenuItem>
<i class="icon">exit_to_app</i>
<a>Exit</a>
</MenuItem>
</div>
</Menu>
```
{% endraw %}{% endfilter %}

94
docs/components/ui/Menu/DemoResult.jinja Normal file
View file

@ -0,0 +1,94 @@
{#css ui/Menu/Menu.css #}
<div class="bg-cover"
style="background-image:linear-gradient(to right, rgba(244,114,182, 0.9), rgba(219,39,119, 0.9))"
data-md-skip
></div>
<div id="menu-demo" data-md-skip>
<MenuButton id="menu-demo-btn" target="menu-demo-menu">
Menu <i class="icon">keyboard_arrow_down</i>
</MenuButton>
<Menu id="menu-demo-menu" anchor="menu-demo-btn" anchor-to="bottom end">
<div class="group">
<MenuItem>
<i class="icon">tab</i>
<a>New tab</a>
<kbd>Ctrl+T</kbd>
</MenuItem>
<MenuItem>
<i class="icon">new_window</i>
<a>New window</a>
<kbd>Ctrl+N</kbd>
</MenuItem>
<MenuItem disabled>
<i class="icon">fingerprint_off</i>
<a>Disabled item</a>
<kbd>Ctrl+Shift+N</kbd>
</MenuItem>
</div>
<div class="group">
<MenuItem>
<i class="icon">download</i>
<a>Downloads</a>
<kbd>Ctrl+J</kbd>
</MenuItem>
<MenuItemSub id="bookmarks-item">
<i class="icon">bookmarks</i>
<a>Bookmarks and lists</a>
<span class="icon arrow">keyboard_arrow_right</span>
<Menu anchor="bookmarks-item" anchor_to="right start">
<div class="group">
<MenuItem>
<i class="icon">bookmark_add</i>
<a>Bookmark this tab...</a>
<kbd>Ctrl+D</kbd>
</MenuItem>
<MenuItem>
<i class="icon">bookmarks</i>
<a>Bookmark all tabs...</a>
<kbd>Ctrl+Shift+D</kbd>
</MenuItem>
</div>
<div class="group">
<MenuItem>
<i class="icon">toolbar</i>
<a>Hide bookmarks bar</a>
<kbd>Ctrl+Shift+B</kbd>
</MenuItem>
<MenuItem>
<i class="icon">bookmarks</i>
<a>Show all bookmarks</a>
</MenuItem>
<MenuItem>
<i class="icon">bookmark_manager</i>
<a>Bookmark manager</a>
<kbd>Ctrl+Shift+O</kbd>
</MenuItem>
</div>
</Menu>
</MenuItemSub>
</div>
<div class="group">
<MenuItem>
<i class="icon">print</i>
<a>Print...</a>
<kbd>Ctrl+P</kbd>
</MenuItem>
<MenuItem>
<i class="icon">help</i>
<a>Help</a>
</MenuItem>
<MenuItem>
<i class="icon">settings</i>
<a>Settings</a>
</MenuItem>
<MenuItem>
<i class="icon">exit_to_app</i>
<a>Exit</a>
</MenuItem>
</div>
</Menu>
</div>

127
docs/components/ui/Menu/Menu.css Normal file
View file

@ -0,0 +1,127 @@
@scope (#menu-demo) {
:scope {
position: relative;
display: block;
padding: 2rem 0.5rem 0;
height: 200px;
margin: 0 auto;
}
.ui-menubutton {
border-radius: 0.25rem;
border-width: 1px;
background-color: rgb(0 0 0 / 0.1);
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem;
padding-right: 1rem;
font-weight: 600;
color: white;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
width: fit-content;
margin: 0 auto;
}
.ui-menubutton:hover {
background-color: rgb(0 0 0 / 0.2);
}
.ui-menubutton .icon {
margin-left: 0.25rem;
}
.group:not([hidden]) ~ .group:not([hidden]) {
border-top: 1px solid #d1d5db;
}
.ui-menu {
margin-top: 4px;
padding: 8px 0;
border-radius: 8px;
width: 400px;
background-color: #ffffff;
box-shadow: 0 1px 3px 4px rgba(0, 0, 0, 0.2);
overflow: visible;
font-size: 0.9rem;
font-weight: 400;
transition: all 0.2s allow-discrete;
/* Final state of the exit animation */
opacity: 0;
transform: translateY(-1rem);
}
.ui-menu:popover-open {
opacity: 1;
transform: translateY(0);
}
/* Needs to be after the previous .ui-menu:popover-open rule
to take effect, as the specificity is the same */
@starting-style {
.ui-menu:popover-open {
opacity: 0;
transform: translateY(-1rem);
}
}
.ui-menu:focus {
outline: none;
}
.ui-menu .ui-menu {
position: absolute;
margin: 0 0 0 -4px;
width: 300px;
z-index: 1;
transition: opacity 0.2s allow-discrete;
}
.ui-menu * {
user-select: none;
}
.ui-menuitem {
display: flex;
height: 40px;
padding-left: 24px;
padding-right: 24px;
align-items: center;
justify-items: flex-start;
line-height: 40px;
color: #000000;
background-color: #ffffff;
cursor: default;
user-select: none;
position: relative;
text-align: left;
}
.ui-menuitem.ui-selected {
background-color: #f2e7e4;
}
.ui-menuitem.ui-disabled {
color: #5f6368;
}
.ui-menuitem > .icon {
font-size: 1rem;
width: 24px;
text-align: left;
}
.ui-menuitem.ui-disabled > .icon {
color: #aca6a7;
}
.ui-menuitem > a {
flex-grow: 1;
}
.ui-menuitem > kbd {
visibility: hidden;
margin-left: auto;
font-size: 0.9rem;
font-family: inherit;
text-align: right;
color: #524f50;
}
.ui-menuitem:not(.ui-disabled):hover > kbd {
visibility: visible;
}
.ui-menuitem > .arrow {
margin-left: auto;
font-size: 0.7rem;
text-align: right;
}
}

96
docs/components/ui/Popover/DemoCSS.jinja Normal file
View file

@ -0,0 +1,96 @@
{% filter markdown %}{% raw %}
```css
.ui-popbutton {
border-radius: 0.25rem;
border-width: 1px;
background-color: rgb(0 0 0 / 0.1);
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem;
padding-right: 1rem;
font-weight: 600;
color: white;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.ui-popbutton:hover {
background-color: rgb(0 0 0 / 0.2);
}
[popover] {
background-color: Canvas;
border-radius: 0.25rem;
border: 1px solid #666;
color: CanvasText;
height: fit-content;
margin: 0.75rem auto 0;
padding: 1rem;
width: 15rem;
overflow: visible;
transition: all 0.2s allow-discrete;
/* Final state of the exit animation */
opacity: 0;
transform: translateY(-3rem);
}
[popover]:popover-open {
opacity: 1;
transform: translateY(0);
}
/* Needs to be after the previous [popover]:popover-open rule
to take effect, as the specificity is the same */
@starting-style {
[popover]:popover-open {
opacity: 0;
transform: translateY(-3rem);
}
}
/* Transition for the popover's backdrop */
[popover]::backdrop {
transition: all 0.2s allow-discrete;
/* Final state of the exit animation */
background-color: rgb(0 0 0 / 0%);
}
[popover]:popover-open::backdrop {
background-color: rgb(0 0 0 / 15%);
}
/* The nesting selector (&) cannot represent pseudo-elements
so this starting-style rule cannot be nested */
@starting-style {
[popover]:popover-open::backdrop {
background-color: rgb(0 0 0 / 0%);
}
}
[popover] h1 {
font-weight: bold;
margin-bottom: 0.75rem;
}
[popover] label {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.75rem;
line-height: 1rem;
}
[popover] input {
margin-left: auto;
width: 66.666667%;
border-radius: 0.25rem;
border-width: 1px;
padding: 0.25rem;
font-size: 0.75rem;
line-height: 1rem;
}
[popover] svg.arrow {
position: absolute;
top: -4px;
left: 50%;
z-index: 10;
display: block;
transform: rotate(180deg);
border-color: rgb(255 255 255);
fill: white;
}
```
{% endraw %}{% endfilter %}

23
docs/components/ui/Popover/DemoHTML.jinja Normal file
View file

@ -0,0 +1,23 @@
{% filter markdown %}{% raw %}
```html+jinja
<PopButton id="pop-demo-btn" target="pop-demo-pop">Open popover</PopButton>
<Popover id="pop-demo-pop" anchor="pop-demo-btn" anchor-to="bottom">
<h1>Edit Dimensions</h1>
<fieldset class="space-y-2">
<label>
<span>Width</span>
<input type="text" name="width" value="340px">
</label>
<label>
<span>Height</span>
<input type="text" name="height" value="25px">
</label>
</fieldset>
<svg class="arrow" width="10" height="5" viewBox="0 0 30 10" aria-hidden="true">
<polygon points="0,0 30,0 15,10"></polygon>
</svg>
</Popover>
```
{% endraw %}{% endfilter %}

27
docs/components/ui/Popover/DemoResult.jinja Normal file
View file

@ -0,0 +1,27 @@
{#css ui/Popover/Popover.css #}
<div class="bg-cover"
style="background-image:linear-gradient(to right, rgba(217,70,239, 0.9), rgba(147,51,234, 0.9))"
data-md-skip
></div>
<div id="pop-demo" data-md-skip>
<PopButton id="pop-demo-btn" target="pop-demo-pop">Open popover</PopButton>
<Popover id="pop-demo-pop" anchor="pop-demo-btn" anchor-to="bottom">
<h1 data-outline-skip=>Edit Dimensions</h1>
<fieldset class="space-y-2">
<label>
<span>Width</span>
<input type="text" name="width" value="340px">
</label>
<label>
<span>Height</span>
<input type="text" name="height" value="25px">
</label>
</fieldset>
<svg class="arrow" width="10" height="5" viewBox="0 0 30 10" aria-hidden="true">
<polygon points="0,0 30,0 15,10"></polygon>
</svg>
</Popover>
</div>

101
docs/components/ui/Popover/Popover.css Normal file
View file

@ -0,0 +1,101 @@
@scope (#pop-demo) {
:scope {
position: relative;
display: block;
padding: 2rem 0.5rem 0;
height: 300px;
margin: 0 auto;
text-align: center;
}
.ui-popbutton {
border-radius: 0.25rem;
border-width: 1px;
background-color: rgb(0 0 0 / 0.1);
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem;
padding-right: 1rem;
font-weight: 600;
color: white;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.ui-popbutton:hover {
background-color: rgb(0 0 0 / 0.2);
}
[popover] {
background-color: Canvas;
border-radius: 0.25rem;
border: 1px solid #666;
color: CanvasText;
height: fit-content;
margin: 0.75rem auto 0;
padding: 1rem;
width: 15rem;
overflow: visible;
transition: all 0.2s allow-discrete;
/* Final state of the exit animation */
opacity: 0;
transform: translateY(-3rem);
}
[popover]:popover-open {
opacity: 1;
transform: translateY(0);
}
/* Needs to be after the previous [popover]:popover-open rule
to take effect, as the specificity is the same */
@starting-style {
[popover]:popover-open {
opacity: 0;
transform: translateY(-3rem);
}
}
/* Transition for the popover's backdrop */
[popover]::backdrop {
/* Final state of the exit animation */
background-color: rgb(0 0 0 / 0%);
transition: all 0.2s allow-discrete;
}
[popover]:popover-open::backdrop {
background-color: rgb(0 0 0 / 15%);
}
@starting-style {
[popover]:popover-open::backdrop {
background-color: rgb(0 0 0 / 0%);
}
}
[popover] h1 {
font-weight: bold;
margin-bottom: 0.75rem;
}
[popover] label {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.75rem;
line-height: 1rem;
}
[popover] input {
margin-left: auto;
width: 66.666667%;
border-radius: 0.25rem;
border-width: 1px;
padding: 0.25rem;
font-size: 0.75rem;
line-height: 1rem;
}
[popover] svg.arrow {
position: absolute;
top: -4px;
left: 50%;
z-index: 10;
display: block;
transform: rotate(180deg);
border-color: rgb(255 255 255);
fill: white;
}
}

59
docs/components/ui/Tabs/DemoCSS.jinja Normal file
View file

@ -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 %}

23
docs/components/ui/Tabs/DemoHTML.jinja Normal file
View file

@ -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 %}

28
docs/components/ui/Tabs/DemoResult.jinja Normal file
View file

@ -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>

28
docs/components/ui/Tabs/ManualHTML.jinja Normal file
View file

@ -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 %}

33
docs/components/ui/Tabs/ManualResult.jinja Normal file
View file

@ -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>

35
docs/components/ui/Tabs/SelectHTML.jinja Normal file
View file

@ -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 %}

40
docs/components/ui/Tabs/SelectResult.jinja Normal file
View file

@ -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>

126
docs/components/ui/Tabs/Tabs.css Normal file
View file

@ -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;
}
}

28
docs/components/ui/Tabs/VerticalHTML.jinja Normal file
View file

@ -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 %}

33
docs/components/ui/Tabs/VerticalResult.jinja Normal file
View file

@ -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>