snice 7.0.0 → 7.0.2

package/docs/components/chat.md

@@ -115,44 +115,13 @@ React, edit, and delete are applied to the local `messages` model by the compone
 
 | Property | Description |
 |----------|-------------|
-| `--snice-chat-height` | Chat container height |
-| `--snice-chat-border-radius` | Container border radius |
-| `--snice-chat-text-color` | Primary text color |
-| `--snice-chat-background` | Background color |
-| `--snice-chat-border-color` | Border color |
-| `--snice-chat-author-color` | Author name color |
-| `--snice-chat-timestamp-color` | Timestamp text color |
-| `--snice-chat-system-color` | System message color |
-| `--snice-chat-placeholder-color` | Input placeholder color |
-| `--snice-chat-scrollbar-color` | Scrollbar thumb color |
-| `--snice-chat-scrollbar-hover-color` | Scrollbar hover color |
-| `--snice-chat-avatar-background` | Avatar background color |
-| `--snice-chat-avatar-text-color` | Avatar text color |
-| `--snice-chat-attachment-border` | Attachment border color |
-| `--snice-chat-attachment-background` | Attachment background |
-| `--snice-chat-attachment-icon-background` | Attachment icon background |
-| `--snice-chat-attachment-icon-color` | Attachment icon color |
-| `--snice-chat-reaction-background` | Reaction background |
-| `--snice-chat-reaction-border` | Reaction border |
-| `--snice-chat-reaction-hover-background` | Reaction hover background |
-| `--snice-chat-reaction-active-background` | Active reaction background |
-| `--snice-chat-reaction-active-color` | Active reaction text color |
-| `--snice-chat-reaction-active-border` | Active reaction border |
-| `--snice-chat-actions-background` | Actions menu background |
-| `--snice-chat-action-color` | Action icon color |
-| `--snice-chat-action-hover-background` | Action hover background |
-| `--snice-chat-typing-color` | Typing indicator text color |
-| `--snice-chat-typing-dot-color` | Typing indicator dot color |
-| `--snice-chat-input-background` | Input field background |
-| `--snice-chat-input-container-background` | Input area background |
-| `--snice-chat-input-border` | Input border |
-| `--snice-chat-input-focus-border` | Input focus border |
-| `--snice-chat-button-color` | Button icon color |
-| `--snice-chat-button-hover-background` | Button hover background |
-| `--snice-chat-send-color` | Send button text color |
-| `--snice-chat-send-background` | Send button background |
-| `--snice-chat-send-hover-background` | Send button hover background |
-| `--snice-chat-empty-color` | Empty state text color |
+| `--snice-chat-height` | Height of the chat container |
+| `--snice-chat-author-color` | Message author name colour |
+
+Everything else follows the theme: colours come from `--snice-color-*`, spacing
+from `--snice-spacing-*`, radii from `--snice-border-radius-*`. Override those
+tokens on the host to restyle the component, or use the [CSS parts](#css-parts)
+for structural changes.
 
 ## CSS Parts
 

package/docs/components/doc.md

@@ -38,6 +38,7 @@ A simple WYSIWYG document editor component with formatting toolbar and content i
 
 | Property | Description |
 |----------|-------------|
+| `--snice-doc-active-background` | Doc active background |
 | `--snice-doc-font-family` | Editor font family |
 | `--snice-doc-font-size` | Editor font size |
 | `--snice-doc-text-color` | Text color |

package/docs/components/drawer.md

@@ -63,6 +63,8 @@ Slide-out panel from any viewport side with focus trap and dismissal options. Su
 
 | Property | Description | Default |
 |----------|-------------|---------|
+| `--snice-drawer-backdrop` | Drawer backdrop | -- |
+| `--snice-drawer-control-size` | Drawer control size | -- |
 | `--drawer-width-small` | Small drawer width | `var(--snice-size-drawer-small, 15rem)` |
 | `--drawer-width-medium` | Medium drawer width | `var(--snice-size-drawer-medium, 20rem)` |
 | `--drawer-width-large` | Large drawer width | `var(--snice-size-drawer-large, 30rem)` |

package/docs/components/estimate.md

@@ -126,6 +126,21 @@ interface EstimateItem {
 
 | Property | Default | Description |
 |----------|---------|-------------|
+| `--snice-estimate-border-inverse` | Estimate border inverse | -- |
+| `--snice-estimate-border-inverse-light` | Estimate border inverse light | -- |
+| `--snice-estimate-creative-alpha` | Estimate creative tint | -- |
+| `--snice-estimate-creative-alpha-strong` | Estimate creative tint strong | -- |
+| `--snice-estimate-creative-end` | Estimate creative end stop | -- |
+| `--snice-estimate-creative-mid` | Estimate creative midpoint | -- |
+| `--snice-estimate-creative-shadow` | Estimate creative shadow | -- |
+| `--snice-estimate-creative-start` | Estimate creative start | -- |
+| `--snice-estimate-surface-alt` | Estimate surface alt | -- |
+| `--snice-estimate-surface-inverse-alpha` | Estimate surface inverse tint | -- |
+| `--snice-estimate-text-inverse-muted` | Estimate text inverse muted | -- |
+| `--snice-estimate-text-inverse-subtle` | Estimate text inverse subtle | -- |
+| `--snice-estimate-text-muted` | Estimate text muted | -- |
+| `--snice-estimate-text-muted-light` | Estimate text muted light | -- |
+| `--snice-estimate-warning-text` | Estimate warning text | -- |
 | `--estimate-max-width` | `50rem` | Maximum width |
 | `--estimate-bg` | `white` | Background color |
 | `--estimate-bg-element` | `rgb(252 251 249)` | Element background |

package/docs/components/layout.md

@@ -118,6 +118,15 @@ Use the `update()` method to sync navigation with the router.
 layout.update(appContext, placards, currentRoute, routeParams);
 ```
 
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--snice-layout-auth-panel-bg` | Layout auth panel background |
+| `--snice-layout-control-size` | Layout control size |
+| `--snice-layout-docs-header-height` | Layout docs header height |
+| `--snice-layout-docs-header-height-compact` | Layout docs header height compact |
+
 ## Shell variants
 
 `<snice-layout>` is the stacked shell (header / main / footer). These siblings cover the

package/docs/components/modal.md

@@ -191,6 +191,12 @@ modal.addEventListener('modal-close', () => console.log('Closed'));
 | Tab | Cycle through focusable elements within the modal |
 | Shift+Tab | Cycle backwards through focusable elements |
 
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--snice-modal-backdrop` | Modal backdrop |
+
 ## Accessibility
 
 - Uses `role="dialog"` with `aria-modal="true"` and `aria-label`

package/docs/components/notification-center.md

@@ -76,13 +76,10 @@ snice-notification-center::part(panel) {
 | `--snice-color-primary` | Mark-all-read link color and unread highlight |
 | `--snice-color-primary-subtle` | Unread item background |
 | `--snice-color-danger` | Badge background and dismiss hover color |
-| `--snice-color-text-inverse` | Badge text color |
 | `--snice-color-text-secondary` | Message text color |
 | `--snice-color-text-tertiary` | Timestamp, empty state text, and dismiss icon color |
 | `--snice-color-border` | Panel and item border color |
 | `--snice-color-surface` | Panel background color |
-| `--snice-color-surface-container-high` | Item hover and bell hover background |
-| `--snice-shadow-lg` | Panel drop shadow |
 
 ## Basic Usage
 

package/docs/components/product-card.md

@@ -154,6 +154,12 @@ card.addEventListener('add-to-cart', (e) => {
 - Out-of-stock state disables the CTA button
 - All interactive elements are keyboard-focusable
 
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--snice-product-card-badge-bg` | Product card badge background |
+
 ## Data Types
 
 ```typescript

package/docs/components/receipt.md

@@ -92,6 +92,37 @@ interface ReceiptTaxLine {
 
 | Property | Description | Default |
 |----------|-------------|---------|
+| `--snice-receipt-accent` | Receipt accent | -- |
+| `--snice-receipt-bg` | Receipt background | -- |
+| `--snice-receipt-bg-element` | Receipt background element | -- |
+| `--snice-receipt-border` | Receipt border | -- |
+| `--snice-receipt-border-color` | Receipt border color | -- |
+| `--snice-receipt-border-radius` | Receipt border radius | -- |
+| `--snice-receipt-divider-color` | Receipt divider color | -- |
+| `--snice-receipt-divider-style` | Receipt divider style | -- |
+| `--snice-receipt-divider-width` | Receipt divider width | -- |
+| `--snice-receipt-font-family` | Receipt font family | -- |
+| `--snice-receipt-footer-font-size` | Receipt footer font size | -- |
+| `--snice-receipt-header-bg` | Receipt header background | -- |
+| `--snice-receipt-item-font-size` | Receipt item font size | -- |
+| `--snice-receipt-max-width` | Receipt maximum width | -- |
+| `--snice-receipt-merchant-font-size` | Receipt merchant font size | -- |
+| `--snice-receipt-meta-font-size` | Receipt meta font size | -- |
+| `--snice-receipt-modern-radius` | Receipt modern radius | -- |
+| `--snice-receipt-modern-section-bg` | Receipt modern section background | -- |
+| `--snice-receipt-modern-section-radius` | Receipt modern section radius | -- |
+| `--snice-receipt-modern-shadow` | Receipt modern shadow | -- |
+| `--snice-receipt-padding` | Receipt padding | -- |
+| `--snice-receipt-qr-size` | Receipt qr size | -- |
+| `--snice-receipt-shadow` | Receipt shadow | -- |
+| `--snice-receipt-text` | Receipt text | -- |
+| `--snice-receipt-text-secondary` | Receipt text secondary | -- |
+| `--snice-receipt-text-tertiary` | Receipt text tertiary | -- |
+| `--snice-receipt-thermal-bg` | Receipt thermal background | -- |
+| `--snice-receipt-thermal-font` | Receipt thermal font | -- |
+| `--snice-receipt-thermal-width` | Receipt thermal width | -- |
+| `--snice-receipt-total-font-size` | Receipt total font size | -- |
+| `--snice-receipt-total-font-weight` | Receipt total font weight | -- |
 | `--receipt-max-width` | Maximum width | `22rem` |
 | `--receipt-padding` | Internal padding | `1.5rem` |
 | `--receipt-bg` | Background color | `white` |

package/docs/components/select.md

@@ -286,6 +286,12 @@ An enabled empty `required` select reports `validity.valueMissing`, including mu
 | `Escape` | Close dropdown |
 | `Tab` | Close dropdown and move focus |
 
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--snice-select-min-height` | Select minimum height |
+
 ## Accessibility
 
 - Native explicit and wrapping label association through the form-associated host

package/docs/components/tabs.md

@@ -107,6 +107,13 @@ import 'snice/components/tabs/snice-tab-panel';
 </snice-tabs>
 ```
 
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--snice-tabs-panel-padding` | Tabs panel padding |
+| `--snice-tabs-transition-duration` | Tabs transition duration |
+
 ## Examples
 
 ### Placement

package/docs/components/terminal.md

@@ -50,6 +50,23 @@ A shell terminal emulator with command execution, history navigation, and ANSI c
 
 | Property | Description | Default |
 |----------|-------------|---------|
+| `--snice-terminal-ansi-black` | Terminal ANSI black | -- |
+| `--snice-terminal-ansi-blue` | Terminal ANSI blue | -- |
+| `--snice-terminal-ansi-bright-black` | Terminal ANSI bright black | -- |
+| `--snice-terminal-ansi-bright-blue` | Terminal ANSI bright blue | -- |
+| `--snice-terminal-ansi-bright-cyan` | Terminal ANSI bright cyan | -- |
+| `--snice-terminal-ansi-bright-green` | Terminal ANSI bright green | -- |
+| `--snice-terminal-ansi-bright-magenta` | Terminal ANSI bright magenta | -- |
+| `--snice-terminal-ansi-bright-red` | Terminal ANSI bright red | -- |
+| `--snice-terminal-ansi-bright-white` | Terminal ANSI bright white | -- |
+| `--snice-terminal-ansi-bright-yellow` | Terminal ANSI bright yellow | -- |
+| `--snice-terminal-ansi-cyan` | Terminal ANSI cyan | -- |
+| `--snice-terminal-ansi-green` | Terminal ANSI green | -- |
+| `--snice-terminal-ansi-magenta` | Terminal ANSI magenta | -- |
+| `--snice-terminal-ansi-red` | Terminal ANSI red | -- |
+| `--snice-terminal-ansi-white` | Terminal ANSI white | -- |
+| `--snice-terminal-ansi-yellow` | Terminal ANSI yellow | -- |
+| `--snice-terminal-scrollbar-hover-color` | Terminal scrollbar hover color | -- |
 | `--snice-terminal-height` | Terminal height | `400px` |
 | `--snice-terminal-font-size` | Font size | `0.875rem` |
 | `--snice-terminal-line-height` | Line height | `1.2` |

package/docs/components/tooltip.md

@@ -183,6 +183,13 @@ Set the `strict-positioning` attribute to disable automatic repositioning when n
 </div>
 ```
 
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--snice-tooltip-bg` | Tooltip background |
+| `--snice-tooltip-color` | Tooltip color |
+
 ## Attribute-Based Tooltips
 
 Wrapping elements in `<snice-tooltip>` can break parent-child relationships in components that require direct children (accordion, tabs, stepper, breadcrumbs, table, etc.). The attribute-based approach uses a plain `tooltip` attribute on any element, avoiding DOM disruption entirely.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "snice",
-  "version": "7.0.0",
+  "version": "7.0.2",
   "type": "module",
   "description": "A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.",
   "main": "dist/index.cjs",
@@ -150,7 +150,7 @@
     "test:browsers:install": "playwright install chromium firefox webkit",
     "test:live:components": "npx playwright test tests/live/components --config=tests/playwright.config.ts",
     "test:live:templates": "npx playwright test tests/live/templates --config=tests/playwright.config.ts",
-    "prerelease": "NEXT_VERSION=$(node tooling/release/get-next-version.js) && node tooling/generators/sync-template-versions.js $NEXT_VERSION && npm run build",
+    "prerelease": "export NEXT_VERSION=$(node tooling/release/get-next-version.js) && node tooling/generators/sync-template-versions.js $NEXT_VERSION && npm run build",
     "release": "semantic-release --no-ci",
     "postrelease": "npm run deploy:website",
     "release:dry-run": "semantic-release --dry-run --no-ci",