feat: carousel

content/docs/components/carousel.md

@@ -0,0 +1,104 @@
+---
+title: "Carousel"
+description: "Allows users to browse through a set of images or content slides, typically with navigation controls like arrows or dots."
+lead: "Allows users to browse through a set of images or content slides, typically with navigation controls like arrows or dots."
+date: 2025-03-18T09:00:00+01:00
+lastmod: 2025-03-18T09:00:00+01:00
+draft: false
+images: []
+menu:
+  docs:
+    parent: "components"
+weight: 610
+toc: true
+---
+
+{Description here}
+
+<div class="preview">
+  <link rel="stylesheet" href="/cssui/cssui.min.css">
+  <link rel="stylesheet" href="/cssui/cssui.accordion.min.css">
+
+  <section data-accordion>
+    <div data-accordion-item>
+      <input type="checkbox" id="panel-1">
+      <label for="panel-1">
+        Item 1 
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
+      </label>
+      <div data-accordion-panel>
+        Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
+      </div>
+    </div>
+    <div data-accordion-item>
+      <input type="checkbox" id="panel-2">
+      <label for="panel-2" data-accordion-label>
+        Item 2
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
+      </label>
+      <div data-accordion-panel>
+        Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
+      </div>
+    </div>
+    <div data-accordion-item>
+      <input type="checkbox" id="panel-3">
+      <label for="panel-3" data-accordion-label>
+        Item 3
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
+      </label>
+      <div data-accordion-panel>
+        Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
+      </div>
+    </div>
+    <div data-accordion-item>
+      <input type="checkbox" id="panel-4">
+      <label for="panel-4" data-accordion-label>
+        Item 4
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
+      </label>
+      <div data-accordion-panel>
+        Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
+      </div>
+    </div>
+  </section>
+
+</div>
+
+## Usage
+
+The Accordion component consists of a parent container with the `data-accordion` attribute:
+```html
+<section data-accordion> 
+
+  <!-- Put items here -->
+
+</section>
+```
+
+Each item is composed by a title and content part:
+
+```html
+<div data-accordion-item>
+  <input type="checkbox" id="panel-1">
+  <label for="panel-1" data-accordion-label>
+    Item Title
+  </label>
+  <div data-accordion-panel>
+    <!-- Panel Content here -->
+  </div>
+</div>
+```
+
+## Variables
+
+This is the list of variables related to this component. You can customize the design by changing or overriding these values:
+
+```css
+--accordion-border-color: var(--cssui-gray-lighter);
+--accordion-panel-background: #fff;
+--accordion-panel-padding: var(--cssui-padding);
+--accordion-panel-text-color: var(--cssui-gray-darkest);
+--accordion-title-background: #fff;
+--accordion-title-spacing: 1rem;
+--accordion-title-color: var(--cssui-gray-dark);
+```

lib/src/carousel/carousel.css

@@ -0,0 +1,58 @@
+:root {
+            --carousel-width: 300px;
+            --carousel-height: 200px;
+        }
+
+        .carousel {
+            position: relative;
+            width: var(--carousel-width);
+            height: var(--carousel-height);
+            overflow: hidden;
+            border-radius: 10px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+        }
+
+        .slides {
+            display: flex;
+            width: 300%;
+            height: 100%;
+            overflow-x: auto;
+            scroll-behavior: smooth;
+            scroll-snap-type: x mandatory;
+            -webkit-overflow-scrolling: touch;
+        }
+
+        .slide {
+            flex: 0 0 100%;
+            width: 100%;
+            height: var(--carousel-height);
+            scroll-snap-align: start;
+        }
+
+        .slide img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .nav {
+            position: absolute;
+            bottom: 10px;
+            left: 50%;
+            display: flex;
+            transform: translateX(-50%);
+            gap: 8px;
+        }
+
+        .nav a {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background-color: white;
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+        }
+
+        .nav a:hover {
+            background-color: gray;
+        }

lib/src/carousel/carousel.html

@@ -0,0 +1,21 @@
+<body>
+  <link rel="stylesheet" href="../cssui.css">
+  <link rel="stylesheet" href="carousel.css">
+
+<div class="carousel">
+  <div class="slides">
+    <div class="slide" id="slide1"><img src="https://via.placeholder.com/300x200/ff7f7f/333?text=Slide+1" alt="Slide 1">
+    </div>
+    <div class="slide" id="slide2"><img src="https://via.placeholder.com/300x200/7f7fff/333?text=Slide+2" alt="Slide 2">
+    </div>
+    <div class="slide" id="slide3"><img src="https://via.placeholder.com/300x200/7fff7f/333?text=Slide+3" alt="Slide 3">
+    </div>
+  </div>
+
+  <div class="nav">
+    <a href="#slide1"></a>
+    <a href="#slide2"></a>
+    <a href="#slide3"></a>
+  </div>
+</div>
+</body>

netlify.toml

@@ -29,3 +29,8 @@
   port = 8888
   publish = "public"
   autoLaunch = false
+
+[[headers]]
+  for = "/*.css"
+  [headers.values]
+    Access-Control-Allow-Origin = "*"