@fusedashlabs/widgets 0.3.1 → 0.4.1

package/dist/components/kpi-widget/element/styles.js

@@ -11,22 +11,43 @@ const kpiWidgetStyles = css`
     box-sizing: border-box;
   }
 
-  .kpi-root[data-single='true'] {
+  .kpi-root[data-layout='single'] {
     min-height: 120px;
   }
 
+  .kpi-root[data-layout='advanced'] {
+    min-height: 220px;
+  }
+
   .kpi-root {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%;
     min-height: inherit;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .kpi-section-title {
+    flex: 0 0 auto;
+    width: 100%;
+    min-width: 0;
+    padding: 8px 14px 4px;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 600;
+    color: var(--ui9000-color-text, #111827);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .kpi-grid {
     flex: 1;
     min-height: 0;
     width: 100%;
+    scrollbar-width: thin;
   }
 
   .kpi-grid[data-layout='grid'] {
@@ -57,10 +78,109 @@ const kpiWidgetStyles = css`
     overflow: auto;
   }
 
-  .kpi-grid {
+  .kpi-advanced {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .kpi-advanced-main {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    width: 100%;
+    min-width: 0;
+    min-height: 80px;
+    overflow: hidden;
+  }
+
+  .kpi-advanced-main .kpi-card {
+    flex: 1;
+    min-height: 0;
+    padding: 14px 16px 8px;
+  }
+
+  .kpi-advanced-split {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    align-items: stretch;
+  }
+
+  .kpi-advanced-split[data-split='horizontal'] {
+    flex-direction: row;
+  }
+
+  .kpi-advanced-split[data-split='stacked'] {
+    flex-direction: column;
+  }
+
+  .kpi-advanced-value {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 0;
+  }
+
+  .kpi-advanced-split[data-split='horizontal'] .kpi-advanced-value {
+    flex: 0 0 25%;
+    width: 25%;
+    padding-right: 8px;
+  }
+
+  .kpi-advanced-split[data-split='stacked'] .kpi-advanced-value {
+    flex: 0 0 auto;
+    width: 100%;
+    margin-bottom: 8px;
+  }
+
+  .kpi-advanced-chart {
+    min-width: 0;
+    min-height: 0;
+    flex: 1 1 0;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .kpi-advanced-chart ui9000-chart-renderer {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .kpi-supporting {
+    display: grid;
+    grid-auto-rows: minmax(72px, 1fr);
+    gap: 0;
+    flex: 0 1 auto;
+    min-width: 0;
+    min-height: 72px;
+    max-height: 50%;
+    width: 100%;
+    align-content: start;
+    border-top: 1px solid var(--ui9000-color-border, #e5e7eb);
+    padding-top: 4px;
     scrollbar-width: thin;
   }
 
+  .kpi-supporting[data-scroll='vertical'] {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .kpi-supporting[data-scroll='horizontal'] {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .kpi-supporting[data-scroll='both'] {
+    overflow: auto;
+  }
+
   .kpi-card {
     display: flex;
     flex-direction: column;
@@ -74,15 +194,78 @@ const kpiWidgetStyles = css`
     padding: 14px;
   }
 
+  .kpi-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    gap: 8px;
+    margin-bottom: 6px;
+  }
+
+  .kpi-grid[data-layout='single'] .kpi-header,
+  .kpi-advanced-main .kpi-header {
+    margin-bottom: 10px;
+  }
+
   .kpi-name {
-    margin: 0 0 4px;
+    margin: 0;
     font-size: 12px;
-    font-weight: 500;
+    font-weight: 600;
     line-height: 1.3;
     color: var(--ui9000-color-text-muted, #6b7280);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .kpi-grid[data-layout='single'] .kpi-name,
+  .kpi-advanced-main .kpi-name {
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--ui9000-color-text, #111827);
+  }
+
+  .kpi-badge {
+    flex-shrink: 0;
+    width: fit-content;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 400;
+    padding: 1px 6px;
+    border-radius: 14px;
+    color: var(--ui9000-color-text-muted, #6b7280);
+    background: var(--ui9000-color-surface-muted, #f3f4f6);
+  }
+
+  .kpi-grid[data-layout='single'] .kpi-badge,
+  .kpi-advanced-main .kpi-badge {
+    font-size: 14px;
+    line-height: 20px;
+    padding: 3px 9px;
+  }
+
+  .kpi-badge[data-variant='Good'],
+  .kpi-badge[data-variant='OnTarget'] {
+    color: #0e8a5b;
+    background: rgba(14, 138, 91, 0.12);
+  }
+
+  .kpi-badge[data-variant='Low'],
+  .kpi-badge[data-variant='OffTarget'] {
+    color: #d92d20;
+    background: rgba(217, 45, 32, 0.12);
+  }
+
+  .kpi-badge[data-variant='Mission'] {
+    color: #fff;
+    background: #111827;
   }
 
   .kpi-value-row {
@@ -92,6 +275,10 @@ const kpiWidgetStyles = css`
     flex-wrap: wrap;
   }
 
+  .kpi-advanced-main .kpi-value-row {
+    flex-wrap: nowrap;
+  }
+
   .kpi-value {
     margin: 0;
     font-size: 24px;
@@ -100,17 +287,63 @@ const kpiWidgetStyles = css`
     color: var(--ui9000-color-text, #111827);
   }
 
-  .kpi-unit {
+  .kpi-grid[data-layout='single'] .kpi-value {
+    font-size: clamp(28px, 8vw, 48px);
+  }
+
+  .kpi-advanced-main .kpi-value {
+    font-size: clamp(18px, 5vw, 42px);
+  }
+
+  :host([scale='compact']) .kpi-value {
+    font-size: 18px;
+  }
+
+  :host([scale='compact']) .kpi-grid[data-layout='single'] .kpi-value {
+    font-size: clamp(20px, 6vw, 32px);
+  }
+
+  :host([scale='comfortable']) .kpi-value {
+    font-size: 28px;
+  }
+
+  :host([scale='comfortable']) .kpi-grid[data-layout='single'] .kpi-value {
+    font-size: clamp(32px, 9vw, 56px);
+  }
+
+  .kpi-unit,
+  .kpi-suffix {
     font-size: 14px;
     font-weight: 300;
+    color: var(--ui9000-color-text, #111827);
   }
 
   .kpi-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
     font-size: 12px;
     font-weight: 600;
     color: var(--ui9000-color-text-muted, #6b7280);
   }
 
+  .kpi-indicator-arrow {
+    font-size: 11px;
+    line-height: 1;
+  }
+
+  .kpi-subtitle-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    margin-top: 4px;
+  }
+
+  .kpi-subtitle-row .kpi-subtitle {
+    margin-top: 0;
+  }
+
   .kpi-subtitle {
     margin: 6px 0 0;
     padding-left: 15px;
@@ -132,6 +365,36 @@ const kpiWidgetStyles = css`
     background: var(--ui9000-color-text-muted, #6b7280);
   }
 
+  .kpi-footer {
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 6px 14px 8px;
+    border-top: 1px solid var(--ui9000-color-border, #e5e7eb);
+    box-sizing: border-box;
+  }
+
+  .kpi-footer-block {
+    display: flex;
+    gap: 4px;
+    min-width: 0;
+    font-size: 13px;
+    line-height: 20px;
+  }
+
+  .kpi-footer-label {
+    font-weight: 400;
+    color: var(--ui9000-color-text-muted, #6b7280);
+  }
+
+  .kpi-footer-value {
+    font-weight: 400;
+    color: var(--ui9000-color-text, #111827);
+  }
+
   .empty {
     display: grid;
     place-items: center;

package/dist/components/kpi-widget/element/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/kpi-widget/element/styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const kpiWidgetStyles = css`\n  :host {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    min-height: 95px;\n    color: var(--ui9000-color-text, #111827);\n    font-family: var(--ui9000-font-family, system-ui, sans-serif);\n    box-sizing: border-box;\n  }\n\n  .kpi-root[data-single='true'] {\n    min-height: 120px;\n  }\n\n  .kpi-root {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: inherit;\n  }\n\n  .kpi-grid {\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n  }\n\n  .kpi-grid[data-layout='grid'] {\n    display: grid;\n    grid-auto-rows: minmax(72px, 1fr);\n    gap: 0;\n    align-content: start;\n  }\n\n  .kpi-grid[data-layout='single'] {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: stretch;\n  }\n\n  .kpi-grid[data-scroll='vertical'] {\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n\n  .kpi-grid[data-scroll='horizontal'] {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n\n  .kpi-grid[data-scroll='both'] {\n    overflow: auto;\n  }\n\n  .kpi-grid {\n    scrollbar-width: thin;\n  }\n\n  .kpi-card {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    min-width: 0;\n    padding: 10px 12px;\n    box-sizing: border-box;\n  }\n\n  .kpi-grid[data-layout='single'] .kpi-card {\n    padding: 14px;\n  }\n\n  .kpi-name {\n    margin: 0 0 4px;\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1.3;\n    color: var(--ui9000-color-text-muted, #6b7280);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .kpi-value-row {\n    display: flex;\n    align-items: baseline;\n    gap: 4px;\n    flex-wrap: wrap;\n  }\n\n  .kpi-value {\n    margin: 0;\n    font-size: 24px;\n    font-weight: 700;\n    line-height: 1.15;\n    color: var(--ui9000-color-text, #111827);\n  }\n\n  .kpi-unit {\n    font-size: 14px;\n    font-weight: 300;\n  }\n\n  .kpi-indicator {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--ui9000-color-text-muted, #6b7280);\n  }\n\n  .kpi-subtitle {\n    margin: 6px 0 0;\n    padding-left: 15px;\n    position: relative;\n    font-size: 12px;\n    line-height: 1.35;\n    color: var(--ui9000-color-text-muted, #6b7280);\n  }\n\n  .kpi-subtitle::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    transform: translateY(-50%);\n    background: var(--ui9000-color-text-muted, #6b7280);\n  }\n\n  .empty {\n    display: grid;\n    place-items: center;\n    flex: 1;\n    min-height: 72px;\n    color: var(--ui9000-color-text-muted, #6b7280);\n    font-size: 13px;\n  }\n`;\n"],"names":[],"mappings":";AAEO,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/kpi-widget/element/styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const kpiWidgetStyles = css`\n  :host {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    min-height: 95px;\n    color: var(--ui9000-color-text, #111827);\n    font-family: var(--ui9000-font-family, system-ui, sans-serif);\n    box-sizing: border-box;\n  }\n\n  .kpi-root[data-layout='single'] {\n    min-height: 120px;\n  }\n\n  .kpi-root[data-layout='advanced'] {\n    min-height: 220px;\n  }\n\n  .kpi-root {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: inherit;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  .kpi-section-title {\n    flex: 0 0 auto;\n    width: 100%;\n    min-width: 0;\n    padding: 8px 14px 4px;\n    font-size: 14px;\n    line-height: 20px;\n    font-weight: 600;\n    color: var(--ui9000-color-text, #111827);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .kpi-grid {\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n    scrollbar-width: thin;\n  }\n\n  .kpi-grid[data-layout='grid'] {\n    display: grid;\n    grid-auto-rows: minmax(72px, 1fr);\n    gap: 0;\n    align-content: start;\n  }\n\n  .kpi-grid[data-layout='single'] {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: stretch;\n  }\n\n  .kpi-grid[data-scroll='vertical'] {\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n\n  .kpi-grid[data-scroll='horizontal'] {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n\n  .kpi-grid[data-scroll='both'] {\n    overflow: auto;\n  }\n\n  .kpi-advanced {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-width: 0;\n    min-height: 0;\n    overflow: hidden;\n  }\n\n  .kpi-advanced-main {\n    display: flex;\n    flex-direction: column;\n    flex: 1 1 0;\n    width: 100%;\n    min-width: 0;\n    min-height: 80px;\n    overflow: hidden;\n  }\n\n  .kpi-advanced-main .kpi-card {\n    flex: 1;\n    min-height: 0;\n    padding: 14px 16px 8px;\n  }\n\n  .kpi-advanced-split {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n    min-height: 0;\n    align-items: stretch;\n  }\n\n  .kpi-advanced-split[data-split='horizontal'] {\n    flex-direction: row;\n  }\n\n  .kpi-advanced-split[data-split='stacked'] {\n    flex-direction: column;\n  }\n\n  .kpi-advanced-value {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    min-width: 0;\n  }\n\n  .kpi-advanced-split[data-split='horizontal'] .kpi-advanced-value {\n    flex: 0 0 25%;\n    width: 25%;\n    padding-right: 8px;\n  }\n\n  .kpi-advanced-split[data-split='stacked'] .kpi-advanced-value {\n    flex: 0 0 auto;\n    width: 100%;\n    margin-bottom: 8px;\n  }\n\n  .kpi-advanced-chart {\n    min-width: 0;\n    min-height: 0;\n    flex: 1 1 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .kpi-advanced-chart ui9000-chart-renderer {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\n  .kpi-supporting {\n    display: grid;\n    grid-auto-rows: minmax(72px, 1fr);\n    gap: 0;\n    flex: 0 1 auto;\n    min-width: 0;\n    min-height: 72px;\n    max-height: 50%;\n    width: 100%;\n    align-content: start;\n    border-top: 1px solid var(--ui9000-color-border, #e5e7eb);\n    padding-top: 4px;\n    scrollbar-width: thin;\n  }\n\n  .kpi-supporting[data-scroll='vertical'] {\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n\n  .kpi-supporting[data-scroll='horizontal'] {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n\n  .kpi-supporting[data-scroll='both'] {\n    overflow: auto;\n  }\n\n  .kpi-card {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    min-width: 0;\n    padding: 10px 12px;\n    box-sizing: border-box;\n  }\n\n  .kpi-grid[data-layout='single'] .kpi-card {\n    padding: 14px;\n  }\n\n  .kpi-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    gap: 8px;\n    margin-bottom: 6px;\n  }\n\n  .kpi-grid[data-layout='single'] .kpi-header,\n  .kpi-advanced-main .kpi-header {\n    margin-bottom: 10px;\n  }\n\n  .kpi-name {\n    margin: 0;\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 1.3;\n    color: var(--ui9000-color-text-muted, #6b7280);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    flex: 1;\n    min-width: 0;\n  }\n\n  .kpi-grid[data-layout='single'] .kpi-name,\n  .kpi-advanced-main .kpi-name {\n    font-size: 14px;\n    line-height: 20px;\n    color: var(--ui9000-color-text, #111827);\n  }\n\n  .kpi-badge {\n    flex-shrink: 0;\n    width: fit-content;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    line-height: 16px;\n    font-weight: 400;\n    padding: 1px 6px;\n    border-radius: 14px;\n    color: var(--ui9000-color-text-muted, #6b7280);\n    background: var(--ui9000-color-surface-muted, #f3f4f6);\n  }\n\n  .kpi-grid[data-layout='single'] .kpi-badge,\n  .kpi-advanced-main .kpi-badge {\n    font-size: 14px;\n    line-height: 20px;\n    padding: 3px 9px;\n  }\n\n  .kpi-badge[data-variant='Good'],\n  .kpi-badge[data-variant='OnTarget'] {\n    color: #0e8a5b;\n    background: rgba(14, 138, 91, 0.12);\n  }\n\n  .kpi-badge[data-variant='Low'],\n  .kpi-badge[data-variant='OffTarget'] {\n    color: #d92d20;\n    background: rgba(217, 45, 32, 0.12);\n  }\n\n  .kpi-badge[data-variant='Mission'] {\n    color: #fff;\n    background: #111827;\n  }\n\n  .kpi-value-row {\n    display: flex;\n    align-items: baseline;\n    gap: 4px;\n    flex-wrap: wrap;\n  }\n\n  .kpi-advanced-main .kpi-value-row {\n    flex-wrap: nowrap;\n  }\n\n  .kpi-value {\n    margin: 0;\n    font-size: 24px;\n    font-weight: 700;\n    line-height: 1.15;\n    color: var(--ui9000-color-text, #111827);\n  }\n\n  .kpi-grid[data-layout='single'] .kpi-value {\n    font-size: clamp(28px, 8vw, 48px);\n  }\n\n  .kpi-advanced-main .kpi-value {\n    font-size: clamp(18px, 5vw, 42px);\n  }\n\n  :host([scale='compact']) .kpi-value {\n    font-size: 18px;\n  }\n\n  :host([scale='compact']) .kpi-grid[data-layout='single'] .kpi-value {\n    font-size: clamp(20px, 6vw, 32px);\n  }\n\n  :host([scale='comfortable']) .kpi-value {\n    font-size: 28px;\n  }\n\n  :host([scale='comfortable']) .kpi-grid[data-layout='single'] .kpi-value {\n    font-size: clamp(32px, 9vw, 56px);\n  }\n\n  .kpi-unit,\n  .kpi-suffix {\n    font-size: 14px;\n    font-weight: 300;\n    color: var(--ui9000-color-text, #111827);\n  }\n\n  .kpi-indicator {\n    display: inline-flex;\n    align-items: center;\n    gap: 2px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--ui9000-color-text-muted, #6b7280);\n  }\n\n  .kpi-indicator-arrow {\n    font-size: 11px;\n    line-height: 1;\n  }\n\n  .kpi-subtitle-row {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    min-width: 0;\n    margin-top: 4px;\n  }\n\n  .kpi-subtitle-row .kpi-subtitle {\n    margin-top: 0;\n  }\n\n  .kpi-subtitle {\n    margin: 6px 0 0;\n    padding-left: 15px;\n    position: relative;\n    font-size: 12px;\n    line-height: 1.35;\n    color: var(--ui9000-color-text-muted, #6b7280);\n  }\n\n  .kpi-subtitle::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    transform: translateY(-50%);\n    background: var(--ui9000-color-text-muted, #6b7280);\n  }\n\n  .kpi-footer {\n    flex: 0 0 auto;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 12px;\n    width: 100%;\n    padding: 6px 14px 8px;\n    border-top: 1px solid var(--ui9000-color-border, #e5e7eb);\n    box-sizing: border-box;\n  }\n\n  .kpi-footer-block {\n    display: flex;\n    gap: 4px;\n    min-width: 0;\n    font-size: 13px;\n    line-height: 20px;\n  }\n\n  .kpi-footer-label {\n    font-weight: 400;\n    color: var(--ui9000-color-text-muted, #6b7280);\n  }\n\n  .kpi-footer-value {\n    font-weight: 400;\n    color: var(--ui9000-color-text, #111827);\n  }\n\n  .empty {\n    display: grid;\n    place-items: center;\n    flex: 1;\n    min-height: 72px;\n    color: var(--ui9000-color-text-muted, #6b7280);\n    font-size: 13px;\n  }\n`;\n"],"names":[],"mappings":";AAEO,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/kpi-widget/element/ui9000-kpi-widget.d.ts

@@ -4,16 +4,25 @@ import { WidgetScale } from '../../../types/index.js';
 export declare class Ui9000KpiWidget extends Ui9000ChartElement {
     static styles: import('lit').CSSResult[];
     scale: WidgetScale;
-    private _cards;
+    private _model;
     private _gridColumns;
     private _scrollAxis;
+    private _advancedSplit;
     private _resizeObserver?;
+    private _raf;
+    private _rendererLoading;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changed: PropertyValues): void;
+    /** Nested viz uses `<ui9000-chart-renderer>` — load it only for advanced KPIs. */
+    private ensureChartRenderer;
+    private scheduleLayout;
     private updateGridLayout;
+    private renderBadge;
     private renderValue;
     private renderCard;
+    private renderFooter;
+    private renderAdvanced;
     render(): import('lit-html').TemplateResult<1>;
 }
 export declare function registerKpiWidget(): void;

package/dist/components/kpi-widget/element/ui9000-kpi-widget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui9000-kpi-widget.d.ts","sourceRoot":"","sources":["../../../../src/components/kpi-widget/element/ui9000-kpi-widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAC7F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAa3D,qBACa,eAAgB,SAAQ,kBAAkB;IACrD,OAAgB,MAAM,4BAAuC;IAG7D,KAAK,EAAE,WAAW,CAAa;IAG/B,OAAO,CAAC,MAAM,CAAsB;IAGpC,OAAO,CAAC,YAAY,CAAK;IAGzB,OAAO,CAAC,WAAW,CAAiC;IAEpD,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEhC,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAQ/C,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,UAAU;IAUT,MAAM;CA6BhB;AAED,wBAAgB,iBAAiB,IAAI,IAAI,CAIxC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"ui9000-kpi-widget.d.ts","sourceRoot":"","sources":["../../../../src/components/kpi-widget/element/ui9000-kpi-widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAC7F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAkB3D,qBACa,eAAgB,SAAQ,kBAAkB;IACrD,OAAgB,MAAM,4BAAuC;IAG7D,KAAK,EAAE,WAAW,CAAa;IAG/B,OAAO,CAAC,MAAM,CAAkE;IAGhF,OAAO,CAAC,YAAY,CAAK;IAGzB,OAAO,CAAC,WAAW,CAAiC;IAGpD,OAAO,CAAC,cAAc,CAAqC;IAE3D,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,gBAAgB,CAAS;IAExB,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAQ/C,kFAAkF;IAClF,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,WAAW;IAwBnB,OAAO,CAAC,UAAU;IA4BlB,OAAO,CAAC,YAAY;IA+BpB,OAAO,CAAC,cAAc;IA2Db,MAAM;CAqChB;AAED,wBAAgB,iBAAiB,IAAI,IAAI,CAIxC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/components/kpi-widget/element/ui9000-kpi-widget.js

@@ -1,11 +1,12 @@
 import { nothing, html } from "lit";
-import { styleMap as o } from "../../../node_modules/lit-html/directives/style-map.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { property, state, customElement } from "lit/decorators.js";
 import { Ui9000ChartElement } from "../../../element/ui9000-chart-base.js";
 import { parseJsonAttr } from "../../../utils/chart-helpers.js";
 import { kpiWidgetStyles } from "./styles.js";
 import { normalizeKpiData } from "../lib/normalize.js";
-import { getKpiGridColumns, MIN_KPI_CELL_WIDTH, getKpiGridScrollAxis } from "../lib/grid.js";
+import { getKpiGridColumns, getAdvancedSplitLayout, MIN_KPI_CELL_WIDTH, getKpiGridScrollAxis } from "../lib/grid.js";
+import { visualisationChartType } from "../lib/extract.js";
 import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -21,75 +22,198 @@ let Ui9000KpiWidget = class extends Ui9000ChartElement {
   constructor() {
     super(...arguments);
     this.scale = "default";
-    this._cards = [];
+    this._model = { layout: "empty", cards: [], supporting: [] };
     this._gridColumns = 1;
     this._scrollAxis = "vertical";
+    this._advancedSplit = "horizontal";
+    this._raf = 0;
+    this._rendererLoading = false;
   }
   connectedCallback() {
     super.connectedCallback();
-    this._resizeObserver = new ResizeObserver(() => this.updateGridLayout());
+    this._resizeObserver = new ResizeObserver(() => this.scheduleLayout());
     this._resizeObserver.observe(this);
   }
   disconnectedCallback() {
     var _a;
     (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
+    cancelAnimationFrame(this._raf);
     super.disconnectedCallback();
   }
   updated(changed) {
     if (changed.has("dataJson")) {
-      const model = normalizeKpiData(parseJsonAttr(this.dataJson, null));
-      this._cards = model.cards;
+      this._model = normalizeKpiData(parseJsonAttr(this.dataJson, null));
       this.updateGridLayout();
+      this.ensureChartRenderer();
     }
   }
+  /** Nested viz uses `<ui9000-chart-renderer>` — load it only for advanced KPIs. */
+  ensureChartRenderer() {
+    if (this._rendererLoading || this._model.layout !== "advanced" || !this._model.visualisation) {
+      return;
+    }
+    this._rendererLoading = true;
+    void import("../../chart-renderer/index.js").then(() => this.requestUpdate());
+  }
+  scheduleLayout() {
+    cancelAnimationFrame(this._raf);
+    this._raf = requestAnimationFrame(() => this.updateGridLayout());
+  }
   updateGridLayout() {
-    const count = this._cards.length;
-    const columns = getKpiGridColumns(this.clientWidth, count);
+    const layout = this._model.layout;
+    const count = layout === "advanced" ? this._model.supporting.length : this._model.cards.length;
+    const columns = getKpiGridColumns(this.clientWidth, Math.max(count, 1));
     const scrollAxis = getKpiGridScrollAxis(columns, count);
+    const split = getAdvancedSplitLayout(
+      this.clientWidth,
+      this.clientHeight,
+      this._advancedSplit
+    );
     if (columns !== this._gridColumns) this._gridColumns = columns;
     if (scrollAxis !== this._scrollAxis) this._scrollAxis = scrollAxis;
+    if (split !== this._advancedSplit) this._advancedSplit = split;
+  }
+  renderBadge(card) {
+    if (!card.status) return nothing;
+    return html`
+      <span class="kpi-badge" data-variant=${card.status.variant}>${card.status.text}</span>
+    `;
   }
   renderValue(card) {
     const label = card.label;
     const unitLeft = (label == null ? void 0 : label.position) === "left" && label.text;
     const unitRight = (label == null ? void 0 : label.position) === "right" && label.text;
+    const showIndicator = Boolean(card.showPercentage && card.indicator);
     return html`
       <div class="kpi-value-row">
         ${unitLeft ? html`<span class="kpi-unit">${unitLeft}</span>` : nothing}
         <h2 class="kpi-value">${card.value}</h2>
+        ${card.suffix ? html`<span class="kpi-suffix">${card.suffix}</span>` : nothing}
         ${unitRight ? html`<span class="kpi-unit">${unitRight}</span>` : nothing}
-        ${card.indicator ? html`<span class="kpi-indicator">${card.indicator}</span>` : nothing}
+        ${showIndicator ? html`
+              <span class="kpi-indicator">
+                <span class="kpi-indicator-arrow" aria-hidden="true">›</span>
+                ${card.indicator}
+              </span>
+            ` : nothing}
       </div>
     `;
   }
-  renderCard(card) {
+  renderCard(card, role) {
+    const showName = !card.hideName;
+    const showHeaderBadge = Boolean(card.status) && (role === "single" || role === "main");
+    const showInlineBadge = Boolean(card.status) && !showHeaderBadge;
     return html`
-      <article class="kpi-card" aria-label=${card.name}>
-        <p class="kpi-name">${card.name}</p>
+      <article class="kpi-card" data-role=${role} aria-label=${card.name}>
+        ${showName || showHeaderBadge ? html`
+              <div class="kpi-header">
+                ${showName ? html`<p class="kpi-name">${card.name}</p>` : html`<span></span>`}
+                ${showHeaderBadge ? this.renderBadge(card) : nothing}
+              </div>
+            ` : nothing}
         ${this.renderValue(card)}
-        ${card.subtitle ? html`<p class="kpi-subtitle">${card.subtitle}</p>` : nothing}
+        ${showInlineBadge || card.subtitle ? html`
+              <div class="kpi-subtitle-row">
+                ${showInlineBadge ? this.renderBadge(card) : nothing}
+                ${card.subtitle ? html`<p class="kpi-subtitle">${card.subtitle}</p>` : nothing}
+              </div>
+            ` : nothing}
       </article>
     `;
   }
-  render() {
-    const title = this.headerTitle();
-    const single = this._cards.length <= 1;
-    const gridStyle = single ? nothing : o({
+  renderFooter() {
+    const { target, showTimestamp, updatedAt } = this._model;
+    const hasTarget = Boolean(target && String(target).length);
+    const updated = showTimestamp && updatedAt ? new Date(updatedAt).toLocaleDateString("en-US") : "";
+    if (!hasTarget && !updated) return nothing;
+    return html`
+      <div class="kpi-footer">
+        ${hasTarget ? html`
+              <div class="kpi-footer-block">
+                <span class="kpi-footer-label">Target</span>
+                <span class="kpi-footer-value">${target}</span>
+              </div>
+            ` : html`<span></span>`}
+        ${updated ? html`
+              <div class="kpi-footer-block">
+                <span class="kpi-footer-label">Updated</span>
+                <span class="kpi-footer-value">${updated}</span>
+              </div>
+            ` : nothing}
+      </div>
+    `;
+  }
+  renderAdvanced() {
+    const main = this._model.main;
+    if (!main) return nothing;
+    const viz = this._model.visualisation;
+    const chartType = viz && typeof viz === "object" ? visualisationChartType({ visualisation: viz }) : void 0;
+    const supporting = this._model.supporting;
+    const supportingStyle = supporting.length > 0 ? styleMap({
       gridTemplateColumns: `repeat(${this._gridColumns}, minmax(${MIN_KPI_CELL_WIDTH}px, 1fr))`
-    });
+    }) : nothing;
     return html`
-      <div class="kpi-root" data-single=${single ? "true" : "false"}>
-        ${this.renderShellHeader(title)}
-        ${this._cards.length === 0 ? html`<div class="empty">No KPI data</div>` : html`
+      <div class="kpi-advanced">
+        <div class="kpi-advanced-main">
+          <article class="kpi-card" data-role="main" aria-label=${main.name}>
+            <div class="kpi-header">
+              <p class="kpi-name">${main.name}</p>
+              ${this.renderBadge(main)}
+            </div>
+            <div class="kpi-advanced-split" data-split=${this._advancedSplit}>
+              <div class="kpi-advanced-value">${this.renderValue(main)}</div>
+              ${viz && chartType ? html`
+                    <div class="kpi-advanced-chart">
+                      <ui9000-chart-renderer
+                        data=${JSON.stringify(viz)}
+                        chart-type=${chartType}
+                        scale=${this.scale}
+                        show-header="false"
+                        show-legend="false"
+                        show-grid
+                        show-tooltip
+                      ></ui9000-chart-renderer>
+                    </div>
+                  ` : nothing}
+            </div>
+          </article>
+        </div>
+        ${supporting.length ? html`
               <div
-                class="kpi-grid"
-                data-layout=${single ? "single" : "grid"}
+                class="kpi-supporting"
                 data-scroll=${this._scrollAxis}
-                ${gridStyle}
+                style=${supportingStyle}
               >
-                ${this._cards.map((card) => this.renderCard(card))}
+                ${supporting.map((card) => this.renderCard(card, "supporting"))}
               </div>
-            `}
+            ` : nothing}
+      </div>
+    `;
+  }
+  render() {
+    const model = this._model;
+    const layout = model.layout;
+    const single = layout === "single";
+    const title = model.title;
+    const gridStyle = layout === "grid" ? styleMap({
+      gridTemplateColumns: `repeat(${this._gridColumns}, minmax(${MIN_KPI_CELL_WIDTH}px, 1fr))`
+    }) : nothing;
+    return html`
+      <div class="kpi-root" data-layout=${layout} data-single=${single ? "true" : "false"}>
+        ${title ? html`<div class="kpi-section-title">${title}</div>` : nothing}
+        ${layout === "empty" ? html`<div class="empty">No KPI data</div>` : layout === "advanced" ? this.renderAdvanced() : html`
+                <div
+                  class="kpi-grid"
+                  data-layout=${single ? "single" : "grid"}
+                  data-scroll=${this._scrollAxis}
+                  style=${gridStyle}
+                >
+                  ${model.cards.map(
+      (card) => this.renderCard(card, single ? "single" : "grid")
+    )}
+                </div>
+              `}
+        ${this.renderFooter()}
         ${this.renderShellLabelTooltip()}
       </div>
     `;
@@ -101,13 +225,16 @@ __decorateClass([
 ], Ui9000KpiWidget.prototype, "scale", 2);
 __decorateClass([
   state()
-], Ui9000KpiWidget.prototype, "_cards", 2);
+], Ui9000KpiWidget.prototype, "_model", 2);
 __decorateClass([
   state()
 ], Ui9000KpiWidget.prototype, "_gridColumns", 2);
 __decorateClass([
   state()
 ], Ui9000KpiWidget.prototype, "_scrollAxis", 2);
+__decorateClass([
+  state()
+], Ui9000KpiWidget.prototype, "_advancedSplit", 2);
 Ui9000KpiWidget = __decorateClass([
   customElement("ui9000-kpi-widget")
 ], Ui9000KpiWidget);