@opendata-ai/openchart-core 7.11.0 → 8.0.0-rc.10

package/src/styles/series-search.css

@@ -0,0 +1,153 @@
+@layer oc.components {
+  /* ---------------------------------------------------------------------------
+   * Series search (seriesSearch)
+   *
+   * DOM combobox overlaid on the SVG band the engine reserves below chrome.
+   * The wrapper is absolutely positioned by the vanilla adapter (inline
+   * left/top/width/height), so everything here is visual only. All colors come
+   * from --oc-* tokens, which flip in .oc-dark.
+   * --------------------------------------------------------------------------- */
+
+  .oc-series-search {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    font-family: var(--oc-font-family);
+    z-index: 10;
+  }
+
+  /* Chips: removable filter tokens for the current selection. They flow to the
+   * left of the input and scroll horizontally rather than wrapping over the
+   * chart when a reader picks many series. */
+  .oc-series-search-chips {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .oc-series-search-chips::-webkit-scrollbar {
+    display: none;
+  }
+
+  .oc-series-search-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 4px 3px 10px;
+    border: 1px solid var(--oc-border);
+    border-radius: 999px;
+    background: var(--oc-secondary);
+    color: var(--oc-text-secondary);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 16px;
+    white-space: nowrap;
+  }
+
+  .oc-series-search-chip-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* 16px glyph, but a >=24px hit area (WCAG 2.5.5 target size) via padding
+       pulled back with negative margin so the chip layout stays tight. */
+    width: 16px;
+    height: 16px;
+    padding: 4px;
+    margin: -4px -2px -4px -4px;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--oc-text-muted);
+    cursor: pointer;
+    transition:
+      color 0.15s,
+      background-color 0.15s;
+  }
+
+  .oc-series-search-chip-remove:hover {
+    color: var(--oc-text);
+    background: var(--oc-hover-bg);
+  }
+
+  .oc-series-search-chip-remove:focus-visible {
+    outline: 2px solid var(--oc-focus);
+    outline-offset: 1px;
+  }
+
+  .oc-series-search-chip-remove svg {
+    display: block;
+  }
+
+  /* Combobox: input + popup listbox. Styling matches the table search input
+   * (border, radius, focus ring) so the two search surfaces read as one system. */
+  .oc-series-search-box {
+    position: relative;
+    flex: 0 1 220px;
+    min-width: 120px;
+  }
+
+  .oc-series-search-icon {
+    position: absolute;
+    left: 9px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--oc-text-muted);
+    pointer-events: none;
+  }
+
+  /* Shared skin provided by the grouped rule in table.css.
+     Only divergent props live here. */
+  .oc-series-search-input {
+    height: 32px;
+    padding: 0 10px 0 28px;
+  }
+
+  .oc-series-search-listbox {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0;
+    min-width: 100%;
+    max-height: 240px;
+    overflow-y: auto;
+    margin: 0;
+    padding: 4px;
+    list-style: none;
+    border: 1px solid var(--oc-border);
+    border-radius: 8px;
+    background: var(--oc-card);
+    box-shadow: var(--oc-tooltip-shadow);
+    z-index: 20;
+  }
+
+  .oc-series-search-option {
+    padding: 6px 10px;
+    border-radius: 4px;
+    font-size: 13px;
+    color: var(--oc-text);
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .oc-series-search-option[aria-selected="true"],
+  .oc-series-search-option:hover {
+    background: var(--oc-hover-bg);
+  }
+
+  /* The typed substring within each suggestion. */
+  .oc-series-search-match {
+    font-weight: 600;
+  }
+
+  .oc-series-search-empty {
+    padding: 6px 10px;
+    font-size: 12px;
+    color: var(--oc-text-muted);
+  }
+}

package/src/styles/sparkline.css

@@ -1,14 +1,16 @@
-/**
- * Sparkline display mode.
- *
- * Stamped on the SVG root as data-display="sparkline" by the renderer when
- * the spec sets display: 'sparkline'. Strips any inherited padding/margin
- * so the mark renders truly edge-to-edge in tight container layouts (KPI
- * cards, table cells, dashboard tiles).
- */
+@layer oc.components {
+  /**
+   * Sparkline display mode.
+   *
+   * Stamped on the SVG root as data-display="sparkline" by the renderer when
+   * the spec sets display: 'sparkline'. Strips any inherited padding/margin
+   * so the mark renders truly edge-to-edge in tight container layouts (KPI
+   * cards, table cells, dashboard tiles).
+   */
 
-.oc-chart[data-display="sparkline"] {
-  display: block;
-  margin: 0;
-  padding: 0;
+  .oc-chart[data-display="sparkline"] {
+    display: block;
+    margin: 0;
+    padding: 0;
+  }
 }

package/src/styles/table-animation.css

@@ -1,91 +1,93 @@
-/* ---------------------------------------------------------------------------
- * Table entrance animations (.oc-table-wrapper.oc-animate)
- * --------------------------------------------------------------------------- */
+@layer oc.animation {
+  /* ---------------------------------------------------------------------------
+   * Table entrance animations (.oc-table-wrapper.oc-animate)
+   * --------------------------------------------------------------------------- */
 
-.oc-table-wrapper.oc-animate {
-  /* Chrome (title/subtitle): fade + slide up */
-  & > .oc-chrome {
-    animation: oc-enter-fade calc(var(--oc-animation-duration) * 0.6)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-  }
+  .oc-table-wrapper.oc-animate {
+    /* Chrome (title/subtitle): fade + slide up */
+    & > .oc-chrome {
+      animation: oc-enter-fade calc(var(--oc-animation-duration) * 0.6)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+    }
 
-  /* Table header: quick fade before rows start */
-  & thead {
-    animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.4)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-  }
+    /* Table header: quick fade before rows start */
+    & thead {
+      animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.4)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+    }
 
-  /* Row entrance: slide up only, no opacity (cells handle their own fading
-     to avoid opacity compounding between row and cell animations) */
-  & tbody tr {
-    animation: oc-table-enter-row var(--oc-animation-duration)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    animation-delay: calc(var(--oc-animation-stagger) * var(--oc-row-index, 0));
-  }
+    /* Row entrance: slide up only, no opacity (cells handle their own fading
+       to avoid opacity compounding between row and cell animations) */
+    & tbody tr {
+      animation: oc-table-enter-row var(--oc-animation-duration)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-row-index, 0));
+    }
 
-  /* Cell text: fade in synced with row slide */
-  & tbody td {
-    animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.5)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    animation-delay: calc(var(--oc-animation-stagger) * var(--oc-row-index, 0));
-  }
+    /* Cell text: fade in synced with row slide */
+    & tbody td {
+      animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.5)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-row-index, 0));
+    }
 
-  /* Heatmap/category cell backgrounds: longer fade, delayed after row appears */
-  & td.oc-table-heatmap,
-  & td.oc-table-category {
-    animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.7)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    animation-delay: calc(
-      var(--oc-animation-stagger) *
-      var(--oc-row-index, 0) +
-      var(--oc-animation-duration) *
-      0.3
-    );
-  }
+    /* Heatmap/category cell backgrounds: longer fade, delayed after row appears */
+    & td.oc-table-heatmap,
+    & td.oc-table-category {
+      animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.7)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+      animation-delay: calc(
+        var(--oc-animation-stagger) *
+        var(--oc-row-index, 0) +
+        var(--oc-animation-duration) *
+        0.3
+      );
+    }
 
-  /* Bar fill: clip-path grow only (no opacity change to preserve resting
-     opacity: 0.15 from table.css) */
-  & .oc-table-bar-fill {
-    animation: oc-table-enter-bar-fill calc(var(--oc-animation-duration) * 0.8)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    animation-delay: calc(
-      var(--oc-animation-stagger) *
-      var(--oc-row-index, 0) +
-      var(--oc-animation-duration) *
-      0.3
-    );
-  }
+    /* Bar fill: clip-path grow only (no opacity change to preserve resting
+       opacity: 0.15 from table.css) */
+    & .oc-table-bar-fill {
+      animation: oc-table-enter-bar-fill calc(var(--oc-animation-duration) * 0.8)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+      animation-delay: calc(
+        var(--oc-animation-stagger) *
+        var(--oc-row-index, 0) +
+        var(--oc-animation-duration) *
+        0.3
+      );
+    }
 
-  /* Sparkline SVG: clip-path reveal left-to-right. Targets the SVG directly
-     (not the wrapper) to avoid clipping absolutely-positioned dots and labels. */
-  & .oc-table-sparkline > svg {
-    animation: oc-enter-line calc(var(--oc-animation-duration) * 0.8)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    animation-delay: calc(
-      var(--oc-animation-stagger) *
-      var(--oc-row-index, 0) +
-      var(--oc-animation-duration) *
-      0.4
-    );
-  }
+    /* Sparkline SVG: clip-path reveal left-to-right. Targets the SVG directly
+       (not the wrapper) to avoid clipping absolutely-positioned dots and labels. */
+    & .oc-table-sparkline > svg {
+      animation: oc-enter-line calc(var(--oc-animation-duration) * 0.8)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+      animation-delay: calc(
+        var(--oc-animation-stagger) *
+        var(--oc-row-index, 0) +
+        var(--oc-animation-duration) *
+        0.4
+      );
+    }
 
-  /* Sparkline dots and labels: fade in after the line draws through */
-  & .oc-table-sparkline-dot,
-  & .oc-table-sparkline-labels {
-    animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.3)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    animation-delay: calc(
-      var(--oc-animation-stagger) *
-      var(--oc-row-index, 0) +
-      var(--oc-animation-duration) *
-      0.8
-    );
-  }
+    /* Sparkline dots and labels: fade in after the line draws through */
+    & .oc-table-sparkline-dot,
+    & .oc-table-sparkline-labels {
+      animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.3)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+      animation-delay: calc(
+        var(--oc-animation-stagger) *
+        var(--oc-row-index, 0) +
+        var(--oc-animation-duration) *
+        0.8
+      );
+    }
 
-  /* Search and pagination: quick fade on mount */
-  & .oc-table-search,
-  & .oc-table-pagination {
-    animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.5)
-      var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+    /* Search and pagination: quick fade on mount */
+    & .oc-table-search,
+    & .oc-table-pagination {
+      animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.5)
+        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
+    }
   }
 }