@keenmate/web-daterangepicker 1.9.4 → 1.10.0

package/README.md

@@ -2,6 +2,8 @@
 
 A lightweight, accessible date picker web component with excellent keyboard navigation and range selection support.
 
+> **⚠️ Security Notice:** This component intentionally allows raw HTML in rendering callbacks and message content to give developers full control over content display. If you display user-generated content, you must sanitize it yourself. See [HTML Injection (XSS) Notice](#html-injection-xss-notice) for the complete list of affected callbacks and methods.
+
 ## Features
 
 - 🎯 **Input Masking** - Auto-format dates as you type with separator insertion
@@ -165,6 +167,8 @@ picker.disabled = true;
 | `clearSelection()` | Clear the current selection |
 | `getInputValue()` | Get the current value as a string |
 | `setInputValue(value: string)` | Set the value |
+| `showMessage(html: string)` | Display a message in the calendar with custom HTML content |
+| `hideMessage()` | Hide the currently displayed message |
 
 ## Events
 
@@ -172,6 +176,7 @@ picker.disabled = true;
 |-------|--------|-------------|
 | `date-select` | `{ date?, dateRange?, formattedValue }` | Fired when a date is selected |
 | `change` | `{ date?, dateRange?, formattedValue }` | Fired when selection changes |
+| `custom-action` | `{ [key: string]: string }` | Fired when a button with `data-action="custom"` is clicked. Detail contains all `data-*` attributes as camelCase keys. |
 
 ## Keyboard Shortcuts
 
@@ -325,6 +330,171 @@ picker.customStylesCallback = () => `
 `;
 ```
 
+### Date Selection Validation (beforeDateSelectCallback)
+
+Validate or modify date selections before they're applied. Supports async validation (e.g., API calls):
+
+```javascript
+const picker = document.querySelector('web-daterangepicker');
+
+picker.beforeDateSelectCallback = async (selection) => {
+  // selection is Date (single mode) or { start: Date, end: Date } (range mode)
+
+  // Example: Check availability via API
+  const response = await fetch('/api/check-availability', {
+    method: 'POST',
+    body: JSON.stringify({
+      start: selection.start.toISOString(),
+      end: selection.end.toISOString()
+    })
+  });
+  const { available, message } = await response.json();
+
+  if (!available) {
+    return {
+      action: 'restore',
+      message: message,
+      showInvalidRange: true  // Keep selection visible with error styling
+    };
+  }
+
+  return { action: 'accept' };
+};
+```
+
+**Return object options:**
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `action` | `'accept' \| 'adjust' \| 'restore' \| 'clear'` | **Required.** What to do with the selection |
+| `message` | `string` | Optional message to display in the calendar |
+| `showInvalidRange` | `boolean` | When `true` with `action: 'restore'`, keeps the invalid selection visible with red error styling |
+| `adjustedDate` | `Date` | For `action: 'adjust'` in single mode - the corrected date |
+| `adjustedStartDate` | `Date` | For `action: 'adjust'` in range mode - the corrected start date |
+| `adjustedEndDate` | `Date` | For `action: 'adjust'` in range mode - the corrected end date |
+
+**Action behaviors:**
+
+- **`accept`**: Apply the selection as-is. Hides any existing message.
+- **`adjust`**: Apply corrected dates instead (use with `adjustedDate` or `adjustedStartDate`/`adjustedEndDate`)
+- **`restore`**: Revert to previous selection. Use `showInvalidRange: true` to show what was attempted.
+- **`clear`**: Clear the selection entirely.
+
+**Example: Minimum nights validation with error display:**
+
+```javascript
+picker.beforeDateSelectCallback = (range) => {
+  const nights = Math.floor((range.end - range.start) / (1000 * 60 * 60 * 24));
+
+  if (nights < 2) {
+    return {
+      action: 'restore',
+      message: 'Minimum 2 nights required',
+      showInvalidRange: true  // Shows attempted range with red styling
+    };
+  }
+
+  if (nights > 14) {
+    return {
+      action: 'restore',
+      message: 'Maximum 14 nights allowed',
+      showInvalidRange: true
+    };
+  }
+
+  return { action: 'accept' };
+};
+```
+
+### Bulk Metadata Loading (beforeMonthChangedCallback)
+
+Load metadata for all visible dates in a single API call when the user navigates months. Much more efficient than `getDateMetadataCallback` which is called per-date:
+
+```javascript
+const picker = document.querySelector('web-daterangepicker');
+
+picker.beforeMonthChangedCallback = async (context) => {
+  // context: { year, month, monthIndex, firstVisibleDate, lastVisibleDate }
+
+  // Fetch availability for all visible dates in one call
+  const response = await fetch('/api/availability', {
+    method: 'POST',
+    body: JSON.stringify({
+      start: context.firstVisibleDate.toISOString(),
+      end: context.lastVisibleDate.toISOString()
+    })
+  });
+  const data = await response.json();
+
+  // Build metadata map (key: YYYY-MM-DD, value: DateInfo)
+  const metadata = new Map();
+  data.forEach(day => {
+    metadata.set(day.date, {
+      badgeText: `$${day.price}`,
+      isDisabled: !day.available,
+      dayTooltip: `${day.roomsLeft} rooms available`
+    });
+  });
+
+  return { action: 'accept', metadata };
+};
+```
+
+**Return object options:**
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `action` | `'accept' \| 'block'` | **Required.** Allow or prevent month navigation |
+| `metadata` | `Map<string, DateInfo>` | Bulk metadata keyed by `YYYY-MM-DD`. Cached and used instead of `getDateMetadataCallback` |
+| `monthHeaders` | `Map<string, string>` | Custom month headers keyed by `YYYY-MM` (e.g., `"2026-01"` → `"Jan 2026 (5 rooms)"`) |
+| `message` | `string` | Optional message to display (useful with `action: 'block'`) |
+
+**Performance:** 1 API call per month navigation vs 35-42 calls with `getDateMetadataCallback`.
+
+### Messages & Custom Actions
+
+Display contextual messages in the calendar with interactive buttons:
+
+```javascript
+const picker = document.querySelector('web-daterangepicker');
+
+// Show a simple message
+picker.showMessage('<p>Please select a check-in date</p>');
+
+// Show a message with a close button
+picker.showMessage(`
+  <p>Weekend dates have higher rates</p>
+  <button data-action="close-message">Got it</button>
+`);
+
+// Show a message with custom action buttons
+picker.showMessage(`
+  <p>These dates are unavailable. Try:</p>
+  <button data-action="custom" data-start-date="2026-01-14" data-end-date="2026-01-17">
+    Jan 14 - Jan 17
+  </button>
+`);
+
+// Handle custom action button clicks
+picker.addEventListener('custom-action', (e) => {
+  const { startDate, endDate } = e.detail;
+  if (startDate && endDate) {
+    picker.selectedRanges = [{
+      start: new Date(startDate),
+      end: new Date(endDate)
+    }];
+    picker.hideMessage();
+  }
+});
+
+// Hide message programmatically
+picker.hideMessage();
+```
+
+**Built-in button actions:**
+- `data-action="close-message"` - Closes the message (no event fired)
+- `data-action="custom"` - Fires `custom-action` event with all `data-*` attributes
+
 ## Range Selection Modes
 
 When selecting date ranges that include disabled dates (e.g., selecting a working week where weekends are disabled), you can control how the selection is handled using the `disabled-dates-handling` attribute:
@@ -522,6 +692,16 @@ All KeenMate components follow a consistent naming convention for **Tier 1 varia
 
 Learn the pattern once, apply it across all components.
 
+#### Component Variables Manifest
+
+This package exports a `component-variables.manifest.json` file that documents all supported CSS variables for tooling integration (e.g., Theme Designer, IDE autocomplete):
+
+```javascript
+import manifest from '@keenmate/web-daterangepicker/component-variables.manifest.json';
+// manifest.baseVariables - list of --base-* variables the component responds to
+// manifest.componentVariables - list of --drp-* component-specific variables
+```
+
 ### CSS Custom Properties
 
 Customize the appearance using CSS custom properties:
@@ -678,6 +858,29 @@ npm run preview
 
 For older browser support, use the compiled `dist/style.css` which is processed by Vite.
 
+## HTML Injection (XSS) Notice
+
+The following callbacks and methods allow **raw HTML injection** and are intentionally **NOT XSS-safe**. This gives developers full control over rendering but requires sanitizing untrusted data:
+
+| Callback/Method | Output Used In | Risk Level |
+|-----------------|---------------|------------|
+| `showMessage(html)` | Message area (innerHTML) | HTML injection |
+| `renderDayCallback` | Day cells (innerHTML) | HTML injection |
+| `renderDayContentCallback` | Day cells (innerHTML) | HTML injection |
+| `getDateMetadataCallback` (badgeText, dayTooltip) | Badges/tooltips (innerHTML) | HTML injection |
+| `formatSummaryCallback` | Summary display (innerHTML) | HTML injection |
+| `getMonthHeaderCallback` | Month headers (innerHTML) | HTML injection |
+| `getUnifiedHeaderCallback` | Unified header (innerHTML) | HTML injection |
+| `customStylesCallback` | Style tag (textContent) | CSS injection |
+| `actionButtons[].label` | Button labels (innerHTML) | HTML injection |
+
+**Safe callbacks** (output is escaped or used as data):
+- `beforeDateSelectCallback`, `beforeMonthChangedCallback` (return action objects)
+- `onSelect`, `onChange` (event handlers)
+- `getDateMetadataCallback` (isDisabled, dayClass, badgeClass - CSS class names only)
+
+**If displaying user-generated content**, sanitize it before passing to these callbacks or methods.
+
 ## Changelog
 
 See [CHANGELOG.md](https://github.com/keenmate/web-daterangepicker/blob/main/CHANGELOG.md) for version history and migration guides.

package/component-variables.manifest.json

@@ -0,0 +1,268 @@
+{
+  "$schema": "https://raw.githubusercontent.com/keenmate/schemas/main/component-variables.schema.json",
+  "component": "@keenmate/web-daterangepicker",
+  "prefix": "drp",
+  "baseVariables": [
+    { "name": "base-accent-color", "required": true, "usage": "Selected dates, focus rings, buttons" },
+    { "name": "base-accent-color-hover", "required": false, "usage": "Accent hover state" },
+    { "name": "base-text-color-1", "required": true, "usage": "Primary text (dates, headers, inputs)" },
+    { "name": "base-text-color-3", "required": false, "usage": "Secondary text (weekdays, placeholders)" },
+    { "name": "base-text-color-on-accent", "required": false, "usage": "Text on accent backgrounds" },
+    { "name": "base-main-bg", "required": true, "usage": "Primary background" },
+    { "name": "base-hover-bg", "required": false, "usage": "Hover states for buttons and days" },
+    { "name": "base-disabled-bg", "required": false, "usage": "Disabled/readonly surface backgrounds" },
+    { "name": "base-border-color", "required": true, "usage": "Input, dropdown, button borders" },
+    { "name": "base-border", "required": false, "usage": "Full border shorthand" },
+    { "name": "base-dropdown-bg", "required": false, "usage": "Calendar dropdown background" },
+    { "name": "base-input-bg", "required": false, "usage": "Input field background" },
+    { "name": "base-input-color", "required": false, "usage": "Input text color" },
+    { "name": "base-input-border", "required": false, "usage": "Input border" },
+    { "name": "base-input-border-hover", "required": false, "usage": "Input border on hover" },
+    { "name": "base-input-border-focus", "required": false, "usage": "Input border when focused" },
+    { "name": "base-input-placeholder-color", "required": false, "usage": "Placeholder text color" },
+    { "name": "base-input-bg-disabled", "required": false, "usage": "Disabled input background" },
+    { "name": "base-tooltip-bg", "required": false, "usage": "Tooltip background" },
+    { "name": "base-tooltip-text-color", "required": false, "usage": "Tooltip text color" },
+    { "name": "base-font-family", "required": false, "usage": "All text in component" },
+    { "name": "base-font-size-2xs", "required": false, "usage": "Badge font size (multiplier)" },
+    { "name": "base-font-size-xs", "required": false, "usage": "Extra small text (multiplier)" },
+    { "name": "base-font-size-sm", "required": false, "usage": "Small text, day cells (multiplier)" },
+    { "name": "base-font-size-base", "required": false, "usage": "Base text size (multiplier)" },
+    { "name": "base-font-size-lg", "required": false, "usage": "Large text (multiplier)" },
+    { "name": "base-font-size-xl", "required": false, "usage": "Extra large text (multiplier)" },
+    { "name": "base-font-size-2xl", "required": false, "usage": "Header text (multiplier)" },
+    { "name": "base-font-weight-normal", "required": false, "usage": "Normal text weight" },
+    { "name": "base-font-weight-medium", "required": false, "usage": "Medium text weight" },
+    { "name": "base-font-weight-semibold", "required": false, "usage": "Semibold text (headers, selected)" },
+    { "name": "base-line-height-tight", "required": false, "usage": "Tight line height" },
+    { "name": "base-line-height-normal", "required": false, "usage": "Normal line height" },
+    { "name": "base-line-height-relaxed", "required": false, "usage": "Relaxed line height" },
+    { "name": "base-border-radius-sm", "required": false, "usage": "Small radius (days, buttons)" },
+    { "name": "base-border-radius-md", "required": false, "usage": "Medium radius (inputs)" },
+    { "name": "base-border-radius-lg", "required": false, "usage": "Large radius (dropdown)" },
+    { "name": "base-input-size-xs-height", "required": false, "usage": "Extra small input height (multiplier)" },
+    { "name": "base-input-size-sm-height", "required": false, "usage": "Small input height (multiplier)" },
+    { "name": "base-input-size-md-height", "required": false, "usage": "Medium input height (multiplier)" },
+    { "name": "base-input-size-lg-height", "required": false, "usage": "Large input height (multiplier)" },
+    { "name": "base-input-size-xl-height", "required": false, "usage": "Extra large input height (multiplier)" }
+  ],
+  "componentVariables": [
+    { "name": "drp-rem", "category": "sizing", "usage": "Base sizing unit for proportional scaling (default: 10px)" },
+
+    { "name": "drp-spacing-xs", "category": "spacing", "usage": "Extra small spacing (4px)" },
+    { "name": "drp-spacing-sm", "category": "spacing", "usage": "Small spacing (8px)" },
+    { "name": "drp-spacing-md", "category": "spacing", "usage": "Medium spacing (16px)" },
+    { "name": "drp-spacing-lg", "category": "spacing", "usage": "Large spacing (24px)" },
+    { "name": "drp-spacing-xl", "category": "spacing", "usage": "Extra large spacing (32px)" },
+
+    { "name": "drp-font-size-2xs", "category": "typography", "usage": "Extra extra small font (10px)" },
+    { "name": "drp-font-size-xs", "category": "typography", "usage": "Extra small font (12px)" },
+    { "name": "drp-font-size-sm", "category": "typography", "usage": "Small font (14px)" },
+    { "name": "drp-font-size-base", "category": "typography", "usage": "Base font (16px)" },
+    { "name": "drp-font-size-lg", "category": "typography", "usage": "Large font (18px)" },
+    { "name": "drp-font-size-xl", "category": "typography", "usage": "Extra large font (20px)" },
+    { "name": "drp-font-size-2xl", "category": "typography", "usage": "Header font (24px)" },
+    { "name": "drp-font-weight-normal", "category": "typography", "usage": "Normal font weight" },
+    { "name": "drp-font-weight-medium", "category": "typography", "usage": "Medium font weight" },
+    { "name": "drp-font-weight-semibold", "category": "typography", "usage": "Semibold font weight" },
+    { "name": "drp-line-height-tight", "category": "typography", "usage": "Tight line height (1.25)" },
+    { "name": "drp-line-height-normal", "category": "typography", "usage": "Normal line height (1.5)" },
+    { "name": "drp-line-height-relaxed", "category": "typography", "usage": "Relaxed line height (1.75)" },
+
+    { "name": "drp-dropdown-bg", "category": "surface", "usage": "Calendar dropdown background" },
+    { "name": "drp-border-color", "category": "border", "usage": "Default border color" },
+    { "name": "drp-border", "category": "border", "usage": "Full border shorthand" },
+    { "name": "drp-primary-bg", "category": "surface", "usage": "Primary background color" },
+    { "name": "drp-primary-bg-hover", "category": "surface", "usage": "Primary background hover" },
+
+    { "name": "drp-accent-color", "category": "accent", "usage": "Primary accent color" },
+    { "name": "drp-accent-color-hover", "category": "accent", "usage": "Accent color on hover" },
+
+    { "name": "drp-text-primary", "category": "text", "usage": "Primary text color" },
+    { "name": "drp-text-secondary", "category": "text", "usage": "Secondary text color" },
+    { "name": "drp-text-color-on-accent", "category": "text", "usage": "Text on accent backgrounds" },
+    { "name": "drp-button-accent-text-color", "category": "text", "usage": "Button text on accent" },
+
+    { "name": "drp-tooltip-bg", "category": "tooltip", "usage": "Tooltip background" },
+    { "name": "drp-tooltip-text-color", "category": "tooltip", "usage": "Tooltip text color" },
+    { "name": "drp-tooltip-line-height", "category": "tooltip", "usage": "Tooltip line height" },
+    { "name": "drp-tooltip-max-width", "category": "tooltip", "usage": "Tooltip max width" },
+    { "name": "drp-tooltip-arrow-size", "category": "tooltip", "usage": "Tooltip arrow size" },
+
+    { "name": "drp-loading-overlay-bg", "category": "loading", "usage": "Loading overlay background" },
+    { "name": "drp-loading-spinner-size", "category": "loading", "usage": "Loading spinner size" },
+    { "name": "drp-loading-spinner-border-width", "category": "loading", "usage": "Loading spinner border width" },
+    { "name": "drp-loading-spinner-color", "category": "loading", "usage": "Loading spinner color" },
+    { "name": "drp-loading-spinner-accent", "category": "loading", "usage": "Loading spinner accent" },
+
+    { "name": "drp-border-width-base", "category": "border", "usage": "Base border width" },
+    { "name": "drp-border-radius-sm", "category": "radius", "usage": "Small border radius (4px)" },
+    { "name": "drp-border-radius-md", "category": "radius", "usage": "Medium border radius (6px)" },
+    { "name": "drp-border-radius-lg", "category": "radius", "usage": "Large border radius (8px)" },
+    { "name": "drp-border-radius", "category": "radius", "usage": "Default border radius" },
+    { "name": "drp-shadow-xl", "category": "shadow", "usage": "Extra large shadow" },
+
+    { "name": "drp-transition-fast", "category": "transition", "usage": "Fast transition duration" },
+    { "name": "drp-easing-snappy", "category": "transition", "usage": "Snappy easing function" },
+
+    { "name": "drp-z-index-dropdown", "category": "z-index", "usage": "Dropdown z-index" },
+    { "name": "drp-z-index-tooltip", "category": "z-index", "usage": "Tooltip z-index" },
+
+    { "name": "drp-input-padding-h", "category": "input", "usage": "Input horizontal padding" },
+    { "name": "drp-grid-columns", "category": "layout", "usage": "Grid columns" },
+    { "name": "drp-grid-rows", "category": "layout", "usage": "Grid rows" },
+
+    { "name": "drp-opacity-disabled", "category": "opacity", "usage": "Disabled element opacity" },
+    { "name": "drp-opacity-other-month", "category": "opacity", "usage": "Other month day opacity" },
+    { "name": "drp-opacity-hover", "category": "opacity", "usage": "Hover state opacity" },
+    { "name": "drp-opacity-dragging", "category": "opacity", "usage": "Dragging state opacity" },
+
+    { "name": "drp-input-bg", "category": "input", "usage": "Input background" },
+    { "name": "drp-input-color", "category": "input", "usage": "Input text color" },
+    { "name": "drp-input-border", "category": "input", "usage": "Input border" },
+    { "name": "drp-input-border-hover", "category": "input", "usage": "Input border on hover" },
+    { "name": "drp-input-border-focus", "category": "input", "usage": "Input border when focused" },
+    { "name": "drp-input-placeholder-color", "category": "input", "usage": "Placeholder text color" },
+    { "name": "drp-input-bg-disabled", "category": "input", "usage": "Disabled input background" },
+    { "name": "drp-input-focus-shadow-color", "category": "input", "usage": "Input focus shadow color" },
+    { "name": "drp-input-focus-shadow-size", "category": "input", "usage": "Input focus shadow size" },
+    { "name": "drp-input-icon-opacity", "category": "input", "usage": "Input icon opacity" },
+
+    { "name": "drp-input-size-xs-font", "category": "input-size", "usage": "XS input font size" },
+    { "name": "drp-input-size-xs-padding-v", "category": "input-size", "usage": "XS vertical padding" },
+    { "name": "drp-input-size-xs-padding-h", "category": "input-size", "usage": "XS horizontal padding" },
+    { "name": "drp-input-size-xs-height", "category": "input-size", "usage": "XS input height" },
+    { "name": "drp-input-size-xs-icon-size", "category": "input-size", "usage": "XS icon size" },
+    { "name": "drp-input-size-sm-font", "category": "input-size", "usage": "SM input font size" },
+    { "name": "drp-input-size-sm-padding-v", "category": "input-size", "usage": "SM vertical padding" },
+    { "name": "drp-input-size-sm-padding-h", "category": "input-size", "usage": "SM horizontal padding" },
+    { "name": "drp-input-size-sm-height", "category": "input-size", "usage": "SM input height" },
+    { "name": "drp-input-size-sm-icon-size", "category": "input-size", "usage": "SM icon size" },
+    { "name": "drp-input-size-md-font", "category": "input-size", "usage": "MD input font size" },
+    { "name": "drp-input-size-md-padding-v", "category": "input-size", "usage": "MD vertical padding" },
+    { "name": "drp-input-size-md-padding-h", "category": "input-size", "usage": "MD horizontal padding" },
+    { "name": "drp-input-size-md-height", "category": "input-size", "usage": "MD input height" },
+    { "name": "drp-input-size-md-icon-size", "category": "input-size", "usage": "MD icon size" },
+    { "name": "drp-input-size-lg-font", "category": "input-size", "usage": "LG input font size" },
+    { "name": "drp-input-size-lg-padding-v", "category": "input-size", "usage": "LG vertical padding" },
+    { "name": "drp-input-size-lg-padding-h", "category": "input-size", "usage": "LG horizontal padding" },
+    { "name": "drp-input-size-lg-height", "category": "input-size", "usage": "LG input height" },
+    { "name": "drp-input-size-lg-icon-size", "category": "input-size", "usage": "LG icon size" },
+    { "name": "drp-input-size-xl-font", "category": "input-size", "usage": "XL input font size" },
+    { "name": "drp-input-size-xl-padding-v", "category": "input-size", "usage": "XL vertical padding" },
+    { "name": "drp-input-size-xl-padding-h", "category": "input-size", "usage": "XL horizontal padding" },
+    { "name": "drp-input-size-xl-height", "category": "input-size", "usage": "XL input height" },
+    { "name": "drp-input-size-xl-icon-size", "category": "input-size", "usage": "XL icon size" },
+
+    { "name": "drp-header-text-color", "category": "header", "usage": "Header text color" },
+    { "name": "drp-header-bg-hover", "category": "header", "usage": "Header hover background" },
+    { "name": "drp-header-bg-active", "category": "header", "usage": "Header active background" },
+
+    { "name": "drp-nav-text-color", "category": "navigation", "usage": "Navigation text color" },
+    { "name": "drp-nav-border-color", "category": "navigation", "usage": "Navigation border color" },
+    { "name": "drp-nav-border", "category": "navigation", "usage": "Navigation border" },
+    { "name": "drp-nav-bg-hover", "category": "navigation", "usage": "Navigation hover background" },
+    { "name": "drp-nav-bg-active", "category": "navigation", "usage": "Navigation active background" },
+    { "name": "drp-nav-border-hover", "category": "navigation", "usage": "Navigation hover border color" },
+    { "name": "drp-nav-border-hover-full", "category": "navigation", "usage": "Navigation hover border full" },
+    { "name": "drp-nav-size", "category": "navigation", "usage": "Navigation button size" },
+
+    { "name": "drp-rolling-bg", "category": "rolling", "usage": "Rolling selector background" },
+    { "name": "drp-rolling-border-color", "category": "rolling", "usage": "Rolling selector border color" },
+    { "name": "drp-rolling-border", "category": "rolling", "usage": "Rolling selector border" },
+    { "name": "drp-rolling-scrollbar-width", "category": "rolling", "usage": "Scrollbar width" },
+    { "name": "drp-rolling-scrollbar-thumb", "category": "rolling", "usage": "Scrollbar thumb color" },
+    { "name": "drp-rolling-scrollbar-thumb-hover", "category": "rolling", "usage": "Scrollbar thumb hover color" },
+    { "name": "drp-rolling-item-bg-hover", "category": "rolling", "usage": "Rolling item hover background" },
+    { "name": "drp-rolling-item-color", "category": "rolling", "usage": "Rolling item color" },
+    { "name": "drp-rolling-item-bg-selected", "category": "rolling", "usage": "Selected rolling item background" },
+    { "name": "drp-rolling-item-color-selected", "category": "rolling", "usage": "Selected rolling item color" },
+    { "name": "drp-rolling-item-bg-selected-hover", "category": "rolling", "usage": "Selected rolling item hover background" },
+    { "name": "drp-rolling-item-justify-content", "category": "rolling", "usage": "Rolling item justify content" },
+    { "name": "drp-rolling-item-min-height", "category": "rolling", "usage": "Rolling item min height" },
+    { "name": "drp-rolling-item-padding-v", "category": "rolling", "usage": "Rolling item vertical padding" },
+    { "name": "drp-rolling-item-padding-h", "category": "rolling", "usage": "Rolling item horizontal padding" },
+    { "name": "drp-rolling-item-font-size", "category": "rolling", "usage": "Rolling item font size" },
+    { "name": "drp-rolling-item-font-weight-selected", "category": "rolling", "usage": "Selected rolling item font weight" },
+
+    { "name": "drp-weekday-color", "category": "calendar", "usage": "Weekday header color" },
+
+    { "name": "drp-day-text-color", "category": "day", "usage": "Day cell text color" },
+    { "name": "drp-day-bg-hover", "category": "day", "usage": "Day cell hover background" },
+    { "name": "drp-day-border-hover", "category": "day", "usage": "Day cell hover border color" },
+    { "name": "drp-day-today-border", "category": "day", "usage": "Today's date border color" },
+    { "name": "drp-day-selected-bg", "category": "day", "usage": "Selected day background" },
+    { "name": "drp-day-selected-color", "category": "day", "usage": "Selected day text color" },
+    { "name": "drp-day-selected-bg-hover", "category": "day", "usage": "Selected day hover background" },
+    { "name": "drp-day-focused-outline", "category": "day", "usage": "Focused day outline color" },
+    { "name": "drp-day-disabled-color", "category": "day", "usage": "Disabled day text color" },
+    { "name": "drp-day-other-month-color", "category": "day", "usage": "Other month day color" },
+    { "name": "drp-day-range-bg", "category": "day", "usage": "Range selection background" },
+    { "name": "drp-day-range-color", "category": "day", "usage": "Range selection text color" },
+    { "name": "drp-day-border-width", "category": "day", "usage": "Day cell border width" },
+    { "name": "drp-day-border-color", "category": "day", "usage": "Day cell border color" },
+    { "name": "drp-day-border", "category": "day", "usage": "Day cell border" },
+    { "name": "drp-day-focused-outline-width", "category": "day", "usage": "Focused outline width" },
+    { "name": "drp-day-focused-outline-offset", "category": "day", "usage": "Focused outline offset" },
+    { "name": "drp-day-in-range-bg-opacity", "category": "day", "usage": "In-range day background opacity" },
+    { "name": "drp-day-in-range-hover-bg-opacity", "category": "day", "usage": "In-range hover background opacity" },
+    { "name": "drp-day-drag-preview-bg-opacity", "category": "day", "usage": "Drag preview background opacity" },
+    { "name": "drp-day-drag-preview-edge-bg-opacity", "category": "day", "usage": "Drag preview edge background opacity" },
+    { "name": "drp-day-disabled-pattern-opacity", "category": "day", "usage": "Disabled pattern opacity" },
+    { "name": "drp-day-dragging-scale", "category": "day", "usage": "Dragging day scale" },
+    { "name": "drp-day-drag-preview-border-style", "category": "day", "usage": "Drag preview border style" },
+    { "name": "drp-day-drag-border", "category": "day", "usage": "Drag preview border" },
+    { "name": "drp-day-drag-invalid-bg", "category": "day", "usage": "Invalid drag background" },
+    { "name": "drp-day-drag-invalid-bg-opacity", "category": "day", "usage": "Invalid drag background opacity" },
+
+    { "name": "drp-holiday-color", "category": "special-dates", "usage": "Holiday text color" },
+    { "name": "drp-holiday-bg-opacity", "category": "special-dates", "usage": "Holiday background opacity" },
+    { "name": "drp-holiday-hover-bg-opacity", "category": "special-dates", "usage": "Holiday hover background opacity" },
+    { "name": "drp-event-color", "category": "special-dates", "usage": "Event text color" },
+    { "name": "drp-event-bg-opacity", "category": "special-dates", "usage": "Event background opacity" },
+    { "name": "drp-event-hover-bg-opacity", "category": "special-dates", "usage": "Event hover background opacity" },
+
+    { "name": "drp-summary-text-color", "category": "summary", "usage": "Summary text color" },
+    { "name": "drp-summary-border-color", "category": "summary", "usage": "Summary border color" },
+    { "name": "drp-summary-border", "category": "summary", "usage": "Summary border" },
+    { "name": "drp-summary-count-color", "category": "summary", "usage": "Summary count color" },
+
+    { "name": "drp-button-border-color", "category": "button", "usage": "Button border color" },
+    { "name": "drp-button-border", "category": "button", "usage": "Button border" },
+    { "name": "drp-button-bg", "category": "button", "usage": "Button background" },
+    { "name": "drp-button-bg-hover", "category": "button", "usage": "Button hover background" },
+    { "name": "drp-button-color", "category": "button", "usage": "Button text color" },
+    { "name": "drp-button-border-hover", "category": "button", "usage": "Button hover border color" },
+    { "name": "drp-button-border-hover-full", "category": "button", "usage": "Button hover border full" },
+    { "name": "drp-button-today-color", "category": "button", "usage": "Today button color" },
+    { "name": "drp-button-clear-color", "category": "button", "usage": "Clear button color" },
+    { "name": "drp-button-cancel-color", "category": "button", "usage": "Cancel button color" },
+    { "name": "drp-button-apply-bg", "category": "button", "usage": "Apply button background" },
+    { "name": "drp-button-apply-color", "category": "button", "usage": "Apply button text color" },
+    { "name": "drp-button-apply-border", "category": "button", "usage": "Apply button border" },
+    { "name": "drp-button-apply-bg-hover", "category": "button", "usage": "Apply button hover background" },
+
+    { "name": "drp-badge-font-size", "category": "badge", "usage": "Badge font size" },
+    { "name": "drp-badge-padding-v", "category": "badge", "usage": "Badge vertical padding" },
+    { "name": "drp-badge-padding-h", "category": "badge", "usage": "Badge horizontal padding" },
+    { "name": "drp-badge-border-radius", "category": "badge", "usage": "Badge border radius" },
+    { "name": "drp-badge-max-height", "category": "badge", "usage": "Badge max height" },
+    { "name": "drp-badge-row-height", "category": "badge", "usage": "Badge row height" },
+    { "name": "drp-badge-number-bg", "category": "badge", "usage": "Number badge background" },
+    { "name": "drp-badge-number-color", "category": "badge", "usage": "Number badge text color" },
+    { "name": "drp-badge-count-bg", "category": "badge", "usage": "Count badge background" },
+    { "name": "drp-badge-count-color", "category": "badge", "usage": "Count badge text color" },
+    { "name": "drp-badge-text-bg", "category": "badge", "usage": "Text badge background" },
+    { "name": "drp-badge-text-color", "category": "badge", "usage": "Text badge text color" },
+
+    { "name": "drp-unified-range-text-color", "category": "unified-nav", "usage": "Unified nav range text color" },
+    { "name": "drp-unified-range-bg-hover", "category": "unified-nav", "usage": "Unified nav range hover background" },
+    { "name": "drp-unified-range-bg-active", "category": "unified-nav", "usage": "Unified nav range active background" },
+    { "name": "drp-unified-month-color", "category": "unified-nav", "usage": "Unified nav month color" },
+    { "name": "drp-unified-rolling-disabled-color", "category": "unified-nav", "usage": "Unified nav disabled color" },
+
+    { "name": "drp-month-min-width", "category": "layout", "usage": "Month panel min width" },
+    { "name": "drp-month-min-width-inline", "category": "layout", "usage": "Inline month panel min width" },
+    { "name": "drp-calendar-max-width", "category": "layout", "usage": "Calendar max width" }
+  ]
+}