@incursa/ui-kit 1.8.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incursa/ui-kit",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "private": false,
   "description": "Reusable UI kit for data-heavy business applications.",
   "keywords": [
@@ -75,6 +75,9 @@
     "package": "npm run build && npm run smoke && npm run pack:tarball"
   },
   "dependencies": {
+    "d3-array": "^3.2.4",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
     "lucide": "^1.17.0"
   },
   "devDependencies": {

package/src/inc-design-language.scss

@@ -3394,6 +3394,100 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
     }
 }
 
+.inc-sparkline {
+    --inc-sparkline-stroke: var(--inc-text-secondary);
+    --inc-sparkline-fill: rgba(var(--inc-text-secondary-rgb), 0.12);
+    --inc-sparkline-marker: var(--inc-sparkline-stroke);
+    --inc-sparkline-reference: rgba(var(--inc-text-muted-rgb), 0.68);
+    --inc-sparkline-muted: rgba(var(--inc-text-muted-rgb), 0.54);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--inc-sparkline-width, 7.5rem);
+    block-size: var(--inc-sparkline-height, 2rem);
+    min-inline-size: 1rem;
+    min-block-size: 1rem;
+    vertical-align: middle;
+    color: var(--inc-sparkline-stroke);
+    contain: paint;
+
+    &--tone-positive {
+        --inc-sparkline-stroke: var(--bs-success);
+        --inc-sparkline-fill: rgba(var(--bs-success-rgb), 0.16);
+        --inc-sparkline-marker: var(--bs-success-text-emphasis);
+    }
+
+    &--tone-negative {
+        --inc-sparkline-stroke: var(--bs-danger);
+        --inc-sparkline-fill: rgba(var(--bs-danger-rgb), 0.14);
+        --inc-sparkline-marker: var(--bs-danger-text-emphasis);
+    }
+
+    &--tone-muted {
+        --inc-sparkline-stroke: var(--inc-text-muted);
+        --inc-sparkline-fill: rgba(var(--inc-text-muted-rgb), 0.1);
+        --inc-sparkline-marker: var(--inc-text-secondary);
+    }
+
+    &--tone-accent {
+        --inc-sparkline-stroke: var(--bs-primary);
+        --inc-sparkline-fill: rgba(var(--bs-primary-rgb), 0.14);
+        --inc-sparkline-marker: var(--bs-primary);
+    }
+
+    &__svg {
+        display: block;
+        inline-size: 100%;
+        block-size: 100%;
+        overflow: visible;
+    }
+
+    &__line,
+    &__empty-line {
+        fill: none;
+        stroke: var(--inc-sparkline-stroke);
+        stroke-width: 1.6;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+    }
+
+    &__area {
+        fill: var(--inc-sparkline-fill);
+        stroke: none;
+    }
+
+    &__bar {
+        fill: var(--inc-sparkline-stroke);
+        opacity: 0.82;
+    }
+
+    &__marker {
+        fill: var(--inc-sparkline-marker);
+        stroke: var(--inc-surface-primary);
+        stroke-width: 1.5;
+    }
+
+    &__reference {
+        stroke: var(--inc-sparkline-reference);
+        stroke-width: 1;
+        stroke-dasharray: 3 3;
+    }
+
+    &__empty-line {
+        stroke: var(--inc-sparkline-muted);
+        stroke-dasharray: 2 4;
+    }
+
+    &__empty {
+        fill: var(--inc-text-muted);
+        font-family: $font-family-sans-serif;
+        font-size: 0.625rem;
+        font-weight: 600;
+        letter-spacing: 0;
+        pointer-events: none;
+    }
+}
+
 .inc-alert-container {
     @extend .container-xxl;
     position: relative;

package/src/web-components/README.md

@@ -71,6 +71,8 @@ The runtime auto-defines the shipped elements on load. If a consumer needs expli
   Button, button-group, button-toolbar, close-button, alert, and empty-state custom elements.
 - [`components/collections.js`](components/collections.js)
   List-group, key-value-grid, and key-value custom elements.
+- [`components/visualizations.js`](components/visualizations.js)
+  D3-backed sparkline custom element and small path/data helpers.
 - [`components/overlays.js`](components/overlays.js)
   Disclosure, dialog, and drawer custom elements.
 - [`index.js`](index.js)
@@ -86,6 +88,7 @@ The Web Component layer should mirror the current CSS kit, not reinterpret it.
 - Form wrappers should keep native controls native.
 - Navigation components should reflect keyboard and focus state in the DOM.
 - Feedback and status shells should announce state accessibly, badge/spinner atoms should standardize the common tone and loading defaults, and action/detail plus collection hosts should keep buttons, alerts, list groups, and description-list pairs declarative without inventing a second styling vocabulary.
+- Visualization components should stay compact, accessible, and evidence-supporting. Use D3 for geometry and scales, not DOM mutation.
 - Overlays should prefer native `<details>` and `<dialog>` behavior when that satisfies the contract.
 - Tables, data presentation, utility atoms, and the remaining presentation-only surfaces should remain CSS-first until the component contract is explicit and worth the runtime cost.
 

package/src/web-components/RUNTIME-NOTES.md

@@ -12,6 +12,7 @@ The runtime defines the approved v1 host family set:
 - feedback and status: `inc-state-panel`, `inc-live-region`, `inc-auto-refresh`, `inc-theme-switcher`, `inc-badge`, `inc-spinner`
 - actions and detail shells: `inc-button`, `inc-button-group`, `inc-button-toolbar`, `inc-close-button`, `inc-alert`, `inc-empty-state`
 - collections: `inc-list-group`, `inc-key-value-grid`, `inc-key-value`
+- data visualization: `inc-sparkline`
 - overlays: `inc-disclosure`, `inc-dialog`, `inc-drawer`
 
 ## Contract shape
@@ -28,6 +29,7 @@ The runtime defines the approved v1 host family set:
   - `components/feedback.js`
   - `components/actions.js`
   - `components/collections.js`
+  - `components/visualizations.js`
   - `components/overlays.js`
 - Public registration API is idempotent:
   - `window.IncWebComponents.defineAll()`