@akcelik/strct 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "UIStruct — a standalone Angular component library with a tokenised, multi-palette theme system, built for datacenter / infrastructure management UIs.",
   "author": "Serkan Akcelik <serkan.akcelik@gmail.com>",
   "license": "MIT",

package/styles/_tokens.scss

@@ -18,6 +18,17 @@
   --font: 'DM Sans', -apple-system, system-ui, sans-serif;
   --mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
   --bg-0: #0e1015;
+  /* Categorical data palette (FR-CHART-15): fixed slot order per palette
+     (the CVD-safety mechanism), slot 1 tracks the accent hue at data-grade
+     chroma. Validator-passed per surface — see docs/chart-palette.md. */
+  --chart-1: #3987e5;
+  --chart-2: #008300;
+  --chart-3: #d55181;
+  --chart-4: #c98500;
+  --chart-5: #199e70;
+  --chart-6: #d95926;
+  --chart-7: #9085e9;
+  --chart-8: #e66767;
   --bg-1: #161920;
   --bg-2: #1c2028;
   --bg-3: #23282f;
@@ -77,6 +88,17 @@
 
 [data-palette='arctic'][data-theme='light'] {
   --bg-0: #f3f4f6;
+  /* Categorical data palette (FR-CHART-15): fixed slot order per palette
+     (the CVD-safety mechanism), slot 1 tracks the accent hue at data-grade
+     chroma. Validator-passed per surface — see docs/chart-palette.md. */
+  --chart-1: #2a78d6;
+  --chart-2: #008300;
+  --chart-3: #e87ba4;
+  --chart-4: #eda100;
+  --chart-5: #1baf7a;
+  --chart-6: #eb6834;
+  --chart-7: #4a3aa7;
+  --chart-8: #e34948;
   --bg-1: #fbfcfd;
   --bg-2: #f8f9fb;
   --bg-3: #eef0f3;
@@ -136,6 +158,17 @@
 
 [data-palette='ember'][data-theme='dark'] {
   --bg-0: #12100d;
+  /* Categorical data palette (FR-CHART-15): fixed slot order per palette
+     (the CVD-safety mechanism), slot 1 tracks the accent hue at data-grade
+     chroma. Validator-passed per surface — see docs/chart-palette.md. */
+  --chart-1: #c98500;
+  --chart-2: #d55181;
+  --chart-3: #008300;
+  --chart-4: #3987e5;
+  --chart-5: #199e70;
+  --chart-6: #d95926;
+  --chart-7: #9085e9;
+  --chart-8: #e66767;
   --bg-1: #1a1714;
   --bg-2: #211e1a;
   --bg-3: #2a2621;
@@ -195,6 +228,17 @@
 
 [data-palette='ember'][data-theme='light'] {
   --bg-0: #f5f2ee;
+  /* Categorical data palette (FR-CHART-15): fixed slot order per palette
+     (the CVD-safety mechanism), slot 1 tracks the accent hue at data-grade
+     chroma. Validator-passed per surface — see docs/chart-palette.md. */
+  --chart-1: #eda100;
+  --chart-2: #e87ba4;
+  --chart-3: #008300;
+  --chart-4: #2a78d6;
+  --chart-5: #1baf7a;
+  --chart-6: #eb6834;
+  --chart-7: #4a3aa7;
+  --chart-8: #e34948;
   --bg-1: #fdfcfa;
   --bg-2: #f9f7f4;
   --bg-3: #f0ece7;
@@ -254,6 +298,17 @@
 
 [data-palette='sage'][data-theme='dark'] {
   --bg-0: #0d1210;
+  /* Categorical data palette (FR-CHART-15): fixed slot order per palette
+     (the CVD-safety mechanism), slot 1 tracks the accent hue at data-grade
+     chroma. Validator-passed per surface — see docs/chart-palette.md. */
+  --chart-1: #008300;
+  --chart-2: #3987e5;
+  --chart-3: #d55181;
+  --chart-4: #c98500;
+  --chart-5: #199e70;
+  --chart-6: #d95926;
+  --chart-7: #9085e9;
+  --chart-8: #e66767;
   --bg-1: #141a17;
   --bg-2: #1a211e;
   --bg-3: #222a26;
@@ -313,6 +368,17 @@
 
 [data-palette='sage'][data-theme='light'] {
   --bg-0: #f2f5f3;
+  /* Categorical data palette (FR-CHART-15): fixed slot order per palette
+     (the CVD-safety mechanism), slot 1 tracks the accent hue at data-grade
+     chroma. Validator-passed per surface — see docs/chart-palette.md. */
+  --chart-1: #008300;
+  --chart-2: #2a78d6;
+  --chart-3: #e87ba4;
+  --chart-4: #eda100;
+  --chart-5: #1baf7a;
+  --chart-6: #eb6834;
+  --chart-7: #4a3aa7;
+  --chart-8: #e34948;
   --bg-1: #fafcfb;
   --bg-2: #f5f8f6;
   --bg-3: #eaf0ec;

package/types/akcelik-strct.d.ts

@@ -2414,13 +2414,30 @@ declare class StrctSparkline {
 type StrctChartType = 'line' | 'area' | 'bar';
 /** Line interpolation between points. */
 type StrctChartCurve = 'smooth' | 'linear' | 'step';
+/**
+ * A categorical palette slot: theme tokens `--chart-1..8` (FR-CHART-15).
+ * Fixed slot order per palette is the CVD-safety mechanism; slot 1 tracks the
+ * theme's accent hue at data-grade chroma. Use for N *distinct entities*
+ * (per-node CPU, per-datastore latency) — the four semantic statuses stay
+ * reserved for health/threshold meaning.
+ */
+type StrctChartSlot = 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5' | 'chart-6' | 'chart-7' | 'chart-8';
+/** A series color role: a semantic status, or a categorical palette slot. */
+type StrctChartColor = StrctChartStatus | StrctChartSlot;
 /** One series in a multi-series chart. */
 interface StrctChartSeries {
     /** Values; `null` (or `NaN`) marks a data gap — the line breaks, no interpolation. */
     data: (number | null)[];
     /** Legend + tooltip name. */
     label?: string;
-    /** Per-series color; falls back to the chart's `status`. */
+    /**
+     * Color role: a semantic status *or* a categorical slot `'chart-1'..'chart-8'`
+     * (theme tokens, validator-passed per palette × mode). Takes precedence over
+     * `status`; two-directional pairs (in/out, read/write) should instead share
+     * one hue and differ by `dash`.
+     */
+    color?: StrctChartColor;
+    /** Per-series semantic color; falls back to the chart's `status`. */
     status?: StrctChartStatus;
     /** Per-series area fill. */
     area?: boolean;
@@ -2680,6 +2697,20 @@ declare class StrctChart {
         i: number;
     }[]>;
     protected readonly hoverX: _angular_core.Signal<number | null>;
+    /**
+     * Tooltip edge-flip (FR-CHART-14): near the left edge the balloon
+     * left-aligns, near the right edge it right-aligns, otherwise it stays
+     * centered — so the first/last point's values are never clipped by an
+     * `overflow: hidden` ancestor. Only the balloon shifts; the crosshair
+     * stays on the true point-X.
+     */
+    private readonly tipAlign;
+    /** Horizontal-only shift (multi / gap tips, anchored below the plot top). */
+    protected readonly tipShift: _angular_core.Signal<"translate(8px, 0)" | "translate(calc(-100% - 8px), 0)" | "translate(-50%, 0)">;
+    /** Shift incl. the single tip's vertical lift above the hover point. */
+    protected readonly tipShiftRaised: _angular_core.Signal<"translate(8px, calc(-100% - 10px))" | "translate(calc(-100% - 8px), calc(-100% - 10px))" | "translate(-50%, calc(-100% - 10px))">;
+    /** Keep the y-axis value chip vertically inside the plot box. */
+    protected axisChipY(y: number): number;
     protected readonly hoverPt: _angular_core.Signal<Pt | null>;
     protected readonly hoverValue: _angular_core.Signal<number | "">;
     /** The hovered slot exists but holds a gap (single-series). */
@@ -3110,4 +3141,4 @@ declare class StrctEmptyState {
 }
 
 export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctContextMenu, StrctContextMenuTrigger, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDesc, StrctDescriptionList, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctEmptyState, StrctField, StrctFile, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHero, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMetricTile, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRating, StrctRowDetailDef, StrctSectionMenu, StrctSegmented, StrctShell, StrctShellService, StrctSignpost, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctStack, StrctStackItem, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctTooltip, StrctTree, StrctTreeNode, StrctVerticalNav, StrctWizard, registerStrctIcon, strctValidationIcon, strctValidationTone };
-export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartAnnotation, StrctChartCurve, StrctChartSeries, StrctChartStatus, StrctChartThreshold, StrctChartType, StrctColumn, StrctCommandItem, StrctDatagridColumn, StrctDatagridColumnState, StrctDatagridLabels, StrctDatagridLazyState, StrctDescAlign, StrctDescItem, StrctDonutSegment, StrctDrawerSide, StrctDrawerSize, StrctEmptyVariant, StrctFlowDirection, StrctFlowNode, StrctFlowOrientation, StrctIconBadge, StrctKnobStatus, StrctMenuItem, StrctMenuLink, StrctMenuOpenOptions, StrctMenuSection, StrctMetricStatus, StrctModalSize, StrctMode, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressStatus, StrctRailItem, StrctRailStatus, StrctRow, StrctRowId, StrctSegmentedOption, StrctSegmentedSize, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctStatus, StrctTagStatus, StrctThresholds, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn, StrctValidationState, StrctValidationStatus };
+export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartAnnotation, StrctChartColor, StrctChartCurve, StrctChartSeries, StrctChartSlot, StrctChartStatus, StrctChartThreshold, StrctChartType, StrctColumn, StrctCommandItem, StrctDatagridColumn, StrctDatagridColumnState, StrctDatagridLabels, StrctDatagridLazyState, StrctDescAlign, StrctDescItem, StrctDonutSegment, StrctDrawerSide, StrctDrawerSize, StrctEmptyVariant, StrctFlowDirection, StrctFlowNode, StrctFlowOrientation, StrctIconBadge, StrctKnobStatus, StrctMenuItem, StrctMenuLink, StrctMenuOpenOptions, StrctMenuSection, StrctMetricStatus, StrctModalSize, StrctMode, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressStatus, StrctRailItem, StrctRailStatus, StrctRow, StrctRowId, StrctSegmentedOption, StrctSegmentedSize, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctStatus, StrctTagStatus, StrctThresholds, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn, StrctValidationState, StrctValidationStatus };