django-cotton-bs5 0.2.1__py3-none-any.whl

cotton_bs5/templates/cotton/dropdown/header.html

@@ -0,0 +1,4 @@
+<c-vars text />
+<li>
+  <h6 class="dropdown-header">{{ text }}{{ slot }}</h6>
+</li>

cotton_bs5/templates/cotton/dropdown/index.html

@@ -0,0 +1,11 @@
+{% load cotton %}
+<c-vars direction="down"
+        :dir_dict="{'up': 'dropup', 'down': 'dropdown', 'left': 'dropstart', 'right':'dropend'}"
+        class />
+<div class="{{ dir_dict|get_item:direction }} {{ class }}"
+     {{ attrs }}>
+  {{ button }}
+  <ul class="dropdown-menu">
+    {{ slot }}
+  </ul>
+</div>

cotton_bs5/templates/cotton/dropdown/item.html

@@ -0,0 +1,15 @@
+<c-vars href text active disabled class />
+{% if href %}
+  <a class="dropdown-item{% if active %} active{% endif %}{% if disabled %} disabled{% endif %} {{ class }}"
+     {% if disabled %}tabindex="-1" aria-disabled="true"{% endif %}
+     {{ attrs }}>
+    {{ text }} {{ slot }}
+  </a>
+{% else %}
+  <button class="dropdown-item{% if active %} active{% endif %}{% if disabled %} disabled{% endif %} {{ class }}"
+          type="button"
+          {% if disabled %}disabled{% endif %}
+          {{ attrs }}>
+    {{ text }} {{ slot }}
+  </button>
+{% endif %}

cotton_bs5/templates/cotton/dropdown/toggle.html

@@ -0,0 +1,15 @@
+<c-vars variant="primary"
+        size=""
+        :caret="True"
+        split
+        disabled
+        text
+        class />
+<button type="button"
+        class="btn{% if caret %} dropdown-toggle{% endif %} btn-{{ variant }}{% if size %} btn-{{ size }}{% endif %} {{ class }}"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+        {% if disabled %}disabled{% endif %}
+        {{ attrs }}>
+        {{ text }} {{ slot }}
+</button>

cotton_bs5/templates/cotton/grid/col.html

@@ -0,0 +1,5 @@
+<c-vars width="" :responsive="{}" offset="" class />
+<div class="{% if width %}col-{{ width }} {% else %} col {% endif %} {% for bp, width in responsive.items %}col-{{ bp }}-{{ width }}{% endfor %} {{ class }}"
+     {{ attrs }}>
+        {{ slot }}
+</div>

cotton_bs5/templates/cotton/grid/index.html

@@ -0,0 +1,5 @@
+<c-vars cols="" gap="1" :responsive="{}" class />
+<div class="row{% if cols %} row-cols-{{ cols }}{% endif %}{% if gap %} g-{{ gap }}{% endif %}{% for bp,cols in responsive.items %} row-cols-{{ bp }}-{{ cols }}{% endfor %} {{ class }}"
+     {{ attrs }}>
+  {{ slot }}
+</div>

cotton_bs5/templates/cotton/list_group/index.html

@@ -0,0 +1,11 @@
+<c-vars :flush="False"
+        :numbered="False"
+        :horizontal="False"
+        class />
+{# djlint:off #}
+<{% if numbered %}ol{% else %}ul{% endif %}
+class="list-group{% if flush %} list-group-flush{% endif %}{% if horizontal %} list-group-horizontal{% if horizontal != True %}-{{ horizontal }}{% endif %}{% endif %}{{ class }}"
+{{ attrs }}>
+{{ slot }}
+</{% if numbered %}ol{% else %}ul{% endif %}>
+{# djlint:on #}

cotton_bs5/templates/cotton/list_group/item.html

@@ -0,0 +1,9 @@
+<c-vars text active disabled variant href tag="li" class />
+{# djlint:off #}
+<{% if href %}a href="{{ href }}"{% else %}{{ tag }}{% endif %}
+class="list-group-item{% if href %} list-group-item-action{% endif %}{% if active %} active{% elif disabled %} disabled{% endif %}{% if variant %} list-group-item-{{ variant }}{% endif %} {{ class }}"
+{% if active %}aria-current="true"{% elif disabled %}aria-disabled="true"{% endif %}
+{{ attrs }}>
+{{ text }} {{ slot }}
+</{% if href %}a{% else %}{{ tag }}{% endif %}>
+{# djlint:on #}

cotton_bs5/templates/cotton/modal/body.html

@@ -0,0 +1 @@
+<div class="modal-body">{{ slot }}</div>

cotton_bs5/templates/cotton/modal/footer.html

@@ -0,0 +1,3 @@
+<c-vars class />
+<div class="modal-footer {{ class }}" {{ attrs }}>{{ slot }}
+</div>

cotton_bs5/templates/cotton/modal/header.html

@@ -0,0 +1,8 @@
+<c-vars id title class />
+<div class="modal-header">
+  {{ header_start }}
+  <h1 class="modal-title fs-5 {{ class }}"
+      {% if id %}id="{{ id }}Label"{% endif %}>{{ title }}</h1>
+  {{ header_end }}
+  <c-button.dismiss dismiss="modal" />
+</div>

cotton_bs5/templates/cotton/modal/index.html

@@ -0,0 +1,23 @@
+<c-vars id
+        fade
+        centered
+        scrollable
+        backdrop
+        size
+        class
+        dialog_attrs
+        content_class
+        content_attrs />
+<div id="{{ id }}"
+     class="modal {% if fade %}fade{% endif %} {{ class }}"
+     tabindex="-1"
+     aria-labelledby="{{ id }}Label"
+     aria-hidden="true"
+     {{ attrs }}>
+     <div class="modal-dialog {% if centered %}modal-dialog-centered{% endif %}{% if scrollable %}modal-dialog-scrollable{% endif %}"
+          {{ dialog_attrs }}>
+          <div class="modal-content {{ content_class }}"
+               {{ content_attrs }}>{{ slot }}
+          </div>
+     </div>
+</div>

cotton_bs5/templates/cotton/modal/title.html

@@ -0,0 +1,3 @@
+<c-vars id text class />
+<h1 class="modal-title fs-5 {{ class }}"
+    {% if id %}id="{{ id }}Label"{% endif %}>{{ text }} {{ slot }}</h1>

cotton_bs5/templates/cotton/nav/index.html

@@ -0,0 +1,5 @@
+<c-vars type vertical fill justify class />
+<nav class="nav {% if type %}nav-{{ type }}{% endif %} {% if fill %}nav-fill{% endif %}{% if justify %} nav-justify{% endif %}{% if vertical %} flex-column{% endif %} {{ class }}"
+     {{ attrs }}>
+  {{ slot }}
+</nav>

cotton_bs5/templates/cotton/nav/link.html

@@ -0,0 +1,4 @@
+<c-vars text active disabled class />
+<a class="nav-link{% if active %} active{% elif disabled %} disabled{% endif %} {{ class }}"
+   {% if active %} aria-current="page" {% elif disabled %} aria-disabled="true"{% endif %}
+   {{ attrs }}>{{ slot }}{{ text }}</a>

cotton_bs5/templates/cotton/navbar/index.html

@@ -0,0 +1,26 @@
+{% load i18n %}
+<c-vars expand="lg" brand brand_href="/" class />
+<nav class="navbar{% if expand %} navbar-expand-{{ expand }}{% endif %} {{ class }}"
+     {{ attrs }}>
+  <div class="container-fluid">
+    {% if brand %}<a class="navbar-brand" href="{{ brand_href }}">{{ brand }}</a>{% endif %}
+    {% if expand %}
+      <button class="navbar-toggler"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#navbarNav"
+              aria-controls="navbarNav"
+              aria-expanded="false"
+              aria-label="{% trans "Toggle navigation" %}">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <c-navbar.links>
+          {{ slot }}
+        </c-navbar.links>
+      </div>
+    {% else %}
+      {{ slot }}
+    {% endif %}
+  </div>
+</nav>

cotton_bs5/templates/cotton/navbar/link.html

@@ -0,0 +1,9 @@
+<c-vars text active disabled li_class class />
+<li class="nav-item {{ li_class }}">
+  <a class="nav-link{% if active %} active{% endif %}{% if disabled %} disabled{% endif %} {{ class }}"
+     {% if active %}aria-current="page"{% endif %}
+     {% if disabled %}tabindex="-1" aria-disabled="true"{% endif %}
+     {{ attrs }}>
+    {{ text }} {{ slot }}
+  </a>
+</li>

cotton_bs5/templates/cotton/navbar/links.html

@@ -0,0 +1,4 @@
+<c-vars align="" class />
+<ul class="navbar-nav {{ class }}" {{ attrs }}>
+  {{ slot }}
+</ul>

cotton_bs5/templates/cotton/offcanvas/body.html

@@ -0,0 +1,2 @@
+<c-vars class />
+<div class="offcanvas-body {{ class }}">{{ slot }}</div>

cotton_bs5/templates/cotton/offcanvas/footer.html

@@ -0,0 +1,6 @@
+<c-vars sticky text class />
+<div class="offcanvas-footer d-flex justify-content-end flex-shrink-1 px-md-3 py-md-2 gap-2 mt-auto {{ class }}{% if sticky %} sticky-bottom{% endif %}"
+     {{ attrs }}>
+  {{ text }}
+  {{ slot }}
+</div>

cotton_bs5/templates/cotton/offcanvas/header.html

@@ -0,0 +1,5 @@
+<c-vars text class />
+<div class="offcanvas-header {{ class }}" {{ attrs }}>
+  {{ slot }}
+  <c-button.dismiss dismiss="offcanvas" data-bs-target="#{{ id }}" />
+</div>

cotton_bs5/templates/cotton/offcanvas/index.html

@@ -0,0 +1,7 @@
+<c-vars placement="start" breakpoint class />
+<div class="{% if breakpoint %}offcanvas-{{ breakpoint }} {% else %}offcanvas{% endif %} offcanvas-{{ placement }} {{ class }}"
+     tabindex="-1"
+     aria-labelledby="{{ id }}Label"
+     aria-hidden="true"
+     {{ attrs }}>{{ slot }}
+</div>

cotton_bs5/templates/cotton/offcanvas/title.html

@@ -0,0 +1,2 @@
+<c-vars title class />
+<h5 class="offcanvas-title {{ class }}">{{ title }} {{ slot }}</h5>

cotton_bs5/templates/cotton/pagination/index.html

@@ -0,0 +1,6 @@
+<c-vars size="" class />
+<nav {{ attrs }}>
+  <ul class="pagination{% if size %} pagination-{{ size }}{% endif %} {{ class }}">
+    {{ slot }}
+  </ul>
+</nav>

cotton_bs5/templates/cotton/pagination/link.html

@@ -0,0 +1,14 @@
+<c-vars page text active disabled class />
+<li class="page-item{% if active %} active{% endif %}{% if disabled %} disabled{% endif %}">
+  {% if disabled %}
+    <span class="page-link {{ class }}" {{ attrs }}>{{ text }} {{ slot }}</span>
+  {% else %}
+    <a class="page-link {{ class }}"
+       href="?page={{ page }}"
+       {% if active %}aria-current="page"{% endif %}
+       {% if disabled %}tabindex="-1" aria-disabled="true"{% endif %}
+       {{ attrs }}>
+      {{ text }} {{ slot }}
+    </a>
+  {% endif %}
+</li>

cotton_bs5/templates/cotton/placeholder.html

@@ -0,0 +1,4 @@
+<c-vars width="12" size="" glow wave />
+<div class="{% if glow or wave %}placeholder-{% if glow %}glow{% elif wave %}wave{% endif %} {% endif %}">
+  <span class="placeholder col-{{ width }}{% if size %} placeholder-{{ size }}{% endif %} {{ class }} {% if variant %}bg-{{ variant }}{% endif %}"></span>
+</div>

cotton_bs5/templates/cotton/progress.html

@@ -0,0 +1,24 @@
+{% load i18n %}
+<c-vars value
+        :min="0"
+        :max="100"
+        text
+        label
+        variant="primary"
+        striped
+        animated
+        class />
+{% trans "Progress" as default_label %}
+<div class="progress {{ class }}"
+     role="progressbar"
+     aria-label="{% firstof label default_label %}"
+     aria-valuenow="{{ value }}"
+     aria-valuemin="{{ min }}"
+     aria-valuemax="{{ max }}"
+     {{ attrs }}>
+  <div class="progress-bar bg-{{ variant }}{% if striped %} progress-bar-striped{% endif %}{% if animated %} progress-bar-animated{% endif %}"
+       style="width: calc(({{ value }} - {{ min }}) / ({{ max }} - {{ min }}) * 100%)">
+    {{ text }}
+    {{ slot }}
+  </div>
+</div>

cotton_bs5/templates/cotton/ratio.html

@@ -0,0 +1,5 @@
+<c-vars w="1" h="1" perc />
+<div class="ratio"
+     {% if perc %} style="--bs-aspect-ratio: {{ perc }};" {% else %} style="--bs-aspect-ratio: calc({{ h }} / {{ w }} * 100%);"  {% endif %}>
+  {{ slot }}
+</div>

cotton_bs5/templates/cotton/spinner.html

@@ -0,0 +1,9 @@
+{% load i18n %}
+<c-vars type="border" size variant label class />
+{% trans "Loading..." as default_label %}
+<div class="spinner-{{ type }}{% if size %} spinner-{{ type }}-{{ size }}{% endif %}{% if variant %} text-{{ variant }}{% endif %} {{ class }}"
+     role="status"
+     {{ attrs }}>
+        <span class="visually-hidden">{% firstof label default_label %}</span>
+        {{ slot }}
+</div>

cotton_bs5/templates/cotton/table.html

@@ -0,0 +1,15 @@
+<c-vars striped
+        bordered
+        hover
+        responsive
+        small
+        variant
+        caption
+        class />
+<div class="table-responsive{% if responsive %}-{{ responsive }}{% endif %}">
+  <table class="table{% if small %} table-sm{% endif %}{% if striped %} table-striped{% endif %}{% if bordered %} table-bordered{% endif %}{% if hover %} table-hover{% endif %}{% if variant %} table-{{ variant }}{% endif %} {{ class }}"
+         {{ attrs }}>
+    {% if caption %}<caption>{{ caption }}</caption>{% endif %}
+    {{ slot }}
+  </table>
+</div>

cotton_bs5/templates/cotton/tabs/content.html

@@ -0,0 +1,4 @@
+<c-vars class />
+<div class="tab-content {{ class }}" {{ attrs }}>
+  {{ slot }}
+</div>

cotton_bs5/templates/cotton/tabs/index.html

@@ -0,0 +1,13 @@
+<c-vars type vertical fill justify class />
+{# djlint:off #}
+<ul class="nav {% if type %}nav-{{ type }}{% endif %}
+           {% if fill %}nav-fill{% endif %}
+           {% if justify %} nav-justify{% endif %}
+           {% if vertical %} flex-column{% endif %}
+           {{ class }}"
+    role="tablist"
+    {% if vertical %} aria-orientation="vertical"{% endif %}
+    {{ attrs }}>
+  {{ slot }}
+</ul>
+{# djlint:on #}

cotton_bs5/templates/cotton/tabs/item.html

@@ -0,0 +1,18 @@
+<c-vars target active disabled text class />
+{# djlint:off #}
+<li class="nav-item" role="presentation">
+  <button class="nav-link{% if active %} active{% endif %} {{ class }}"
+          id="{{ target }}-tab"
+          data-bs-toggle="tab"
+          data-bs-target="#{{ target }}"
+          aria-controls="{{ target }}"
+          aria-selected="{% if active %}true{% else %}false{% endif %}"
+          tabindex="{% if active %}0{% else %}-1{% endif %}"
+          {% if disabled %}disabled aria-disabled="true"{% endif %}
+          type="button"
+          role="tab"
+          {{ attrs }}>
+    {{ text }} {{ slot }}
+  </button>
+</li>
+{# djlint:on #}

cotton_bs5/templates/cotton/tabs/pane.html

@@ -0,0 +1,11 @@
+<c-vars id active show class />
+{# djlint:off #}
+<div id="{{ id }}"
+     class="tab-pane{% if active %} active{% endif %}{% if show %} show{% endif %} {{ class }}"
+     role="tabpanel"
+     aria-labelledby="{{ id }}-tab"
+     tabindex="{% if active %}0{% else %}-1{% endif %}"
+     {{ attrs }}>
+  {{ slot }}
+</div>
+{# djlint:on #}

cotton_bs5/templates/cotton/toast/activate.html

@@ -0,0 +1,17 @@
+<script>
+  // Initialize all toasts
+  document.addEventListener('DOMContentLoaded', function() {
+    var toastElList = [].slice.call(document.querySelectorAll('.toast'));
+    var toastList = toastElList.map(function(toastEl) {
+      return new bootstrap.Toast(toastEl);
+    });
+
+    // Auto-show toasts that don't have autohide disabled
+    toastList.forEach(function(toast) {
+      var toastEl = toast._element;
+      if (toastEl.dataset.bsAutohide !== 'false') {
+        toast.show();
+      }
+    });
+  });
+</script>

cotton_bs5/templates/cotton/toast/body.html

@@ -0,0 +1,3 @@
+<c-vars class />
+
+<div class="toast-body {{ class }}">{{ slot }}</div>

cotton_bs5/templates/cotton/toast/header.html

@@ -0,0 +1,5 @@
+<c-vars class />
+<div class="toast-header {{ class }}">
+  {{ slot }}
+  <c-button.dismiss dismiss="toast" />
+</div>

cotton_bs5/templates/cotton/toast/index.html

@@ -0,0 +1,9 @@
+<c-vars :autohide="True" delay="5000" class />
+<div class="toast {{ class }}"
+     role="alert"
+     aria-live="assertive"
+     aria-atomic="true"
+     {% if autohide %}data-bs-autohide="true" data-bs-delay="{{ delay }}"{% else %}data-bs-autohide="false"{% endif %}
+     {{ attrs }}>
+  {{ slot }}
+</div>

django_cotton_bs5-0.2.1.dist-info/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Samuel Jennings
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

django_cotton_bs5-0.2.1.dist-info/METADATA

@@ -0,0 +1,78 @@
+Metadata-Version: 2.1
+Name: django-cotton-bs5
+Version: 0.2.1
+Summary: Bootstrap 5 components for use with Django Cotton.
+License: MIT
+Author: Sam
+Author-email: samuel.scott.jennings@gmail.com
+Requires-Python: >=3.10,<4.0
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3.10
+Classifier: Programming Language :: Python :: 3.11
+Classifier: Programming Language :: Python :: 3.12
+Provides-Extra: django-compressor
+Requires-Dist: django-compressor (>=4.5.1,<5.0.0) ; extra == "django-compressor"
+Requires-Dist: django-cotton (>2.1)
+Requires-Dist: django-libsass (>=0.9,<0.10)
+Description-Content-Type: text/markdown
+
+# Django Cotton BS5
+
+Bootstrap 5 components for Django Cotton - A comprehensive library of reusable, modular components.
+
+**Note:** This project is currently a work in progress. Users are encouraged to request new components or features via the [issue tracker](https://github.com/SamuelJennings/cotton-bs5/issues).
+
+[View demo](https://samueljennings.github.io/cotton-bs5/)
+
+## Installation
+
+```bash
+pip install cotton-bs5
+```
+
+Add `cotton_bs5` to your `INSTALLED_APPS` in `settings.py`:
+
+```python
+INSTALLED_APPS = [
+    ...
+    "django_cotton",
+    "cotton_bs5",
+    ...
+]
+```
+
+## Available Components
+
+The following Bootstrap 5 components are currently available as Django Cotton components:
+
+- **Alert** (`<c-alert>`) — Bootstrap alerts with variants, dismissible, slot/text support
+- **Accordion** (`<c-accordion>`, `<c-accordion.item>`, `<c-accordion.header>`) — Collapsible accordion panels
+- **Breadcrumbs** (`<c-breadcrumbs>`, `<c-breadcrumbs.item>`) — Navigation breadcrumbs
+- **Button** (`<c-button>`) — Button/link with variants, outline, icon, slot/text
+- **Button Group** (`<c-button_group>`) — Grouped buttons, vertical/size/label support
+- **Card** (`<c-card>`, `<c-card.body>`, `<c-card.title>`) — Card container, body, and title
+- **List Group** (`<c-list_group>`, `<c-list_group.item>`) — List group and items, horizontal/numbered/active/disabled
+- **Modal** (`<c-modal>`, `<c-modal.title>`, `<c-modal.body>`) — Modal dialog, title, and body
+- **Navbar** (`<c-navbar>`) — Responsive navigation bar with brand, expand, toggler
+- **Progress** (`<c-progress>`) — Progress bar with value, min/max, variant, striped, animated, label
+- **Spinner** (`<c-spinner>`) — Loading spinner, border/grow, size, variant, label
+- **Table** (`<c-table>`) — Responsive table, striped, bordered, hover, small, variant, caption
+- **Tabs** (`<c-tabs>`, `<c-tabs.item>`, `<c-tabs.pane>`) — Tab navigation and tab panes
+
+More components are planned. Please request additional Bootstrap 5 components or features via the [issue tracker](https://github.com/SamuelJennings/cotton-bs5/issues).
+
+## Contributing
+
+This library follows django-cotton conventions and Bootstrap 5 standards. When adding new components:
+
+1. Use `<c-vars />` for default values
+2. Include proper accessibility attributes
+3. Support all relevant Bootstrap 5 options
+4. Maintain consistent naming conventions
+5. Test with various configurations
+
+## License
+
+MIT License - see [LICENSE](LICENSE) file for details.
+