desy-html 16.0.4 → 17.0.0

package/replit.md

@@ -1,75 +1,75 @@
-# desy-html
-
-## Overview
-
-desy-html is an NPM library that provides a design system for building user interfaces for Government of Aragón (Spain) web applications. It delivers pre-built, accessible UI components using Vite as the build tool, Tailwind CSS v4 for styling, and Nunjucks as the templating engine. The library is designed to be consumed as a dependency through a separate starter project (desy-html-starter) rather than used directly.
-
-The project serves as the core component library and documentation site, providing reusable HTML+CSS+JS components that follow ARIA accessibility patterns for government web applications.
-
-## User Preferences
-
-Preferred communication style: Simple, everyday language.
-
-## System Architecture
-
-### Build System
-- **Vite** serves as the primary build tool and development server, providing fast hot module replacement during development
-- Build configuration in `vite.config.js` includes custom Nunjucks environment setup, HTML beautification with js-beautify, YAML parsing for component parameters, and image optimization with Sharp
-- Three npm scripts: `dev` (development server), `build` (production build), `preview` (preview production build)
-
-### Templating Architecture
-- **Nunjucks** templating engine generates HTML components with a macro-based component system
-- Components follow a consistent file structure pattern: `src/templates/components/{component-name}/` containing macros, examples, and YAML parameter definitions
-- Page templates use inheritance with base templates in `src/templates/pages/` for different layout configurations (logged-in, logged-out, with sidebar, fixed header, etc.)
-- Documentation pages in `docs/` directory extend templates and import component examples
-
-### Styling System
-- **Tailwind CSS v4** with `@tailwindcss/vite` plugin integration
-- Custom theme configuration in `src/css/styles.css` defining colors, breakpoints, and spacing tokens aligned with government branding
-- Component-specific CSS files using Tailwind's `@layer components` directive (e.g., `component.text.css`, `component.form-group.css`)
-- Typography plugin (`@tailwindcss/typography`) and forms plugin (`@tailwindcss/forms`) for enhanced styling
-
-### JavaScript Architecture
-- ES modules architecture with component-specific ARIA implementations in `src/js/aria/`
-- Central initialization in `src/js/index.js` that imports and initializes all interactive components
-- Components implement W3C ARIA Authoring Practices for accessibility (accordion, dialog, listbox, menubar, tabs, tree, etc.)
-- Uses `@floating-ui/dom` for tooltip and dropdown positioning
-- Includes `cally` library for calendar/datepicker functionality
-- Optional `headroom.js` integration for auto-hiding headers on scroll
-
-### Component Library
-- 50+ pre-built accessible components including: accordion, alert, button, card, checkboxes, datepicker, dialog, dropdown, fieldset, file-upload, header/footer, input variants, menus, modal, notification, pagination, select, tabs, table, tooltip, tree, and more
-- Each component has a Nunjucks macro for rendering, YAML file for parameter documentation, and example file
-- Components are designed to be copied from documentation and used in projects via the starter template
-
-## External Dependencies
-
-### Runtime Dependencies
-- `@floating-ui/dom` - Positioning library for tooltips and dropdowns
-- `@tailwindcss/vite` - Vite plugin for Tailwind CSS v4
-- `tailwindcss` - Utility-first CSS framework (v4)
-- `autoprefixer` - CSS vendor prefixing
-- `cally` - Calendar/datepicker web component
-- `chokidar` - File watching for development
-- `hex-rgb` - Color conversion utility
-- `js-yaml` - YAML parsing for component parameters
-
-### Development Dependencies
-- `vite` - Build tool and dev server
-- `nunjucks` - Templating engine
-- `sharp` - Image optimization for production builds
-- `highlight.js` - Code syntax highlighting in documentation
-- `js-beautify` - HTML formatting for documentation examples
-- `glob` - File pattern matching
-- `outdent` - Template literal dedenting
-- `@tailwindcss/forms` - Form element styling plugin
-- `@tailwindcss/typography` - Prose content styling plugin
-
-### External Resources
-- Documentation hosted at https://desy.aragon.es/
-- Starter project available at https://bitbucket.org/sdaragon/desy-html-starter/
-- Angular port available at https://bitbucket.org/sdaragon/desy-angular
-
-### System Requirements
-- Node.js >=20.19.2 <23.0.0
+# desy-html
+
+## Overview
+
+desy-html is an NPM library that provides a design system for building user interfaces for Government of Aragón (Spain) web applications. It delivers pre-built, accessible UI components using Vite as the build tool, Tailwind CSS v4 for styling, and Nunjucks as the templating engine. The library is designed to be consumed as a dependency through a separate starter project (desy-html-starter) rather than used directly.
+
+The project serves as the core component library and documentation site, providing reusable HTML+CSS+JS components that follow ARIA accessibility patterns for government web applications.
+
+## User Preferences
+
+Preferred communication style: Simple, everyday language.
+
+## System Architecture
+
+### Build System
+- **Vite** serves as the primary build tool and development server, providing fast hot module replacement during development
+- Build configuration in `vite.config.js` includes custom Nunjucks environment setup, HTML beautification with js-beautify, YAML parsing for component parameters, and image optimization with Sharp
+- Three npm scripts: `dev` (development server), `build` (production build), `preview` (preview production build)
+
+### Templating Architecture
+- **Nunjucks** templating engine generates HTML components with a macro-based component system
+- Components follow a consistent file structure pattern: `src/templates/components/{component-name}/` containing macros, examples, and YAML parameter definitions
+- Page templates use inheritance with base templates in `src/templates/pages/` for different layout configurations (logged-in, logged-out, with sidebar, fixed header, etc.)
+- Documentation pages in `docs/` directory extend templates and import component examples
+
+### Styling System
+- **Tailwind CSS v4** with `@tailwindcss/vite` plugin integration
+- Custom theme configuration in `src/css/styles.css` defining colors, breakpoints, and spacing tokens aligned with government branding
+- Component-specific CSS files using Tailwind's `@layer components` directive (e.g., `component.text.css`, `component.form-group.css`)
+- Typography plugin (`@tailwindcss/typography`) and forms plugin (`@tailwindcss/forms`) for enhanced styling
+
+### JavaScript Architecture
+- ES modules architecture with component-specific ARIA implementations in `src/js/aria/`
+- Central initialization in `src/js/index.js` that imports and initializes all interactive components
+- Components implement W3C ARIA Authoring Practices for accessibility (accordion, dialog, listbox, menubar, tabs, tree, etc.)
+- Uses `@floating-ui/dom` for tooltip and dropdown positioning
+- Includes `cally` library for calendar/datepicker functionality
+- Optional `headroom.js` integration for auto-hiding headers on scroll
+
+### Component Library
+- 50+ pre-built accessible components including: accordion, alert, button, card, checkboxes, datepicker, dialog, dropdown, fieldset, file-upload, header/footer, input variants, menus, modal, notification, pagination, select, tabs, table, tooltip, tree, and more
+- Each component has a Nunjucks macro for rendering, YAML file for parameter documentation, and example file
+- Components are designed to be copied from documentation and used in projects via the starter template
+
+## External Dependencies
+
+### Runtime Dependencies
+- `@floating-ui/dom` - Positioning library for tooltips and dropdowns
+- `@tailwindcss/vite` - Vite plugin for Tailwind CSS v4
+- `tailwindcss` - Utility-first CSS framework (v4)
+- `autoprefixer` - CSS vendor prefixing
+- `cally` - Calendar/datepicker web component
+- `chokidar` - File watching for development
+- `hex-rgb` - Color conversion utility
+- `js-yaml` - YAML parsing for component parameters
+
+### Development Dependencies
+- `vite` - Build tool and dev server
+- `nunjucks` - Templating engine
+- `sharp` - Image optimization for production builds
+- `highlight.js` - Code syntax highlighting in documentation
+- `js-beautify` - HTML formatting for documentation examples
+- `glob` - File pattern matching
+- `outdent` - Template literal dedenting
+- `@tailwindcss/forms` - Form element styling plugin
+- `@tailwindcss/typography` - Prose content styling plugin
+
+### External Resources
+- Documentation hosted at https://desy.aragon.es/
+- Starter project available at https://bitbucket.org/sdaragon/desy-html-starter/
+- Angular port available at https://bitbucket.org/sdaragon/desy-angular
+
+### System Requirements
+- Node.js >=20.19.2 <23.0.0
 - npm >=10.0.0