@consent.software/catalog

• readme.md for @consent.software/catalog
• changelog.md for @consent.software/catalog

readme.md for @consent.software/catalog

A sleek, modern library of web components for seamless consent management integration. Built with Lit and designed for GDPR/CCPA compliance out of the box.

Issue Reporting and Security

For reporting bugs, issues, or security vulnerabilities, please visit community.foss.global/. This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a code.foss.global/ account to submit Pull Requests directly.

Features

🍪 Cookie Consent Modal - Beautiful, responsive consent dialog with light/dark theme support 🎛️ Interactive Toggles - Draggable toggle switches with smooth animations 📱 Mobile-First Design - Fully responsive across all device sizes 🎨 Theme-Aware - Automatically detects system light/dark mode preference 🔒 Privacy-First - Integrates with consent.software backend for compliant consent tracking ⚡ Zero Config - Drop-in components that just work

Installation

npm install @consent.software/catalog
# or
pnpm add @consent.software/catalog

Quick Start

Import the components and add the consent banner to your page:

import '@consent.software/catalog';

// That's it! Add the component to your HTML

<consentsoftware-cookieconsent></consentsoftware-cookieconsent>

The consent banner automatically:

• Shows on first visit when no consent preferences are stored
• Hides after user makes a selection
• Respects system dark/light mode
• Stores preferences via the consent.software backend

Components

<consentsoftware-cookieconsent>

The main consent modal component. Provides a full-screen overlay with cookie preference options.

<consentsoftware-cookieconsent></consentsoftware-cookieconsent>

Features:

• Three-button interface: Deny, Accept Selection, Accept All
• Four cookie categories: Required, Preferences, Statistics, Marketing
• Animated modal with backdrop blur
• Shake feedback when clicking outside the modal
• Automatic theme detection (light/dark)

<consentsoftware-toggle>

A draggable toggle switch component with touch support.

<consentsoftware-toggle>Label Text</consentsoftware-toggle>
<consentsoftware-toggle required>Required</consentsoftware-toggle>

Properties:

• required (boolean) - When true, toggle is locked in the "on" position
• selected (boolean) - Current toggle state

Events:

• toggle - Fired when state changes, includes { selected: boolean } in detail

<consentsoftware-tabs>

Tab navigation component with animated indicator.

<consentsoftware-tabs></consentsoftware-tabs>

Displays three tabs: Consent, Details, and Cookie Policy.

<consentsoftware-header>

Simple header component for the consent modal.

<consentsoftware-header></consentsoftware-header>

<consentsoftware-mainselection>

Grid layout containing toggle switches for each cookie category.

<consentsoftware-mainselection></consentsoftware-mainselection>

Backend Integration

This catalog integrates with the @consent.software/webclient package for backend communication:

import { CsWebclient } from '@consent.software/webclient';

const client = new CsWebclient();

// Check current consent levels
const levels = await client.getCookieLevels();
if (!levels) {
  // Show consent dialog
}

// Set consent levels programmatically
await client.setCookieLevels(['functional', 'analytics']);

// Run consent-dependent scripts
await client.getAndRunConsentTuples();

Styling & Theming

The components use CSS custom properties for easy theming:

consentsoftware-cookieconsent {
  /* Text and colors */
  --text-color: #333;
  --background-color: #eeeeee;
  --accent-color: #333333;

  /* Buttons */
  --button-bg: #ffffff;
  --button-hover-bg: #f2f2f2;

  /* Links */
  --link-color: #333;
  --icon-color: #4496f5;

  /* Modal */
  --modal-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
  --info-bg: rgba(0, 0, 0, 0.1);
  --info-text: rgba(0, 0, 0, 0.5);
}

The component automatically switches to dark theme variables when theme="dark" is set or when the system prefers dark mode.

Cookie Levels

The consent system uses three user-selectable levels plus a required baseline:

Level	Description
functional	Required cookies for site operation (always enabled)
preferences	User preference cookies
analytics	Statistics and analytics tracking
marketing	Marketing and advertising cookies

Browser Support

• Chrome (last 2 versions)
• Firefox (last 2 versions)
• Safari (last 2 versions)
• Edge (last 2 versions)

Built with modern ES modules and requires browsers with native Custom Elements v1 support.

Development

# Install dependencies
pnpm install

# Build the project
pnpm run build

# Watch mode for development
pnpm run watch

License and Legal Information

This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the LICENSE file.

Please note: The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.

Trademarks

This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH or third parties, and are not included within the scope of the MIT license granted herein.

Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines or the guidelines of the respective third-party owners, and any usage must be approved in writing. Third-party trademarks used herein are the property of their respective owners and used only in a descriptive manner, e.g. for an implementation of an API or similar.

Company Information

Task Venture Capital GmbH Registered at District Court Bremen HRB 35230 HB, Germany

For any legal inquiries or further information, please contact us via email at hello@task.vc.

By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.

changelog.md for @consent.software/catalog

2025-11-30 - 2.0.1 - fix(consentsoftware-cookieconsent)

Refine cookie consent modal shake behaviour and cleanup imports

• Shorten shake animation delay from 2000ms to 300ms for snappier feedback
• Limit shake effect to the modal box only; stop toggling the page overlay to avoid unwanted overlay visual changes
• Remove unused 'property' import from @design.estate/dees-element
• Introduce an isMobile flag to detect mobile layout in connectedCallback
• Simplify DOM queries and use tighter type assertions when manipulating modal elements

2025-11-30 - 2.0.0 - BREAKING CHANGE(elements)

Migrate web components to @design.estate/dees-element, introduce shared theme colors and cssManager, and update imports/usages across ts_web.

• Replaced direct lit usage with @design.estate/dees-element across the project (imports and base classes).
• Added cssManager export and a Shadcn-inspired color palette (colors) in ts_web/elements/shared.ts to centralize theming.
• Updated all components to extend DeesElement and include cssManager.defaultStyles in their static styles.
• Adjusted lifecycle and event typings (firstUpdated signatures, pointer/mouse event typing) and minor behaviour refinements in consentsoftware-toggle (drag handling, sync logic).
• Updated package.json dependencies to remove 'lit' and add '@design.estate/dees-element'.
• Updated page imports (ts_web/pages/page1.ts) to use the new html export from @design.estate/dees-element.

2025-11-30 - 1.6.1 - fix(build)

Update TypeScript config and build tooling; use accessor for Lit properties; bump deps and adjust package metadata

• ts_web/tsconfig.json: target -> ES2022, module -> ES2022, moduleResolution -> bundler, lib updated to ES2022/DOM/DOM.Iterable
• tsconfig.json (root): target -> ES2022, module -> NodeNext, moduleResolution -> NodeNext
• Component properties migrated to use the TypeScript 'accessor' modifier (consentsoftware-cookieconsent, consentsoftware-mainselection, consentsoftware-toggle)
• Bumped runtime and dev dependencies: lit -> ^3.3.1; upgrades to @design.estate/dees-wcctools, @git.zone/tsbuild, @git.zone/tsbundle, @git.zone/tswatch
• Package metadata: author updated to Task Venture Capital GmbH and test script changed to use pnpm

2025-01-22 - 1.6.0 - feat(elements)

Enhance theme handling and CSS organization for consent component

• Introduced theme-specific CSS variables for better theming support in consentsoftware-cookieconsent.
• Reorganized styles in consentsoftware-cookieconsent for cleaner look and consistency.
• Added media queries for responsive design in consentsoftware-tabs.

2025-01-21 - 1.5.4 - fix(consentsoftware-components)

Add interactive consent software components for managing cookie levels.

• Implemented 'consentsoftware-cookieconsent' component for cookie management
• Introduced 'consentsoftware-toggle' for user interaction improvements
• Added theme support for light/dark modes in consent components
• Enhanced consent interface with responsive design and accessibility features

2025-01-20 - 1.5.3 - fix(consentsoftware-cookieconsent)

Fix visual inconsistencies in the consent software modal overlay and shadow.

• Updated the shadow color in the modal box to use a consistent color.
• Restored backdrop blur effect in the page overlay when visible.

2025-01-20 - 1.5.2 - fix(core)

No changes detected

2025-01-20 - 1.5.1 - fix(consentsoftware-cookieconsent)

Adjusted shake animation duration and box-shadow for modalBox in consent cookie component.

• Changed the box-shadow to be softer with reduced spread for more subtle visual effect.
• Increased the duration of shake animation from 300ms to 2000ms for enhanced user feedback upon overlay interaction.

2025-01-20 - 1.5.0 - feat(consentsoftware-cookieconsent)

Enhance consent modal with shake animation on overlay click

• Added shake animation to the modal and overlay when clicked outside the modal.
• Updated dependency @consent.software/interfaces to version ^1.0.14.

2025-01-17 - 1.4.5 - fix(elements)

Fix issues in consentsoftware-cookieconsent component

• Removed unused attribute handling for 'gotIt'.
• Fixed background and backdrop-filter transitions to ensure proper UI behavior.
• Consolidated consent button click handling into handleConsentButtonClick.
• Improved modal visibility toggling and acceptance flow.

2025-01-17 - 1.4.4 - fix(core)

Update LitElement properties to use accessors

• Changes made in ts_web/elements/consentsoftware-toggle.ts
• Updated properties 'required' and 'selected' to use accessors

2025-01-17 - 1.4.3 - fix(consentsoftware-cookieconsent)

Fix transition property in consent button styles and add HTMLElementTagNameMap declaration for global interface.

• Updated the transition property for consent buttons to transition all properties instead of just the background.
• Added global interface HTMLElementTagNameMap for custom element type support.

2025-01-16 - 1.4.2 - fix(cookieconsent)

Fix user-select property in consentsoftware-cookieconsent component for consistency in interaction.

2025-01-16 - 1.4.1 - fix(consentsoftware-toggle)

Fix issue in drag event handling logic for the toggle component.

• Corrected dragging functionality to accurately track dragging state.
• Included logic to delay the reset of the dragging state after toggling.

2025-01-16 - 1.4.0 - feat(toggle component)

Enhanced consent toggle component with drag functionality

• Implemented drag functionality for the toggle knob.
• Added smooth transitions for the toggle knob movement.
• Handled drag state management to differentiate between actual click and drag.
• Improved user interaction by allowing click anywhere in the toggle area.

2025-01-16 - 1.3.5 - fix(elements)

Improved styling consistency across several components

• Increased box-shadow intensity for better visual separation
• Changed border-bottom styles to use dotted lines for consistency
• Adjusted line-height for better vertical spacing
• Fixed border-right gradient on itemBox for better styling

2025-01-14 - 1.3.4 - fix(dependencies)

Corrected build script and updated @consent.software/webclient dependency version

• Corrected the build script entry in package.json.
• Updated @consent.software/webclient dependency to version ^1.1.0.

2025-01-14 - 1.3.3 - fix(package.json)

Fixed incorrect main and typings fields, replacing with exports field

• Updated package.json to use the 'exports' field instead of 'main' and 'typings' for module entry points

2025-01-14 - 1.3.2 - fix(core)

No code changes detected, maintain current state.

2025-01-14 - 1.3.1 - fix(package setup)

Fix package metadata and dependency consistency

2025-01-14 - 1.3.0 - feat(elements)

Enhance consent management components with advanced styling and interaction

• Added delayed animation effect to 'consentsoftware-toggle' when required.
• Improved styling for better visual feedback on selections and requirements.
• Enhanced modal transition and visibility settings for the 'consentsoftware-cookieconsent'.

2025-01-13 - 1.2.0 - feat(pages)

Add initial structure for pages with page1 component

• Added page1 export module in ts_web/pages/index.ts
• Implemented page1 component returning an empty template using lit-html

2025-01-13 - 1.1.0 - feat(core)

Refactor and enhance consent management components

• Replaced usage of custom elements with LitElement for core components.
• Introduced new layout and design for consent modal using modern CSS approaches.
• Removed dependency on '@design.estate/dees-domtools'.
• Added support for dynamic theme switching with light and dark modes.

2025-01-09 - 1.0.81 - fix(core)

Package updated to ensure compliance with privacy regulations.

2025-01-09 - 1.0.80 - fix(core)

Remove deprecated GitLab CI configuration and update metadata for improved compatibility and efficiency.

• Removed the .gitlab-ci.yml file to eliminate outdated CI configuration
• Updated the package.json and npmextra.json to include missing keywords
• Updated the description in package.json and npmextra.json for better clarity

2025-01-09 - 1.0.79 - Initial Release

Initial release of the project.