@fusedashlabs/widgets 0.4.5 → 0.6.0

package/dist/element/chart-shell-styles.js

@@ -20,6 +20,46 @@ const chartShellStyles = css`
     background: transparent;
   }
 
+  :host([header-variant='dash']) .widget-shell {
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  /*
+   * Dashboard cells already have a height. The chart fills that cell.
+   * A 220px host min-height plus an inner scrollport made the column and
+   * the plot scroll at the same time.
+   */
+  :host([embedded]),
+  :host([header-variant='dash']) {
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  :host([embedded]) .widget-shell,
+  :host([header-variant='dash']) .widget-shell {
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  :host([embedded]) .widget-body,
+  :host([header-variant='dash']) .widget-body,
+  :host([embedded]) .widget-body > .chart-body,
+  :host([header-variant='dash']) .widget-body > .chart-body,
+  :host([embedded]) .widget-body > .chart-root,
+  :host([header-variant='dash']) .widget-body > .chart-root,
+  :host([embedded]) .chart-body,
+  :host([header-variant='dash']) .chart-body,
+  :host([embedded]) .chart-scroll,
+  :host([header-variant='dash']) .chart-scroll,
+  :host([embedded]) .chart-root,
+  :host([header-variant='dash']) .chart-root {
+    min-height: 0;
+  }
+
   .widget-header {
     display: flex;
     align-items: flex-start;
@@ -44,23 +84,81 @@ const chartShellStyles = css`
 
   .widget-actions {
     position: relative;
+    display: flex;
+    align-items: center;
+    gap: 4px;
     flex-shrink: 0;
   }
 
-  .menu-btn {
+  .hover-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  /* Dashboard: chat + overflow stay hidden until the widget is hovered or the menu is open. */
+  .widget-header[data-variant='dash'] .hover-actions {
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  .widget-shell:hover .widget-header[data-variant='dash'] .hover-actions,
+  .widget-header[data-variant='dash'] .hover-actions[data-open='true'] {
+    opacity: 1;
+  }
+
+  .menu-anchor {
+    position: relative;
+  }
+
+  .menu-btn,
+  .icon-btn,
+  .settings-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 32px;
-    height: 32px;
     padding: 0;
     border: 1px solid var(--ui9000-color-border, #e5e7eb);
-    border-radius: 8px;
     background: rgba(255, 255, 255, 0.92);
     color: var(--ui9000-color-text-muted, #6b7280);
+    cursor: pointer;
+  }
+
+  .menu-btn svg,
+  .icon-btn svg,
+  .settings-btn svg,
+  .menu-item svg {
+    width: 16px;
+    height: 16px;
+    flex: 0 0 16px;
+    display: block;
+  }
+
+  .menu-btn {
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
     font-size: 18px;
     line-height: 1;
-    cursor: pointer;
+  }
+
+  .widget-header[data-variant='dash'] .menu-btn,
+  .widget-header[data-variant='dash'] .icon-btn {
+    width: auto;
+    height: 24px;
+    padding: 4px 6px;
+    border-radius: 4px;
+    font-size: 16px;
+  }
+
+  .settings-btn {
+    height: 24px;
+    padding: 4px;
+    border-radius: 24px;
+    background: var(--ui9000-color-surface, #fff);
+    box-shadow:
+      0 2px 2px rgb(0 0 0 / 6%),
+      0 2px 4px 1px rgb(0 0 0 / 4%);
   }
 
   .menu-btn:hover {
@@ -70,7 +168,7 @@ const chartShellStyles = css`
 
   .menu-dropdown {
     position: absolute;
-    top: 36px;
+    top: calc(100% + 4px);
     right: 0;
     z-index: 5;
     min-width: 170px;
@@ -83,8 +181,16 @@ const chartShellStyles = css`
     overflow: hidden;
   }
 
+  .widget-header[data-variant='dash'] .menu-dropdown {
+    min-width: 192px;
+    border-radius: 8px;
+    padding: 8px 0;
+  }
+
   .menu-item {
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 8px;
     width: 100%;
     padding: 10px 14px;
     border: none;
@@ -95,6 +201,19 @@ const chartShellStyles = css`
     cursor: pointer;
   }
 
+  .widget-header[data-variant='dash'] .menu-item {
+    padding: 4px 12px;
+    min-height: 32px;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .menu-divider {
+    height: 1px;
+    margin: 4px 0;
+    background: var(--ui9000-color-border, #e5e7eb);
+  }
+
   .menu-item:hover {
     background: var(--ui9000-color-surface-muted, #f3f4f6);
   }

package/dist/element/chart-shell-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-shell-styles.js","sources":["../../src/element/chart-shell-styles.ts"],"sourcesContent":["import { css } from 'lit';\n\n/** FuseDash WidgetWrapper chrome — padding, header, menu (MCP chat / Storybook). */\nexport const chartShellStyles = css`\n  .widget-shell {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: inherit;\n    box-sizing: border-box;\n    padding: 12px 16px;\n    border: 1px solid var(--ui9000-color-border, #e5e7eb);\n    border-radius: 8px;\n    background: var(--ui9000-color-surface, #ffffff);\n  }\n\n  :host([embedded]) .widget-shell {\n    padding: 8px 10px 4px;\n    border: none;\n    border-radius: 0;\n    background: transparent;\n  }\n\n  .widget-header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: 8px;\n    flex-shrink: 0;\n    margin-bottom: 8px;\n    min-width: 0;\n  }\n\n  .widget-title {\n    flex: 1;\n    min-width: 0;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    color: var(--ui9000-color-text, #111827);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .widget-actions {\n    position: relative;\n    flex-shrink: 0;\n  }\n\n  .menu-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: 1px solid var(--ui9000-color-border, #e5e7eb);\n    border-radius: 8px;\n    background: rgba(255, 255, 255, 0.92);\n    color: var(--ui9000-color-text-muted, #6b7280);\n    font-size: 18px;\n    line-height: 1;\n    cursor: pointer;\n  }\n\n  .menu-btn:hover {\n    background: #fff;\n    border-color: var(--ui9000-color-border-strong, #d1d5db);\n  }\n\n  .menu-dropdown {\n    position: absolute;\n    top: 36px;\n    right: 0;\n    z-index: 5;\n    min-width: 170px;\n    border: 1px solid var(--ui9000-color-border, #e5e7eb);\n    border-radius: 10px;\n    background: #fff;\n    box-shadow:\n      0 10px 15px -3px rgb(0 0 0 / 10%),\n      0 4px 6px -4px rgb(0 0 0 / 10%);\n    overflow: hidden;\n  }\n\n  .menu-item {\n    display: block;\n    width: 100%;\n    padding: 10px 14px;\n    border: none;\n    background: transparent;\n    text-align: left;\n    font-size: 13px;\n    color: var(--ui9000-color-text, #111827);\n    cursor: pointer;\n  }\n\n  .menu-item:hover {\n    background: var(--ui9000-color-surface-muted, #f3f4f6);\n  }\n\n  .widget-body {\n    flex: 1 1 auto;\n    /* Chat/MCP hosts often set only min-height on :host; nested panes set this var to 0. */\n    min-height: var(--ui9000-plot-min-height, 240px);\n    position: relative;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Default plot slot — charts may nest further (box/bar scroll). */\n  .widget-body > .chart-root {\n    flex: 1 1 auto;\n    width: 100%;\n    min-height: var(--ui9000-plot-min-height, 240px);\n  }\n\n  .widget-body > .chart-body {\n    flex: 1 1 auto;\n    min-height: var(--ui9000-plot-min-height, 240px);\n  }\n\n  .chart-legend {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 8px 16px;\n    flex-shrink: 0;\n    margin-bottom: 8px;\n    font-size: 11px;\n    line-height: 1.2;\n    color: var(--ui9000-color-text-muted, #6c7584);\n  }\n\n  .legend-item {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    white-space: nowrap;\n  }\n\n  .legend-swatch {\n    width: 10px;\n    height: 10px;\n    border-radius: 2px;\n    flex-shrink: 0;\n  }\n\n  .legend-line {\n    position: relative;\n    display: inline-block;\n    width: 14px;\n    height: 2px;\n    border-radius: 1px;\n    background: var(--legend-color, #473dd9);\n    flex-shrink: 0;\n  }\n\n  .legend-line--dashed {\n    background: transparent;\n    border-top: 2px dashed var(--legend-color, #6c7584);\n    height: 0;\n  }\n\n  .legend-dot {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  /* FuseDash ChartLegend legendType=\"palette\" — Low / High sequential ramp. */\n  .legend-palette {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n    padding-top: 8px;\n    padding-bottom: 12px;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 1.2;\n    color: var(--ui9000-color-text-muted, #6c7584);\n  }\n\n  .legend-palette-swatches {\n    display: flex;\n    align-items: center;\n  }\n\n  .legend-palette-swatch {\n    width: 14px;\n    height: 8px;\n    flex-shrink: 0;\n  }\n\n  .legend-palette-swatch:first-child {\n    border-top-left-radius: 8px;\n    border-bottom-left-radius: 8px;\n  }\n\n  .legend-palette-swatch:last-child {\n    border-top-right-radius: 8px;\n    border-bottom-right-radius: 8px;\n  }\n\n  .label-tooltip {\n    position: absolute;\n    pointer-events: none;\n    z-index: 4;\n    max-width: min(320px, 90vw);\n    padding: 2px 5px;\n    border: 1px solid var(--ui9000-color-border, #e5e7eb);\n    border-radius: 5px;\n    font-size: 11px;\n    line-height: 1.35;\n    background: var(--ui9000-color-surface, #fff);\n    color: var(--ui9000-color-text-muted, #6c7584);\n    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);\n    transform: translate(-50%, calc(-100% - 8px));\n    white-space: nowrap;\n  }\n`;\n"],"names":[],"mappings":";AAGO,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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":"chart-shell-styles.js","sources":["../../src/element/chart-shell-styles.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Chat draws its own card (padding + border). Dashboard charts sit in the\n * client WidgetWrapper, which is already that zone — dash sends only the\n * header and the plot.\n */\nexport const chartShellStyles = css`\n  .widget-shell {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: inherit;\n    box-sizing: border-box;\n    padding: 12px 16px;\n    border: 1px solid var(--ui9000-color-border, #e5e7eb);\n    border-radius: 8px;\n    background: var(--ui9000-color-surface, #ffffff);\n  }\n\n  :host([embedded]) .widget-shell {\n    padding: 8px 10px 4px;\n    border: none;\n    border-radius: 0;\n    background: transparent;\n  }\n\n  :host([header-variant='dash']) .widget-shell {\n    padding: 0;\n    border: none;\n    border-radius: 0;\n    background: transparent;\n  }\n\n  /*\n   * Dashboard cells already have a height. The chart fills that cell.\n   * A 220px host min-height plus an inner scrollport made the column and\n   * the plot scroll at the same time.\n   */\n  :host([embedded]),\n  :host([header-variant='dash']) {\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n  }\n\n  :host([embedded]) .widget-shell,\n  :host([header-variant='dash']) .widget-shell {\n    min-height: 0;\n    overflow: hidden;\n  }\n\n  :host([embedded]) .widget-body,\n  :host([header-variant='dash']) .widget-body,\n  :host([embedded]) .widget-body > .chart-body,\n  :host([header-variant='dash']) .widget-body > .chart-body,\n  :host([embedded]) .widget-body > .chart-root,\n  :host([header-variant='dash']) .widget-body > .chart-root,\n  :host([embedded]) .chart-body,\n  :host([header-variant='dash']) .chart-body,\n  :host([embedded]) .chart-scroll,\n  :host([header-variant='dash']) .chart-scroll,\n  :host([embedded]) .chart-root,\n  :host([header-variant='dash']) .chart-root {\n    min-height: 0;\n  }\n\n  .widget-header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: 8px;\n    flex-shrink: 0;\n    margin-bottom: 8px;\n    min-width: 0;\n  }\n\n  .widget-title {\n    flex: 1;\n    min-width: 0;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    color: var(--ui9000-color-text, #111827);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .widget-actions {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    flex-shrink: 0;\n  }\n\n  .hover-actions {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n\n  /* Dashboard: chat + overflow stay hidden until the widget is hovered or the menu is open. */\n  .widget-header[data-variant='dash'] .hover-actions {\n    opacity: 0;\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  .widget-shell:hover .widget-header[data-variant='dash'] .hover-actions,\n  .widget-header[data-variant='dash'] .hover-actions[data-open='true'] {\n    opacity: 1;\n  }\n\n  .menu-anchor {\n    position: relative;\n  }\n\n  .menu-btn,\n  .icon-btn,\n  .settings-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: 1px solid var(--ui9000-color-border, #e5e7eb);\n    background: rgba(255, 255, 255, 0.92);\n    color: var(--ui9000-color-text-muted, #6b7280);\n    cursor: pointer;\n  }\n\n  .menu-btn svg,\n  .icon-btn svg,\n  .settings-btn svg,\n  .menu-item svg {\n    width: 16px;\n    height: 16px;\n    flex: 0 0 16px;\n    display: block;\n  }\n\n  .menu-btn {\n    width: 32px;\n    height: 32px;\n    border-radius: 8px;\n    font-size: 18px;\n    line-height: 1;\n  }\n\n  .widget-header[data-variant='dash'] .menu-btn,\n  .widget-header[data-variant='dash'] .icon-btn {\n    width: auto;\n    height: 24px;\n    padding: 4px 6px;\n    border-radius: 4px;\n    font-size: 16px;\n  }\n\n  .settings-btn {\n    height: 24px;\n    padding: 4px;\n    border-radius: 24px;\n    background: var(--ui9000-color-surface, #fff);\n    box-shadow:\n      0 2px 2px rgb(0 0 0 / 6%),\n      0 2px 4px 1px rgb(0 0 0 / 4%);\n  }\n\n  .menu-btn:hover {\n    background: #fff;\n    border-color: var(--ui9000-color-border-strong, #d1d5db);\n  }\n\n  .menu-dropdown {\n    position: absolute;\n    top: calc(100% + 4px);\n    right: 0;\n    z-index: 5;\n    min-width: 170px;\n    border: 1px solid var(--ui9000-color-border, #e5e7eb);\n    border-radius: 10px;\n    background: #fff;\n    box-shadow:\n      0 10px 15px -3px rgb(0 0 0 / 10%),\n      0 4px 6px -4px rgb(0 0 0 / 10%);\n    overflow: hidden;\n  }\n\n  .widget-header[data-variant='dash'] .menu-dropdown {\n    min-width: 192px;\n    border-radius: 8px;\n    padding: 8px 0;\n  }\n\n  .menu-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 10px 14px;\n    border: none;\n    background: transparent;\n    text-align: left;\n    font-size: 13px;\n    color: var(--ui9000-color-text, #111827);\n    cursor: pointer;\n  }\n\n  .widget-header[data-variant='dash'] .menu-item {\n    padding: 4px 12px;\n    min-height: 32px;\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  .menu-divider {\n    height: 1px;\n    margin: 4px 0;\n    background: var(--ui9000-color-border, #e5e7eb);\n  }\n\n  .menu-item:hover {\n    background: var(--ui9000-color-surface-muted, #f3f4f6);\n  }\n\n  .widget-body {\n    flex: 1 1 auto;\n    /* Chat/MCP hosts often set only min-height on :host; nested panes set this var to 0. */\n    min-height: var(--ui9000-plot-min-height, 240px);\n    position: relative;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Default plot slot — charts may nest further (box/bar scroll). */\n  .widget-body > .chart-root {\n    flex: 1 1 auto;\n    width: 100%;\n    min-height: var(--ui9000-plot-min-height, 240px);\n  }\n\n  .widget-body > .chart-body {\n    flex: 1 1 auto;\n    min-height: var(--ui9000-plot-min-height, 240px);\n  }\n\n  .chart-legend {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 8px 16px;\n    flex-shrink: 0;\n    margin-bottom: 8px;\n    font-size: 11px;\n    line-height: 1.2;\n    color: var(--ui9000-color-text-muted, #6c7584);\n  }\n\n  .legend-item {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    white-space: nowrap;\n  }\n\n  .legend-swatch {\n    width: 10px;\n    height: 10px;\n    border-radius: 2px;\n    flex-shrink: 0;\n  }\n\n  .legend-line {\n    position: relative;\n    display: inline-block;\n    width: 14px;\n    height: 2px;\n    border-radius: 1px;\n    background: var(--legend-color, #473dd9);\n    flex-shrink: 0;\n  }\n\n  .legend-line--dashed {\n    background: transparent;\n    border-top: 2px dashed var(--legend-color, #6c7584);\n    height: 0;\n  }\n\n  .legend-dot {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  /* FuseDash ChartLegend legendType=\"palette\" — Low / High sequential ramp. */\n  .legend-palette {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n    padding-top: 8px;\n    padding-bottom: 12px;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 1.2;\n    color: var(--ui9000-color-text-muted, #6c7584);\n  }\n\n  .legend-palette-swatches {\n    display: flex;\n    align-items: center;\n  }\n\n  .legend-palette-swatch {\n    width: 14px;\n    height: 8px;\n    flex-shrink: 0;\n  }\n\n  .legend-palette-swatch:first-child {\n    border-top-left-radius: 8px;\n    border-bottom-left-radius: 8px;\n  }\n\n  .legend-palette-swatch:last-child {\n    border-top-right-radius: 8px;\n    border-bottom-right-radius: 8px;\n  }\n\n  .label-tooltip {\n    position: absolute;\n    pointer-events: none;\n    z-index: 4;\n    max-width: min(320px, 90vw);\n    padding: 2px 5px;\n    border: 1px solid var(--ui9000-color-border, #e5e7eb);\n    border-radius: 5px;\n    font-size: 11px;\n    line-height: 1.35;\n    background: var(--ui9000-color-surface, #fff);\n    color: var(--ui9000-color-text-muted, #6c7584);\n    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);\n    transform: translate(-50%, calc(-100% - 8px));\n    white-space: nowrap;\n  }\n`;\n"],"names":[],"mappings":";AAOO,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/element/chart-tooltip-portal.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Chart hover tooltip and axis-label tooltip, ported from the client.
+ * Both are mounted on document.body so dashboard overflow does not clip them.
+ *
+ * Hover card matches `@fuselab-creative/design-system` Tooltip plus the
+ * label/value rows from the client TooltipContent.
+ * Axis-label chip matches `Widgets/components/LabelTooltip`.
+ */
+export type ChartTooltipRow = {
+    label: string;
+    value: string;
+};
+export type ChartTooltipContent = {
+    title?: string;
+    rows: ChartTooltipRow[];
+};
+type PointerEventLike = {
+    pageX: number;
+    pageY: number;
+    clientX: number;
+    clientY: number;
+};
+export declare function presentChartTooltip(owner: HTMLElement, event: PointerEventLike, content: ChartTooltipContent): void;
+export declare function dismissChartTooltip(owner: HTMLElement): void;
+export declare function presentLabelTooltip(owner: HTMLElement, event: PointerEventLike, text: string): void;
+export declare function dismissLabelTooltip(owner: HTMLElement): void;
+export declare function dismissTooltips(owner: HTMLElement): void;
+export {};
+//# sourceMappingURL=chart-tooltip-portal.d.ts.map

package/dist/element/chart-tooltip-portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-tooltip-portal.d.ts","sourceRoot":"","sources":["../../src/element/chart-tooltip-portal.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,MAAM,MAAM,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/D,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,eAAe,EAAE,CAAC;CACzB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAsPF,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,gBAAgB,EACvB,OAAO,EAAE,mBAAmB,GAC3B,IAAI,CAaN;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAI5D;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,gBAAgB,EACvB,IAAI,EAAE,MAAM,GACX,IAAI,CAQN;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAI5D;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAGxD"}

package/dist/element/chart-tooltip-portal.js

@@ -0,0 +1,278 @@
+const HOVER_ATTR = "data-ui9000-chart-tooltip";
+const LABEL_ATTR = "data-ui9000-label-tooltip";
+const STYLE_ID = "ui9000-chart-tooltip-style";
+let hoverOwner = null;
+let labelOwner = null;
+const TOOLTIP_CSS = `
+.ui9000-chart-tooltip {
+  position: absolute;
+  z-index: 1000;
+  display: none;
+  flex-direction: column;
+  gap: 8px;
+  box-sizing: border-box;
+  min-width: 110px;
+  padding: 8px 12px;
+  border: 1px solid var(--colors-neutral-border-weakest, #dfe1e4);
+  border-radius: 6px;
+  background: var(--colors-neutral-background-base, #fff);
+  color: var(--colors-neutral-text-default, #444547);
+  box-shadow:
+    0 2px 4px 0 rgba(20, 28, 44, 0.06),
+    0 4px 8px 2px rgba(20, 28, 44, 0.06);
+  pointer-events: none;
+  font-family: var(--ui9000-font-family, system-ui, sans-serif);
+  opacity: 0;
+  scale: 0.8;
+}
+.ui9000-chart-tooltip.is-open {
+  display: flex;
+  animation: ui9000-tooltip-in 0.2s forwards;
+}
+@keyframes ui9000-tooltip-in {
+  to { opacity: 1; scale: 1; }
+}
+.ui9000-chart-tooltip__title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 16px;
+  text-align: left;
+}
+.ui9000-chart-tooltip__rows {
+  display: flex;
+  flex-direction: column;
+  min-width: 110px;
+}
+.ui9000-chart-tooltip__row {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  flex-direction: row;
+  gap: 8px;
+  border-bottom: 1px dashed var(--colors-neutral-border-weakest, #dfe1e4);
+}
+.ui9000-chart-tooltip__row:last-child {
+  border: none;
+}
+.ui9000-chart-tooltip__label {
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 400;
+  margin: 2px 0;
+  min-width: 60px;
+  max-width: 120px;
+  max-height: 2lh;
+  overflow: hidden;
+  word-wrap: break-all;
+  text-overflow: ellipsis;
+  opacity: 0.6;
+}
+.ui9000-chart-tooltip__value {
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 500;
+  margin: 2px 0;
+  width: max-content;
+}
+.ui9000-chart-tooltip::after,
+.ui9000-chart-tooltip::before {
+  content: "";
+  position: absolute;
+  top: var(--ui9000-tip-top, 100%);
+  left: var(--ui9000-tip-left, 25px);
+  width: 0;
+  height: 0;
+  translate: -50%;
+}
+.ui9000-chart-tooltip[data-side='bottom']::after {
+  border-right: 5px solid transparent;
+  border-top: 8px solid var(--colors-neutral-background-base, #fff);
+  border-left: 5px solid transparent;
+}
+.ui9000-chart-tooltip[data-side='top']::after {
+  border-right: 5px solid transparent;
+  border-bottom: 8px solid var(--colors-neutral-background-base, #fff);
+  border-left: 5px solid transparent;
+}
+.ui9000-chart-tooltip[data-side='bottom']::before {
+  opacity: 0.1;
+  border-right: 7px solid transparent;
+  border-top: 8px solid #000;
+  border-left: 7px solid transparent;
+}
+.ui9000-chart-tooltip[data-side='top']::before {
+  opacity: 0.1;
+  border-right: 7px solid transparent;
+  border-bottom: 8px solid #000;
+  border-left: 7px solid transparent;
+}
+.ui9000-label-tooltip {
+  position: absolute;
+  z-index: 100;
+  display: none;
+  box-sizing: border-box;
+  padding: 2px 5px;
+  border: 1px solid var(--colors-neutral-border-weakest, #dfe1e4);
+  border-radius: 5px;
+  background: var(--colors-neutral-background-base, #fff);
+  color: var(--colors-neutral-text-weak, #6c7584);
+  font-family: var(--ui9000-font-family, system-ui, sans-serif);
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1.35;
+  pointer-events: none;
+  white-space: nowrap;
+}
+.ui9000-label-tooltip.is-open {
+  display: block;
+}
+`;
+function ensureStyle() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = TOOLTIP_CSS;
+  document.head.appendChild(style);
+}
+function hoverRoot() {
+  if (typeof document === "undefined") return null;
+  ensureStyle();
+  let el = document.querySelector(`[${HOVER_ATTR}]`);
+  if (!el) {
+    el = document.createElement("div");
+    el.setAttribute(HOVER_ATTR, "");
+    el.className = "ui9000-chart-tooltip";
+    el.dataset.side = "bottom";
+    document.body.appendChild(el);
+  }
+  return el;
+}
+function labelRoot() {
+  if (typeof document === "undefined") return null;
+  ensureStyle();
+  let el = document.querySelector(`[${LABEL_ATTR}]`);
+  if (!el) {
+    el = document.createElement("div");
+    el.setAttribute(LABEL_ATTR, "");
+    el.className = "ui9000-label-tooltip";
+    document.body.appendChild(el);
+  }
+  return el;
+}
+function fillHover(el, content) {
+  el.replaceChildren();
+  if (content.title) {
+    const title = document.createElement("div");
+    title.className = "ui9000-chart-tooltip__title name";
+    title.textContent = content.title;
+    el.appendChild(title);
+  }
+  if (!content.rows.length) return;
+  const rows = document.createElement("div");
+  rows.className = "ui9000-chart-tooltip__rows";
+  for (const row of content.rows) {
+    const line = document.createElement("div");
+    line.className = "ui9000-chart-tooltip__row row";
+    if (row.label) {
+      const label = document.createElement("div");
+      label.className = "ui9000-chart-tooltip__label";
+      label.textContent = row.label;
+      line.appendChild(label);
+    }
+    const value = document.createElement("div");
+    value.className = "ui9000-chart-tooltip__value";
+    value.textContent = row.value;
+    line.appendChild(value);
+    rows.appendChild(line);
+  }
+  el.appendChild(rows);
+}
+function placeHover(el, event) {
+  const tooltipWidth = el.offsetWidth;
+  const tooltipHeight = el.offsetHeight;
+  const triangleHeight = 8;
+  const triangleWidth = 6;
+  const offsetX = 25;
+  const offsetY = triangleHeight;
+  const edge = 5;
+  const { pageX, pageY, clientX, clientY } = event;
+  let newX = pageX - offsetX;
+  let newY = pageY - tooltipHeight - offsetY;
+  let atEdge = false;
+  let triangleLeft = offsetX;
+  let triangleTop = "100%";
+  let side = "bottom";
+  const viewportWidth = window.innerWidth || tooltipWidth;
+  if (clientX + tooltipWidth + edge >= viewportWidth) {
+    newX = viewportWidth - tooltipWidth - edge - offsetX;
+    atEdge = true;
+  } else if (clientX - offsetX <= edge) {
+    newX = edge;
+    atEdge = true;
+  }
+  if (tooltipHeight + triangleHeight + edge >= clientY) {
+    newY = pageY + triangleHeight;
+    triangleTop = `${-triangleHeight}px`;
+    side = "top";
+  }
+  if (atEdge && tooltipWidth > 0) {
+    triangleLeft = Math.min(
+      Math.max(clientX - newX, edge + triangleWidth / 2),
+      tooltipWidth - edge - triangleWidth / 2
+    );
+  }
+  el.style.left = `${newX}px`;
+  el.style.top = `${newY}px`;
+  el.style.setProperty("--ui9000-tip-left", `${triangleLeft}px`);
+  el.style.setProperty("--ui9000-tip-top", triangleTop);
+  el.dataset.side = side;
+}
+function presentChartTooltip(owner, event, content) {
+  const el = hoverRoot();
+  if (!el) return;
+  const opening = hoverOwner !== owner || !el.classList.contains("is-open");
+  hoverOwner = owner;
+  fillHover(el, content);
+  el.classList.add("is-open");
+  placeHover(el, event);
+  if (opening) {
+    el.classList.remove("is-open");
+    void el.offsetWidth;
+    el.classList.add("is-open");
+  }
+}
+function dismissChartTooltip(owner) {
+  var _a;
+  if (hoverOwner !== owner) return;
+  hoverOwner = null;
+  (_a = hoverRoot()) == null ? void 0 : _a.classList.remove("is-open");
+}
+function presentLabelTooltip(owner, event, text) {
+  const el = labelRoot();
+  if (!el) return;
+  labelOwner = owner;
+  el.textContent = text;
+  el.style.left = `${event.pageX}px`;
+  el.style.top = `${event.pageY - 25}px`;
+  el.classList.add("is-open");
+}
+function dismissLabelTooltip(owner) {
+  var _a;
+  if (labelOwner !== owner) return;
+  labelOwner = null;
+  (_a = labelRoot()) == null ? void 0 : _a.classList.remove("is-open");
+}
+function dismissTooltips(owner) {
+  dismissChartTooltip(owner);
+  dismissLabelTooltip(owner);
+}
+export {
+  dismissChartTooltip,
+  dismissLabelTooltip,
+  dismissTooltips,
+  presentChartTooltip,
+  presentLabelTooltip
+};
+//# sourceMappingURL=chart-tooltip-portal.js.map

package/dist/element/chart-tooltip-portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-tooltip-portal.js","sources":["../../src/element/chart-tooltip-portal.ts"],"sourcesContent":["/**\n * Chart hover tooltip and axis-label tooltip, ported from the client.\n * Both are mounted on document.body so dashboard overflow does not clip them.\n *\n * Hover card matches `@fuselab-creative/design-system` Tooltip plus the\n * label/value rows from the client TooltipContent.\n * Axis-label chip matches `Widgets/components/LabelTooltip`.\n */\n\nexport type ChartTooltipRow = { label: string; value: string };\n\nexport type ChartTooltipContent = {\n  title?: string;\n  rows: ChartTooltipRow[];\n};\n\ntype PointerEventLike = {\n  pageX: number;\n  pageY: number;\n  clientX: number;\n  clientY: number;\n};\n\nconst HOVER_ATTR = 'data-ui9000-chart-tooltip';\nconst LABEL_ATTR = 'data-ui9000-label-tooltip';\nconst STYLE_ID = 'ui9000-chart-tooltip-style';\n\nlet hoverOwner: HTMLElement | null = null;\nlet labelOwner: HTMLElement | null = null;\n\nconst TOOLTIP_CSS = `\n.ui9000-chart-tooltip {\n  position: absolute;\n  z-index: 1000;\n  display: none;\n  flex-direction: column;\n  gap: 8px;\n  box-sizing: border-box;\n  min-width: 110px;\n  padding: 8px 12px;\n  border: 1px solid var(--colors-neutral-border-weakest, #dfe1e4);\n  border-radius: 6px;\n  background: var(--colors-neutral-background-base, #fff);\n  color: var(--colors-neutral-text-default, #444547);\n  box-shadow:\n    0 2px 4px 0 rgba(20, 28, 44, 0.06),\n    0 4px 8px 2px rgba(20, 28, 44, 0.06);\n  pointer-events: none;\n  font-family: var(--ui9000-font-family, system-ui, sans-serif);\n  opacity: 0;\n  scale: 0.8;\n}\n.ui9000-chart-tooltip.is-open {\n  display: flex;\n  animation: ui9000-tooltip-in 0.2s forwards;\n}\n@keyframes ui9000-tooltip-in {\n  to { opacity: 1; scale: 1; }\n}\n.ui9000-chart-tooltip__title {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 16px;\n  text-align: left;\n}\n.ui9000-chart-tooltip__rows {\n  display: flex;\n  flex-direction: column;\n  min-width: 110px;\n}\n.ui9000-chart-tooltip__row {\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  flex-direction: row;\n  gap: 8px;\n  border-bottom: 1px dashed var(--colors-neutral-border-weakest, #dfe1e4);\n}\n.ui9000-chart-tooltip__row:last-child {\n  border: none;\n}\n.ui9000-chart-tooltip__label {\n  font-size: 12px;\n  line-height: 14px;\n  font-weight: 400;\n  margin: 2px 0;\n  min-width: 60px;\n  max-width: 120px;\n  max-height: 2lh;\n  overflow: hidden;\n  word-wrap: break-all;\n  text-overflow: ellipsis;\n  opacity: 0.6;\n}\n.ui9000-chart-tooltip__value {\n  font-size: 12px;\n  line-height: 14px;\n  font-weight: 500;\n  margin: 2px 0;\n  width: max-content;\n}\n.ui9000-chart-tooltip::after,\n.ui9000-chart-tooltip::before {\n  content: \"\";\n  position: absolute;\n  top: var(--ui9000-tip-top, 100%);\n  left: var(--ui9000-tip-left, 25px);\n  width: 0;\n  height: 0;\n  translate: -50%;\n}\n.ui9000-chart-tooltip[data-side='bottom']::after {\n  border-right: 5px solid transparent;\n  border-top: 8px solid var(--colors-neutral-background-base, #fff);\n  border-left: 5px solid transparent;\n}\n.ui9000-chart-tooltip[data-side='top']::after {\n  border-right: 5px solid transparent;\n  border-bottom: 8px solid var(--colors-neutral-background-base, #fff);\n  border-left: 5px solid transparent;\n}\n.ui9000-chart-tooltip[data-side='bottom']::before {\n  opacity: 0.1;\n  border-right: 7px solid transparent;\n  border-top: 8px solid #000;\n  border-left: 7px solid transparent;\n}\n.ui9000-chart-tooltip[data-side='top']::before {\n  opacity: 0.1;\n  border-right: 7px solid transparent;\n  border-bottom: 8px solid #000;\n  border-left: 7px solid transparent;\n}\n.ui9000-label-tooltip {\n  position: absolute;\n  z-index: 100;\n  display: none;\n  box-sizing: border-box;\n  padding: 2px 5px;\n  border: 1px solid var(--colors-neutral-border-weakest, #dfe1e4);\n  border-radius: 5px;\n  background: var(--colors-neutral-background-base, #fff);\n  color: var(--colors-neutral-text-weak, #6c7584);\n  font-family: var(--ui9000-font-family, system-ui, sans-serif);\n  font-size: 11px;\n  font-weight: 400;\n  line-height: 1.35;\n  pointer-events: none;\n  white-space: nowrap;\n}\n.ui9000-label-tooltip.is-open {\n  display: block;\n}\n`;\n\nfunction ensureStyle(): void {\n  if (typeof document === 'undefined') return;\n  if (document.getElementById(STYLE_ID)) return;\n  const style = document.createElement('style');\n  style.id = STYLE_ID;\n  style.textContent = TOOLTIP_CSS;\n  document.head.appendChild(style);\n}\n\nfunction hoverRoot(): HTMLDivElement | null {\n  if (typeof document === 'undefined') return null;\n  ensureStyle();\n  let el = document.querySelector(`[${HOVER_ATTR}]`) as HTMLDivElement | null;\n  if (!el) {\n    el = document.createElement('div');\n    el.setAttribute(HOVER_ATTR, '');\n    el.className = 'ui9000-chart-tooltip';\n    el.dataset.side = 'bottom';\n    document.body.appendChild(el);\n  }\n  return el;\n}\n\nfunction labelRoot(): HTMLDivElement | null {\n  if (typeof document === 'undefined') return null;\n  ensureStyle();\n  let el = document.querySelector(`[${LABEL_ATTR}]`) as HTMLDivElement | null;\n  if (!el) {\n    el = document.createElement('div');\n    el.setAttribute(LABEL_ATTR, '');\n    el.className = 'ui9000-label-tooltip';\n    document.body.appendChild(el);\n  }\n  return el;\n}\n\nfunction fillHover(el: HTMLDivElement, content: ChartTooltipContent): void {\n  el.replaceChildren();\n  if (content.title) {\n    const title = document.createElement('div');\n    title.className = 'ui9000-chart-tooltip__title name';\n    title.textContent = content.title;\n    el.appendChild(title);\n  }\n  if (!content.rows.length) return;\n  const rows = document.createElement('div');\n  rows.className = 'ui9000-chart-tooltip__rows';\n  for (const row of content.rows) {\n    const line = document.createElement('div');\n    line.className = 'ui9000-chart-tooltip__row row';\n    if (row.label) {\n      const label = document.createElement('div');\n      label.className = 'ui9000-chart-tooltip__label';\n      label.textContent = row.label;\n      line.appendChild(label);\n    }\n    const value = document.createElement('div');\n    value.className = 'ui9000-chart-tooltip__value';\n    value.textContent = row.value;\n    line.appendChild(value);\n    rows.appendChild(line);\n  }\n  el.appendChild(rows);\n}\n\nfunction placeHover(el: HTMLDivElement, event: PointerEventLike): void {\n  const tooltipWidth = el.offsetWidth;\n  const tooltipHeight = el.offsetHeight;\n  const triangleHeight = 8;\n  const triangleWidth = 6;\n  const offsetX = 25;\n  const offsetY = triangleHeight;\n  const edge = 5;\n  const { pageX, pageY, clientX, clientY } = event;\n\n  let newX = pageX - offsetX;\n  let newY = pageY - tooltipHeight - offsetY;\n  let atEdge = false;\n  let triangleLeft = offsetX;\n  let triangleTop = '100%';\n  let side: 'top' | 'bottom' = 'bottom';\n\n  const viewportWidth = window.innerWidth || tooltipWidth;\n  if (clientX + tooltipWidth + edge >= viewportWidth) {\n    newX = viewportWidth - tooltipWidth - edge - offsetX;\n    atEdge = true;\n  } else if (clientX - offsetX <= edge) {\n    newX = edge;\n    atEdge = true;\n  }\n\n  if (tooltipHeight + triangleHeight + edge >= clientY) {\n    newY = pageY + triangleHeight;\n    triangleTop = `${-triangleHeight}px`;\n    side = 'top';\n  }\n\n  if (atEdge && tooltipWidth > 0) {\n    triangleLeft = Math.min(\n      Math.max(clientX - newX, edge + triangleWidth / 2),\n      tooltipWidth - edge - triangleWidth / 2,\n    );\n  }\n\n  el.style.left = `${newX}px`;\n  el.style.top = `${newY}px`;\n  el.style.setProperty('--ui9000-tip-left', `${triangleLeft}px`);\n  el.style.setProperty('--ui9000-tip-top', triangleTop);\n  el.dataset.side = side;\n}\n\nexport function presentChartTooltip(\n  owner: HTMLElement,\n  event: PointerEventLike,\n  content: ChartTooltipContent,\n): void {\n  const el = hoverRoot();\n  if (!el) return;\n  const opening = hoverOwner !== owner || !el.classList.contains('is-open');\n  hoverOwner = owner;\n  fillHover(el, content);\n  el.classList.add('is-open');\n  placeHover(el, event);\n  if (opening) {\n    el.classList.remove('is-open');\n    void el.offsetWidth;\n    el.classList.add('is-open');\n  }\n}\n\nexport function dismissChartTooltip(owner: HTMLElement): void {\n  if (hoverOwner !== owner) return;\n  hoverOwner = null;\n  hoverRoot()?.classList.remove('is-open');\n}\n\nexport function presentLabelTooltip(\n  owner: HTMLElement,\n  event: PointerEventLike,\n  text: string,\n): void {\n  const el = labelRoot();\n  if (!el) return;\n  labelOwner = owner;\n  el.textContent = text;\n  el.style.left = `${event.pageX}px`;\n  el.style.top = `${event.pageY - 25}px`;\n  el.classList.add('is-open');\n}\n\nexport function dismissLabelTooltip(owner: HTMLElement): void {\n  if (labelOwner !== owner) return;\n  labelOwner = null;\n  labelRoot()?.classList.remove('is-open');\n}\n\nexport function dismissTooltips(owner: HTMLElement): void {\n  dismissChartTooltip(owner);\n  dismissLabelTooltip(owner);\n}\n"],"names":[],"mappings":"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"}

package/dist/element/dispatch-ui9000.d.ts

@@ -0,0 +1,11 @@
+/** Catalog events — no handler props, no javascript: URLs. */
+export declare function dispatchUi9000Select(host: EventTarget, detail: {
+    id: string;
+}): void;
+export declare function dispatchUi9000Action(host: EventTarget, detail: {
+    type: string;
+}): void;
+export declare function dispatchUi9000Submit(host: EventTarget, detail: {
+    values: Record<string, unknown>;
+}): void;
+//# sourceMappingURL=dispatch-ui9000.d.ts.map

package/dist/element/dispatch-ui9000.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dispatch-ui9000.d.ts","sourceRoot":"","sources":["../../src/element/dispatch-ui9000.ts"],"names":[],"mappings":"AAAA,8DAA8D;AAE9D,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAIpF;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAItF;AAED,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAAE,GAC1C,IAAI,CAIN"}

package/dist/element/dispatch-ui9000.js

@@ -0,0 +1,21 @@
+function dispatchUi9000Select(host, detail) {
+  host.dispatchEvent(
+    new CustomEvent("ui9000-select", { detail, bubbles: true, composed: true })
+  );
+}
+function dispatchUi9000Action(host, detail) {
+  host.dispatchEvent(
+    new CustomEvent("ui9000-action", { detail, bubbles: true, composed: true })
+  );
+}
+function dispatchUi9000Submit(host, detail) {
+  host.dispatchEvent(
+    new CustomEvent("ui9000-submit", { detail, bubbles: true, composed: true })
+  );
+}
+export {
+  dispatchUi9000Action,
+  dispatchUi9000Select,
+  dispatchUi9000Submit
+};
+//# sourceMappingURL=dispatch-ui9000.js.map

package/dist/element/dispatch-ui9000.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dispatch-ui9000.js","sources":["../../src/element/dispatch-ui9000.ts"],"sourcesContent":["/** Catalog events — no handler props, no javascript: URLs. */\n\nexport function dispatchUi9000Select(host: EventTarget, detail: { id: string }): void {\n  host.dispatchEvent(\n    new CustomEvent('ui9000-select', { detail, bubbles: true, composed: true }),\n  );\n}\n\nexport function dispatchUi9000Action(host: EventTarget, detail: { type: string }): void {\n  host.dispatchEvent(\n    new CustomEvent('ui9000-action', { detail, bubbles: true, composed: true }),\n  );\n}\n\nexport function dispatchUi9000Submit(\n  host: EventTarget,\n  detail: { values: Record<string, unknown> },\n): void {\n  host.dispatchEvent(\n    new CustomEvent('ui9000-submit', { detail, bubbles: true, composed: true }),\n  );\n}\n"],"names":[],"mappings":"AAEO,SAAS,qBAAqB,MAAmB,QAA8B;AACpF,OAAK;AAAA,IACH,IAAI,YAAY,iBAAiB,EAAE,QAAQ,SAAS,MAAM,UAAU,KAAA,CAAM;AAAA,EAAA;AAE9E;AAEO,SAAS,qBAAqB,MAAmB,QAAgC;AACtF,OAAK;AAAA,IACH,IAAI,YAAY,iBAAiB,EAAE,QAAQ,SAAS,MAAM,UAAU,KAAA,CAAM;AAAA,EAAA;AAE9E;AAEO,SAAS,qBACd,MACA,QACM;AACN,OAAK;AAAA,IACH,IAAI,YAAY,iBAAiB,EAAE,QAAQ,SAAS,MAAM,UAAU,KAAA,CAAM;AAAA,EAAA;AAE9E;"}

package/dist/element/header-icons.d.ts

@@ -0,0 +1,18 @@
+import { SVGTemplateResult } from 'lit';
+/** Carbon OverflowMenuHorizontal, rendered at 16. */
+export declare const iconOverflow: SVGTemplateResult;
+/** Carbon Download, 16px glyph. */
+export declare const iconDownload: SVGTemplateResult;
+/** Carbon TrashCan, rendered at 16. */
+export declare const iconRemove: SVGTemplateResult;
+/** Carbon SettingsAdjust, rendered at 16. */
+export declare const iconSettings: SVGTemplateResult;
+/** Client `ai-filled.svg`. Keeps its own fill; the button color must not recolor it. */
+export declare const iconChat: import('lit-html').TemplateResult<2>;
+/** Client `tableIcon.svg`. */
+export declare const iconTable: SVGTemplateResult;
+/** Client `FeedBackIcon.svg`. */
+export declare const iconFeedback: SVGTemplateResult;
+/** Client `report-icon.svg` (Add to page). */
+export declare const iconPage: SVGTemplateResult;
+//# sourceMappingURL=header-icons.d.ts.map

package/dist/element/header-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-icons.d.ts","sourceRoot":"","sources":["../../src/element/header-icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,iBAAiB,EAAE,MAAM,KAAK,CAAC;AAclD,qDAAqD;AACrD,eAAO,MAAM,YAAY,mBAGxB,CAAC;AAEF,mCAAmC;AACnC,eAAO,MAAM,YAAY,mBAGxB,CAAC;AAEF,uCAAuC;AACvC,eAAO,MAAM,UAAU,mBAGtB,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,YAAY,mBAGxB,CAAC;AAEF,wFAAwF;AACxF,eAAO,MAAM,QAAQ,sCAA+7B,CAAC;AAEr9B,8BAA8B;AAC9B,eAAO,MAAM,SAAS,mBAGrB,CAAC;AAEF,iCAAiC;AACjC,eAAO,MAAM,YAAY,mBAGxB,CAAC;AAEF,8CAA8C;AAC9C,eAAO,MAAM,QAAQ,mBAGpB,CAAC"}

package/dist/element/header-icons.js

@@ -0,0 +1,44 @@
+import { svg } from "lit";
+function glyph(viewBox, paths) {
+  return svg`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="${viewBox}" fill="currentColor" aria-hidden="true">${paths}</svg>`;
+}
+const iconOverflow = glyph(
+  "0 0 32 32",
+  svg`<circle cx="8" cy="16" r="2"></circle><circle cx="16" cy="16" r="2"></circle><circle cx="24" cy="16" r="2"></circle>`
+);
+const iconDownload = glyph(
+  "0 0 16 16",
+  svg`<path d="M13 7 12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12z"></path><path d="M13,12v2H3v-2H2v2l0,0c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1l0,0v-2H13z"></path>`
+);
+const iconRemove = glyph(
+  "0 0 32 32",
+  svg`<path d="M12 12H14V24H12z"></path><path d="M18 12H20V24H18z"></path><path d="M4,6V8H6V28a2,2,0,0,0,2,2H24a2,2,0,0,0,2-2V8h2V6ZM8,28V8H24V28Z"></path><path d="M12 2H20V4H12z"></path>`
+);
+const iconSettings = glyph(
+  "0 0 32 32",
+  svg`<path d="M30,8h-4.1c-0.5-2.3-2.5-4-4.9-4s-4.4,1.7-4.9,4H2v2h14.1c0.5,2.3,2.5,4,4.9,4s4.4-1.7,4.9-4H30V8z M21,12c-1.7,0-3-1.3-3-3 s1.3-3,3-3s3,1.3,3,3S22.7,12,21,12z"></path><path d="M2,24h4.1c0.5,2.3,2.5,4,4.9,4s4.4-1.7,4.9-4H30v-2H15.9c-0.5-2.3-2.5-4-4.9-4s-4.4,1.7-4.9,4H2V24z M11,20c1.7,0,3,1.3,3,3 s-1.3,3-3,3s-3-1.3-3-3S9.3,20,11,20z"></path>`
+);
+const iconChat = svg`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path fill="var(--colors-primary-icon-weaker, #9ea1fa)" fill-rule="evenodd" d="M.867 6.18a7.3 7.3 0 0 1 .76-1.86 7.36 7.36 0 0 1 9.221-3.105 2.9 2.9 0 0 1 1.278 1.605 2.92 2.92 0 0 1-.18 2.243l-.044.082-.007.011-.075.127-.002.004-.1.171-7.992-.05h-.175a3.57 3.57 0 0 0-2.83 1.498 7 7 0 0 1 .146-.726m.584.836A2.92 2.92 0 0 0 .7 8.939a7.36 7.36 0 0 0 9.992 5.913 3.55 3.55 0 0 1-1.634-.58 3.6 3.6 0 0 1-1.085-1.133l-.007-.012-.076-.134-3.948-6.939-.001.002-.205-.007h-.027l-.132-.001h-.03a2.94 2.94 0 0 0-2.096.968m6.89 5.476.004.006h.007l.09.17.005.009.006.012q.03.056.063.11l.005.009.002.003.006.01a2.94 2.94 0 0 0 2.308 1.4q.098.007.194.007c.521 0 1.009-.137 1.432-.375a7.362 7.362 0 0 0 .123-11.611c.251.548.352 1.134.316 1.705-.032.49-.163.97-.387 1.407l.004.003-.065.111-.075.127-.015.027-.28.478z" clip-rule="evenodd"></path></svg>`;
+const iconTable = glyph(
+  "0 0 16 16",
+  svg`<path d="M13.5 1.5h-11a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-11a1 1 0 0 0-1-1m0 1v2h-11v-2zm-5 3h5V9h-5zM7.5 9h-5V5.5h5zm-5 1h5v3.5h-5zm6 3.5V10h5v3.5z"></path>`
+);
+const iconFeedback = glyph(
+  "0 0 16 16",
+  svg`<path fill-rule="evenodd" d="M8 6.48c0 .699-.306 1.348-.814 1.812A2.75 2.75 0 0 1 5.334 9H0V4.418l1.369-1.874L1.767 0h1.566c.326 0 .655.118.91.35.259.237.423.577.424.953V2.74h1.667a1.7 1.7 0 0 1 1.145.44c.32.293.52.71.521 1.167zM3.667 3.74V1.303a.3.3 0 0 0-.098-.215A.35.35 0 0 0 3.333 1h-.71l-.304 1.938L1 4.744V8h4.333c.442 0 .866-.16 1.178-.446A1.46 1.46 0 0 0 7 6.478v-2.13a.58.58 0 0 0-.196-.43.7.7 0 0 0-.47-.179H3.666zM8 9.52c0-.699.306-1.348.814-1.812A2.75 2.75 0 0 1 10.666 7H16v4.582l-1.369 1.874L14.233 16h-1.566c-.326 0-.655-.118-.91-.35a1.3 1.3 0 0 1-.424-.954v-1.435H9.666a1.7 1.7 0 0 1-1.145-.44c-.32-.293-.52-.71-.521-1.168zm4.333 2.74v2.436c0 .08.035.158.098.215a.35.35 0 0 0 .236.089h.71l.304-1.938L15 11.256V8h-4.333c-.442 0-.866.16-1.178.446A1.46 1.46 0 0 0 9 9.522v2.13c0 .162.07.316.196.43a.7.7 0 0 0 .47.179h2.667z" clip-rule="evenodd"></path>`
+);
+const iconPage = glyph(
+  "0 0 16 16",
+  svg`<path d="M9 9H5v1h4zM11 6.5H5v1h6zM7.5 11.5H5v1h2.5z"></path><path d="M12.5 2.5H11V2a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v.5H3.5a1 1 0 0 0-1 1V14a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V3.5a1 1 0 0 0-1-1M6 2h4v2H6zm6.5 12h-9V3.5H5V5h6V3.5h1.5z"></path>`
+);
+export {
+  iconChat,
+  iconDownload,
+  iconFeedback,
+  iconOverflow,
+  iconPage,
+  iconRemove,
+  iconSettings,
+  iconTable
+};
+//# sourceMappingURL=header-icons.js.map