shaamilahmed/Htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initialize template shell and basic components

Browse Source
This commit is contained in:
Enciphered
2026-05-30 01:09:14 +05:00
commit f42a5f05b2
55 changed files with 13107 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/components/date_time.html
+392
View File
@@ -0,0 +1,392 @@
{% extends "base.html" %}
{% block title %}Date & Time Pickers - Design System Wiki{% endblock %}
{% block content %}
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
<!-- Left Navigation Sidebar -->
{% include "components/sidebar.html" %}
<!-- Main Content -->
<div class="flex-1 space-y-8">
<!-- Header -->
<div class="pb-6 border-b border-border">
<span class="text-xs font-semibold text-indigo-400">Pickers</span>
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Date & Time Pickers</h1>
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
Custom popup calendars and hour/minute scroll menus constructed using DOM components to prevent relying on native browser-system calendar windows. Designed for optimal styling consistency.
</p>
</div>
<!-- Section Pickers -->
<section class="space-y-4">
<h2 class="text-lg font-bold text-slate-200">Date & Time Popovers</h2>
<div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
<!-- Tab Headers -->
<div class="flex border-b border-border/60 pb-1.5">
<button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'picker-sandbox')">Interactive Demo</button>
<button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'picker-code')">HTML Markup</button>
</div>
<!-- Demo Viewport -->
<div id="picker-sandbox" class="wiki-pane grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-lg py-2">
<!-- Date Picker -->
<div class="space-y-2">
<label class="block text-xs font-semibold text-slate-405">Date Picker</label>
<div class="custom-datepicker relative inline-block w-full" id="wiki-datepicker" data-year="2026" data-month="4">
<input type="hidden" name="wiki_date" class="datepicker-value" value="2026-05-30">
<button type="button" class="datepicker-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200 hover:bg-secondary transition focus:outline-none focus:ring-2 focus:ring-sky-500">
<span class="datepicker-label flex items-center gap-2">
<svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
<span class="datepicker-text">May 30, 2026</span>
</span>
<svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
</button>
<div class="datepicker-popover absolute left-0 z-20 mt-2 w-[270px] p-3 rounded-2xl border border-border bg-popover shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200 hidden">
<div class="flex items-center justify-between mb-3.5">
<button type="button" class="datepicker-prev p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white transition">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
</button>
<span class="datepicker-month-year text-xs font-bold text-slate-200">May 2026</span>
<button type="button" class="datepicker-next p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white transition">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
</button>
</div>
<div class="grid grid-cols-7 gap-1 text-center text-[10px] font-bold text-slate-500 mb-2">
<span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span>
</div>
<div class="datepicker-days grid grid-cols-7 gap-1 text-center"></div>
</div>
</div>
</div>
<!-- Time Picker -->
<div class="space-y-2">
<label class="block text-xs font-semibold text-slate-405">Time Picker</label>
<div class="custom-timepicker relative inline-block w-full" id="wiki-timepicker">
<input type="hidden" name="wiki_time" class="timepicker-value" value="12:00 PM">
<button type="button" class="timepicker-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200 hover:bg-secondary transition focus:outline-none focus:ring-2 focus:ring-sky-500">
<span class="timepicker-label flex items-center gap-2">
<svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<span class="timepicker-text">12:00 PM</span>
</span>
<svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
</button>
<div class="timepicker-popover absolute right-0 sm:left-0 z-20 mt-2 w-[230px] p-3 rounded-2xl border border-border bg-popover shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200 hidden">
<div class="flex gap-2 justify-center items-center">
<div class="flex flex-col items-center">
<span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Hr</span>
<div class="h-32 overflow-y-auto w-12 text-center rounded-lg border border-border bg-popover scrollbar-none timepicker-col-hours"></div>
</div>
<span class="text-slate-500 font-bold self-end mb-12">:</span>
<div class="flex flex-col items-center">
<span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Min</span>
<div class="h-32 overflow-y-auto w-12 text-center rounded-lg border border-border bg-popover scrollbar-none timepicker-col-minutes"></div>
</div>
<div class="flex flex-col items-center ml-1">
<span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Am/Pm</span>
<div class="flex flex-col gap-1 w-12">
<button type="button" class="timepicker-ampm-btn py-1.5 rounded-lg text-xs font-bold hover:bg-secondary transition text-muted-foreground">AM</button>
<button type="button" class="timepicker-ampm-btn py-1.5 rounded-lg text-xs font-bold hover:bg-secondary transition text-muted-foreground">PM</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Code Snippet Area -->
<div id="picker-code" class="wiki-pane hidden space-y-4">
<!-- Date Picker Code -->
<div class="space-y-2">
<span class="text-xs font-bold text-muted-foreground block">Date Picker HTML Structure</span>
<div class="relative group">
<button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-muted-foreground/90 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
Copy Date Picker Code
</button>
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- Custom Date Picker Container
- class "custom-datepicker": required for JavaScript target binding
- data-year / data-month: initializes the calendar viewport (month is 0-indexed: 4 = May) --&gt;
&lt;div class="custom-datepicker relative inline-block w-full" id="unique-datepicker-id" data-year="2026" data-month="4"&gt;
&lt;!-- Hidden input that holds the actual selected date (YYYY-MM-DD) to submit with the form --&gt;
&lt;input type="hidden" name="date_value" class="datepicker-value" value="2026-05-30"&gt;
&lt;!-- Trigger Button: opens/closes the dropdown calendar popover --&gt;
&lt;button type="button" class="datepicker-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200"&gt;
&lt;span class="datepicker-label flex items-center gap-2"&gt;
&lt;svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"&gt;
&lt;path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/&gt;
&lt;/svg&gt;
&lt;!-- text-label: will be dynamically updated by components.js when a day is selected --&gt;
&lt;span class="datepicker-text"&gt;Pick a date&lt;/span&gt;
&lt;/span&gt;
&lt;svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"&gt;&lt;polyline points="6 9 12 15 18 9"/&gt;&lt;/svg&gt;
&lt;/button&gt;
&lt;!-- Popover: holds month controls and calendar grids --&gt;
&lt;div class="datepicker-popover absolute left-0 z-20 mt-2 w-[270px] p-3 rounded-2xl border border-border bg-popover shadow-2xl hidden"&gt;
&lt;!-- Navigation Controls --&gt;
&lt;div class="flex items-center justify-between mb-3.5"&gt;
&lt;button type="button" class="datepicker-prev p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white"&gt;
&lt;svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"&gt;&lt;polyline points="15 18 9 12 15 6"/&gt;&lt;/svg&gt;
&lt;/button&gt;
&lt;!-- Current visible Month/Year label --&gt;
&lt;span class="datepicker-month-year text-xs font-bold text-slate-200"&gt;&lt;/span&gt;
&lt;button type="button" class="datepicker-next p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white"&gt;
&lt;svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"&gt;&lt;polyline points="9 18 15 12 9 6"/&gt;&lt;/svg&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;!-- Weekday column labels --&gt;
&lt;div class="grid grid-cols-7 gap-1 text-center text-[10px] font-bold text-slate-500 mb-2"&gt;
&lt;span&gt;Su&lt;/span&gt;&lt;span&gt;Mo&lt;/span&gt;&lt;span&gt;Tu&lt;/span&gt;&lt;span&gt;We&lt;/span&gt;&lt;span&gt;Th&lt;/span&gt;&lt;span&gt;Fr&lt;/span&gt;&lt;span&gt;Sa&lt;/span&gt;
&lt;/div&gt;
&lt;!-- Day Grid (filled dynamically with days by components.js on load) --&gt;
&lt;div class="datepicker-days grid grid-cols-7 gap-1 text-center"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
<!-- Time Picker Code -->
<div class="space-y-2">
<span class="text-xs font-bold text-muted-foreground block">Time Picker HTML Structure</span>
<div class="relative group">
<button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
Copy Time Picker Code
</button>
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- Custom Time Picker Container
- class "custom-timepicker": required for JavaScript target binding --&gt;
&lt;div class="custom-timepicker relative inline-block w-full" id="unique-timepicker-id"&gt;
&lt;!-- Hidden input holds selected value (e.g., "12:00 PM") for form submission --&gt;
&lt;input type="hidden" name="time_value" class="timepicker-value" value="12:00 PM"&gt;
&lt;!-- Trigger Button --&gt;
&lt;button type="button" class="timepicker-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200"&gt;
&lt;span class="timepicker-label flex items-center gap-2"&gt;
&lt;svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"&gt;
&lt;path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/&gt;
&lt;/svg&gt;
&lt;!-- Time text label updated dynamically on pick --&gt;
&lt;span class="timepicker-text"&gt;12:00 PM&lt;/span&gt;
&lt;/span&gt;
&lt;svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"&gt;&lt;polyline points="6 9 12 15 18 9"/&gt;&lt;/svg&gt;
&lt;/button&gt;
&lt;!-- Time Picker Dropdown Menu --&gt;
&lt;div class="timepicker-popover absolute left-0 z-20 mt-2 w-[230px] p-3 rounded-2xl border border-border bg-popover shadow-2xl hidden"&gt;
&lt;div class="flex gap-2 justify-center items-center"&gt;
&lt;!-- Hours Column (filled with &lt;button&gt;s 1 to 12 dynamically by components.js) --&gt;
&lt;div class="flex flex-col items-center"&gt;
&lt;span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider"&gt;Hr&lt;/span&gt;
&lt;div class="h-32 overflow-y-auto w-12 text-center rounded-lg border border-border bg-popover scrollbar-none timepicker-col-hours"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;span class="text-slate-500 font-bold self-end mb-12"&gt;:&lt;/span&gt;
&lt;!-- Minutes Column (filled with &lt;button&gt;s 00 to 55 in 5m steps dynamically) --&gt;
&lt;div class="flex flex-col items-center"&gt;
&lt;span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider"&gt;Min&lt;/span&gt;
&lt;div class="h-32 overflow-y-auto w-12 text-center rounded-lg border border-border bg-popover scrollbar-none timepicker-col-minutes"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- AM/PM Selector --&gt;
&lt;div class="flex flex-col items-center ml-1"&gt;
&lt;span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider"&gt;Am/Pm&lt;/span&gt;
&lt;div class="flex flex-col gap-1 w-12"&gt;
&lt;button type="button" class="timepicker-ampm-btn py-1.5 rounded-lg text-xs font-bold hover:bg-secondary transition text-muted-foreground"&gt;AM&lt;/button&gt;
&lt;button type="button" class="timepicker-ampm-btn py-1.5 rounded-lg text-xs font-bold hover:bg-secondary transition text-muted-foreground"&gt;PM&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- Global JS Bindings Documentation -->
<section class="space-y-6 border-t border-border/60 pt-6">
<div>
<h2 class="text-lg font-bold text-slate-200">How the Global Date Picker JS Works</h2>
<p class="text-xs text-muted-foreground leading-relaxed mt-1">
The custom date picker relies on the following classes and datasets to manage month navigation and update values:
</p>
</div>
<div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
<table class="w-full border-collapse text-left text-xs">
<thead>
<tr class="border-b border-border text-muted-foreground font-bold">
<th class="pb-2.5 w-1/3">Selector / Class</th>
<th class="pb-2.5 w-1/6">Type</th>
<th class="pb-2.5">Behavior & Purpose</th>
</tr>
</thead>
<tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.custom-datepicker</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Wraps the date picker component. Must declare <code>data-year</code> (e.g. 2026) and <code>data-month</code> (0-indexed, 0 = Jan, 4 = May) to initialize the viewport.
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-value</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Hidden input field (<code>&lt;input type="hidden"&gt;</code>) storing the ISO date value (YYYY-MM-DD) for form submission.
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-trigger</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Button clicked by user to open or close the calendar popover dropdown.
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-text</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Target text element updated dynamically to display the formatted selected date (e.g., "May 30, 2026").
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-popover</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Floating container containing the month navigation buttons and days grids. Starts as <code>hidden</code>.
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-prev / .datepicker-next</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Navigational buttons to decrement or increment the active month.
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-month-year</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Display title label updated dynamically with current month and year (e.g. "May 2026").
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-days</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Calendar day grid container dynamically populated with clickable day buttons by the JS engine.
</td>
</tr>
</tbody>
</table>
</div>
<div>
<h2 class="text-lg font-bold text-slate-200 mt-4">How the Global Time Picker JS Works</h2>
<p class="text-xs text-muted-foreground leading-relaxed mt-1">
The custom time picker scopes dynamic lists of hours and minutes inside scrollable blocks using the following bindings:
</p>
</div>
<div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
<table class="w-full border-collapse text-left text-xs">
<thead>
<tr class="border-b border-border text-muted-foreground font-bold">
<th class="pb-2.5 w-1/3">Selector / Class</th>
<th class="pb-2.5 w-1/6">Type</th>
<th class="pb-2.5">Behavior & Purpose</th>
</tr>
</thead>
<tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.custom-timepicker</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Wraps the time picker markup structure.
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-value</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Hidden input field storing the active text time (e.g. "12:00 PM") for forms.
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-trigger</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Clickable button to open the scroll dropdown.
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-text</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Text node inside trigger displaying the formatted time.
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-popover</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Dropdown overlay panel displaying columns for hour list, minute list, and AM/PM buttons.
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-col-hours / .timepicker-col-minutes</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Containers populated automatically with hourly buttons (1-12) and minute buttons (00-55).
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-ampm-btn</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Buttons representing "AM" and "PM" choices toggled on click.
</td>
</tr>
</tbody>
</table>
</div>
<div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
<span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
<p class="text-slate-400 leading-normal">
You can customize the styling of the trigger buttons, chevrons, icons, popover cards, borders, shadows, backgrounds, and the active option buttons (which receive <code>.bg-indigo-600</code>). Ensure you preserve the classes and attributes listed above so the DOM-generation functions and trigger listeners in <code>components.js</code> execute without error.
</p>
</div>
</section>
</div>
</div>
<script>
function toggleWikiTabs(btn, paneId) {
const card = btn.closest('.border-border');
if (!card) return;
card.querySelectorAll('button').forEach(b => {
b.classList.remove('border-sky-500', 'text-sky-400');
b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
});
btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
btn.classList.add('border-sky-500', 'text-sky-400');
card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
const target = card.querySelector('#' + paneId);
if (target) target.classList.remove('hidden');
}
</script>
{% endblock %}