penguinui is now in the root dir in penguinui-components/

penguinui-components/accordion/accordion-with-no-background.html

@@ -0,0 +1,69 @@
+<div class="w-full divide-y divide-outline text-on-surface dark:divide-outline-dark dark:text-on-surface-dark">
+    <div x-data="{ isExpanded: false }">
+        <button id="controlsAccordionItemOne" type="button"
+            class="flex w-full items-center justify-between gap-4 py-4 text-left underline-offset-2 focus-visible:underline focus-visible:outline-hidden"
+            aria-controls="accordionItemOne" x-on:click="isExpanded = ! isExpanded"
+            x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold'  : 'text-on-surface dark:text-on-surface-dark font-medium'"
+            x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
+            What browsers are supported?
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
+                stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
+                x-bind:class="isExpanded  ?  'rotate-180'  :  ''">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+        <div x-cloak x-show="isExpanded" id="accordionItemOne" role="region" aria-labelledby="controlsAccordionItemOne"
+            x-collapse>
+            <div class="pb-4 text-sm sm:text-base text-pretty">
+                Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge. Check our <a
+                    href="#" class="underline underline-offset-2 text-primary dark:text-primary-dark">documentation</a>
+                for additional information.
+            </div>
+        </div>
+    </div>
+    <div x-data="{ isExpanded: false }">
+        <button id="controlsAccordionItemTwo" type="button"
+            class="flex w-full items-center justify-between gap-4 py-4 text-left underline-offset-2 focus-visible:underline focus-visible:outline-hidden"
+            aria-controls="accordionItemTwo" x-on:click="isExpanded = ! isExpanded"
+            x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold'  : 'text-on-surface dark:text-on-surface-dark font-medium'"
+            x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
+            How can I contact customer support?
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
+                stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
+                x-bind:class="isExpanded  ?  'rotate-180'  :  ''">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+        <div x-cloak x-show="isExpanded" id="accordionItemTwo" role="region" aria-labelledby="controlsAccordionItemTwo"
+            x-collapse>
+            <div class="pb-4 text-sm sm:text-base text-pretty">
+                Reach out to our dedicated support team via email at <a href="#"
+                    class="underline underline-offset-2 text-primary dark:text-primary-dark">support@example.com</a> or
+                call our toll-free number at 1-800-123-4567 during business hours.
+            </div>
+        </div>
+    </div>
+    <div x-data="{ isExpanded: false }">
+        <button id="controlsAccordionItemThree" type="button"
+            class="flex w-full items-center justify-between gap-4 py-4 text-left underline-offset-2 focus-visible:underline focus-visible:outline-hidden"
+            aria-controls="accordionItemThree" x-on:click="isExpanded = ! isExpanded"
+            x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold'  : 'text-on-surface dark:text-on-surface-dark font-medium'"
+            x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
+            What is the refund policy?
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
+                stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
+                x-bind:class="isExpanded  ?  'rotate-180'  :  ''">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+        <div x-cloak x-show="isExpanded" id="accordionItemThree" role="region"
+            aria-labelledby="controlsAccordionItemThree" x-collapse>
+            <div class="pb-4 text-sm sm:text-base text-pretty">
+                Please refer to our <a href="#"
+                    class="underline underline-offset-2 text-primary dark:text-primary-dark">refund policy page</a> on
+                the website for detailed information regarding eligibility, timeframes, and the process for requesting a
+                refund.
+            </div>
+        </div>
+    </div>
+</div>

penguinui-components/accordion/default-accordion.html

@@ -0,0 +1,70 @@
+<div
+    class="w-full divide-y divide-outline overflow-hidden rounded-radius border border-outline bg-surface-alt/40 text-on-surface dark:divide-outline-dark dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark">
+    <div x-data="{ isExpanded: false }">
+        <button id="controlsAccordionItemOne" type="button"
+            class="flex w-full items-center justify-between gap-4 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
+            aria-controls="accordionItemOne" x-on:click="isExpanded = ! isExpanded"
+            x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold'  : 'text-on-surface dark:text-on-surface-dark font-medium'"
+            x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
+            What browsers are supported?
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
+                stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
+                x-bind:class="isExpanded  ?  'rotate-180'  :  ''">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+        <div x-cloak x-show="isExpanded" id="accordionItemOne" role="region" aria-labelledby="controlsAccordionItemOne"
+            x-collapse>
+            <div class="p-4 text-sm sm:text-base text-pretty">
+                Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge. Check our <a
+                    href="#" class="underline underline-offset-2 text-primary dark:text-primary-dark">documentation</a>
+                for additional information.
+            </div>
+        </div>
+    </div>
+    <div x-data="{ isExpanded: false }">
+        <button id="controlsAccordionItemTwo" type="button"
+            class="flex w-full items-center justify-between gap-4 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
+            aria-controls="accordionItemTwo" x-on:click="isExpanded = ! isExpanded"
+            x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold'  : 'text-on-surface dark:text-on-surface-dark font-medium'"
+            x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
+            How can I contact customer support?
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
+                stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
+                x-bind:class="isExpanded  ?  'rotate-180'  :  ''">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+        <div x-cloak x-show="isExpanded" id="accordionItemTwo" role="region" aria-labelledby="controlsAccordionItemTwo"
+            x-collapse>
+            <div class="p-4 text-sm sm:text-base text-pretty">
+                Reach out to our dedicated support team via email at <a href="#"
+                    class="underline underline-offset-2 text-primary dark:text-primary-dark">support@example.com</a> or
+                call our toll-free number at 1-800-123-4567 during business hours.
+            </div>
+        </div>
+    </div>
+    <div x-data="{ isExpanded: false }">
+        <button id="controlsAccordionItemThree" type="button"
+            class="flex w-full items-center justify-between gap-4 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
+            aria-controls="accordionItemThree" x-on:click="isExpanded = ! isExpanded"
+            x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold'  : 'text-on-surface dark:text-on-surface-dark font-medium'"
+            x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
+            What is the refund policy?
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
+                stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
+                x-bind:class="isExpanded  ?  'rotate-180'  :  ''">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+        <div x-cloak x-show="isExpanded" id="accordionItemThree" role="region"
+            aria-labelledby="controlsAccordionItemThree" x-collapse>
+            <div class="p-4 text-sm sm:text-base text-pretty">
+                Please refer to our <a href="#"
+                    class="underline underline-offset-2 text-primary dark:text-primary-dark">refund policy page</a> on
+                the website for detailed information regarding eligibility, timeframes, and the process for requesting a
+                refund.
+            </div>
+        </div>
+    </div>
+</div>

penguinui-components/accordion/single.open-accordion.html

@@ -0,0 +1,70 @@
+<div x-data="{ selectedAccordionItem: 'one' }"
+    class="w-full divide-y divide-outline overflow-hidden rounded-sm border border-outline bg-surface-alt/40 text-on-surface dark:divide-outline-dark dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark">
+    <div>
+        <button id="controlsAccordionItemOne" type="button"
+            class="flex w-full items-center justify-between gap-4 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
+            aria-controls="accordionItemOne" x-on:click="selectedAccordionItem = 'one'"
+            x-bind:class="selectedAccordionItem === 'one' ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold'  : 'text-on-surface dark:text-on-surface-dark font-medium'"
+            x-bind:aria-expanded="selectedAccordionItem === 'one' ? 'true' : 'false'">
+            What browsers are supported?
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
+                stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
+                x-bind:class="selectedAccordionItem === 'one'  ?  'rotate-180'  :  ''">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+        <div x-cloak x-show="selectedAccordionItem === 'one'" id="accordionItemOne" role="region"
+            aria-labelledby="controlsAccordionItemOne" x-collapse>
+            <div class="p-4 text-sm sm:text-base text-pretty">
+                Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge. Check our <a
+                    href="#" class="underline underline-offset-2 text-primary dark:text-primary-dark">documentation</a>
+                for additional information.
+            </div>
+        </div>
+    </div>
+    <div>
+        <button id="controlsAccordionItemTwo" type="button"
+            class="flex w-full items-center justify-between gap-4 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
+            aria-controls="accordionItemTwo" x-on:click="selectedAccordionItem = 'two'"
+            x-bind:class="selectedAccordionItem === 'two' ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold'  : 'text-on-surface dark:text-on-surface-dark font-medium'"
+            x-bind:aria-expanded="selectedAccordionItem === 'two' ? 'true' : 'false'">
+            How can I contact customer support?
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
+                stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
+                x-bind:class="selectedAccordionItem === 'two'  ?  'rotate-180'  :  ''">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+        <div x-cloak x-show="selectedAccordionItem === 'two'" id="accordionItemTwo" role="region"
+            aria-labelledby="controlsAccordionItemTwo" x-collapse>
+            <div class="p-4 text-sm sm:text-base text-pretty">
+                Reach out to our dedicated support team via email at <a href="#"
+                    class="underline underline-offset-2 text-primary dark:text-primary-dark">support@example.com</a> or
+                call our toll-free number at 1-800-123-4567 during business hours.
+            </div>
+        </div>
+    </div>
+    <div>
+        <button id="controlsAccordionItemThree" type="button"
+            class="flex w-full items-center justify-between gap-4 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
+            aria-controls="accordionItemThree" x-on:click="selectedAccordionItem = 'three'"
+            x-bind:class="selectedAccordionItem === 'three' ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold'  : 'text-on-surface dark:text-on-surface-dark font-medium'"
+            x-bind:aria-expanded="selectedAccordionItem === 'three' ? 'true' : 'false'">
+            What is the refund policy?
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
+                stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
+                x-bind:class="selectedAccordionItem === 'three'  ?  'rotate-180'  :  ''">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+        <div x-cloak x-show="selectedAccordionItem === 'three'" id="accordionItemThree" role="region"
+            aria-labelledby="controlsAccordionItemThree" x-collapse>
+            <div class="p-4 text-sm sm:text-base text-pretty">
+                Please refer to our <a href="#"
+                    class="underline underline-offset-2 text-primary dark:text-primary-dark">refund policy page</a> on
+                the website for detailed information regarding eligibility, timeframes, and the process for requesting a
+                refund.
+            </div>
+        </div>
+    </div>
+</div>

penguinui-components/accordion/split-accordion.html

@@ -0,0 +1,72 @@
+<div class="flex w-full flex-col gap-4 text-on-surface dark:text-on-surface-dark">
+    <div x-data="{ isExpanded: false }"
+        class="overflow-hidden rounded-radius border border-outline bg-surface-alt/40 dark:border-outline-dark dark:bg-surface-dark-alt/50">
+        <button id="controlsAccordionItemOne" type="button"
+            class="flex w-full items-center justify-between gap-2 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
+            aria-controls="accordionItemOne" x-on:click="isExpanded = ! isExpanded"
+            x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold'  : 'text-on-surface dark:text-on-surface-dark font-medium'"
+            x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
+            What browsers are supported?
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
+                stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
+                x-bind:class="isExpanded  ?  'rotate-180'  :  ''">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+        <div x-cloak x-show="isExpanded" id="accordionItemOne" role="region" aria-labelledby="controlsAccordionItemOne"
+            x-collapse>
+            <div class="p-4 text-sm sm:text-base text-pretty">
+                Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge. Check our <a
+                    href="#" class="underline underline-offset-2 text-primary dark:text-primary-dark">documentation</a>
+                for additional information.
+            </div>
+        </div>
+    </div>
+    <div x-data="{ isExpanded: false }"
+        class="overflow-hidden rounded-radius border border-outline bg-surface-alt/40 dark:border-outline-dark dark:bg-surface-dark-alt/50">
+        <button id="controlsAccordionItemTwo" type="button"
+            class="flex w-full items-center justify-between gap-2 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
+            aria-controls="accordionItemTwo" x-on:click="isExpanded = ! isExpanded"
+            x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold'  : 'text-on-surface dark:text-on-surface-dark font-medium'"
+            x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
+            How can I contact customer support?
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
+                stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
+                x-bind:class="isExpanded  ?  'rotate-180'  :  ''">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+        <div x-cloak x-show="isExpanded" id="accordionItemTwo" role="region" aria-labelledby="controlsAccordionItemTwo"
+            x-collapse>
+            <div class="p-4 text-sm sm:text-base text-pretty">
+                Reach out to our dedicated support team via email at <a href="#"
+                    class="underline underline-offset-2 text-primary dark:text-primary-dark">support@example.com</a> or
+                call our toll-free number at 1-800-123-4567 during business hours.
+            </div>
+        </div>
+    </div>
+    <div x-data="{ isExpanded: false }"
+        class="overflow-hidden rounded-radius border border-outline bg-surface-alt/40 dark:border-outline-dark dark:bg-surface-dark-alt/50">
+        <button id="controlsAccordionItemThree" type="button"
+            class="flex w-full items-center justify-between gap-2 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
+            aria-controls="accordionItemThree" x-on:click="isExpanded = ! isExpanded"
+            x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold'  : 'text-on-surface dark:text-on-surface-dark font-medium'"
+            x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
+            What is the refund policy?
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
+                stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
+                x-bind:class="isExpanded  ?  'rotate-180'  :  ''">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+        <div x-cloak x-show="isExpanded" id="accordionItemThree" role="region"
+            aria-labelledby="controlsAccordionItemThree" x-collapse>
+            <div class="p-4 text-sm sm:text-base text-pretty">
+                Please refer to our <a href="#"
+                    class="underline underline-offset-2 text-primary dark:text-primary-dark">refund policy page</a> on
+                the website for detailed information regarding eligibility, timeframes, and the process for requesting a
+                refund.
+            </div>
+        </div>
+    </div>
+</div>