@tangible/ui 0.0.2 → 0.0.3

package/styles/components/_bundle.scss

@@ -15,6 +15,7 @@
 @use "../../components/Icon/styles"             as icon;
 @use "../../components/IconButton/styles"       as iconbutton;
 @use "../../components/Modal/styles"            as modal;
+@use "../../components/MoveHandle/styles"       as movehandle;
 @use "../../components/Notice/styles"           as notice;
 @use "../../components/OverlapStack/styles"     as overlapstack;
 @use "../../components/Pager/styles"            as pager;
@@ -51,6 +52,7 @@
   @include icon.styles();
   @include iconbutton.styles();
   @include modal.styles();
+  @include movehandle.styles();
   @include notice.styles();
   @include overlapstack.styles();
   @include pager.styles();

package/styles/index.scss

@@ -10,6 +10,10 @@
 @include sys.emit-color-roles-dark(sys.$prefix);
 @include sys.emit-color-roles-auto(sys.$prefix);
 
+@include sys.emit-accent-roles(sys.$prefix);
+@include sys.emit-accent-roles-dark(sys.$prefix);
+@include sys.emit-accent-roles-auto(sys.$prefix);
+
 // Reduced motion: kill all token-driven transitions/animations globally.
 // Components using --tui-motion-duration get instant transitions for free.
 @media (prefers-reduced-motion: reduce) {
@@ -47,6 +51,7 @@
                     0 2px 4px rgba(var(--#{sys.$prefix}shadow-color), 0.06);
   --#{sys.$prefix}shadow-lg: 0 10px 15px rgba(var(--#{sys.$prefix}shadow-color), 0.1),
                     0 4px 6px rgba(var(--#{sys.$prefix}shadow-color), 0.05);
+  --#{sys.$prefix}shadow-dropdown: 0 4px 12px rgba(var(--#{sys.$prefix}shadow-color), 0.15);
 }
 @layer resets {
   .#{sys.$prefix}interface {

package/styles/system/_control.scss

@@ -16,6 +16,13 @@
 //   md  → 16px font → 40px (default)
 //   lg  → 20px font → 48px
 //
+// Override from consuming context (e.g. Fields for WordPress):
+//   .my-context .tui-interface {
+//     --tui-control-height-sm: 32px;
+//     --tui-control-height-md: 36px;
+//     --tui-control-height-lg: 44px;
+//   }
+//
 // Usage:
 //   .tui-select__trigger { @include sys.control-sizing(sys.$prefix); }
 //
@@ -24,11 +31,19 @@
 @mixin control-sizing($prefix) {
   --_fs: var(--#{$prefix}typography-size-md);
   --_py: var(--#{$prefix}spacing-xxs);
+  --_height: calc(2em + 2 * var(--_py));
 
   font-size: var(--_fs);
   padding-block: var(--_py);
-  min-height: calc(2em + 2 * var(--_py));
+  min-height: var(--#{$prefix}control-height-md, var(--_height));
+
+  &.is-size-sm {
+    --_fs: var(--#{$prefix}typography-size-sm);
+    min-height: var(--#{$prefix}control-height-sm, var(--_height));
+  }
 
-  &.is-size-sm { --_fs: var(--#{$prefix}typography-size-sm); }
-  &.is-size-lg { --_fs: var(--#{$prefix}typography-size-lg); }
+  &.is-size-lg {
+    --_fs: var(--#{$prefix}typography-size-lg);
+    min-height: var(--#{$prefix}control-height-lg, var(--_height));
+  }
 }

package/styles/system/_tokens.scss

@@ -62,7 +62,8 @@ $brand: 'blue';
 
     /* Neutral: surfaces */
     --#{$prefix}color-bg:             #fff;
-    --#{$prefix}color-bg-surface:      #{pf.tone($neutral, 25)};
+    --#{$prefix}color-bg-surface:     #{pf.tone($neutral, 25)};
+    --#{$prefix}color-bg-muted:       #{pf.tone($neutral, 100)};
     --#{$prefix}color-bg-elevated:    #fff;
     --#{$prefix}color-bg-inverted:    #{pf.tone($neutral, 900)};
     --#{$prefix}color-bg-overlay:     rgba(0, 0, 0, var(--#{$prefix}opacity-backdrop));
@@ -149,7 +150,8 @@ $brand: 'blue';
   /* Backgrounds */
   --#{$prefix}color-bg:             #{pf.tone($neutral, 900)};
   --#{$prefix}color-bg-surface:     #{pf.tone($neutral, 800)};
-  --#{$prefix}color-bg-elevated:    #{pf.tone($neutral, 700)};
+  --#{$prefix}color-bg-muted:       #{pf.tone($neutral, 700)};
+  --#{$prefix}color-bg-elevated:    #{pf.tone($neutral, 900)};
   --#{$prefix}color-bg-inverted:    #{pf.tone($neutral, 50)};
   --#{$prefix}color-bg-overlay:     rgba(0, 0, 0, 0.7);
 
@@ -221,6 +223,118 @@ $brand: 'blue';
   }
 }
 
+// ==========================================================================
+// Accent Roles (compact, OKLCH-derived)
+// ==========================================================================
+//
+// For concepts that need their own colour identity but don't warrant a full
+// 7-step scale (section, page, step, or any future accent slot).
+//
+// Public API per accent (component-safe):
+//   --tui-theme-{name}-base      Primary fill (buttons, active states)
+//   --tui-theme-{name}-soft      Tinted surface (chips, badges, subtle panels)
+//   --tui-theme-{name}-border    Border for soft surfaces
+//   --tui-theme-{name}-on-base   Foreground on base
+//   --tui-theme-{name}-on-soft   Foreground on soft
+//
+// Components must only consume these role tokens, not the palette anchors.
+//
+// Primitives (swizzlable by consumers, OKLCH path only):
+//   --tui-palette-{name}-c       OKLCH chroma (cap at ≤ 0.20)
+//   --tui-palette-{name}-h       OKLCH hue (0–360)
+//
+// Two strategies for defining accents:
+//
+//   Path A — map from existing core families (no OKLCH needed):
+//     .my-context {
+//       --tui-theme-section-base:    var(--tui-theme-warning-base);
+//       --tui-theme-section-soft:    var(--tui-theme-warning-subtle);
+//       --tui-theme-section-border:  var(--tui-theme-warning-soft);
+//       --tui-theme-section-on-base: var(--tui-color-fg-on-accent);
+//       --tui-theme-section-on-soft: var(--tui-color-fg);
+//     }
+//
+//   Path B — derive from OKLCH anchors (true custom accent):
+//     Uses @supports guard with Path A fallback. No silent failures.
+//
+// ==========================================================================
+
+// Each accent: OKLCH anchors (c, h) + fallback core family for @supports guard
+$accent-defaults: (
+  section: (c: 0.17, h: 55,  fallback: warning),  // warm orange/amber
+  page:    (c: 0.15, h: 280, fallback: primary),   // purple
+  step:    (c: 0.14, h: 200, fallback: info),       // teal-blue
+) !default;
+
+// Emit accent role tokens with @supports progressive enhancement.
+// Fallback (all browsers): maps role tokens from core family scales.
+// Enhancement (oklch browsers): overrides with OKLCH-derived values.
+@mixin emit-accent-roles($prefix, $accents: $accent-defaults) {
+  // --- Fallback: map from core families (works everywhere) ---
+  :where(.#{$prefix}interface) {
+    @each $name, $values in $accents {
+      $family: map.get($values, fallback);
+
+      /* Accent: #{$name} (fallback → #{$family}) */
+      --#{$prefix}theme-#{$name}-base:    var(--#{$prefix}theme-#{$family}-base);
+      --#{$prefix}theme-#{$name}-soft:    var(--#{$prefix}theme-#{$family}-subtle);
+      --#{$prefix}theme-#{$name}-border:  var(--#{$prefix}theme-#{$family}-soft);
+      --#{$prefix}theme-#{$name}-on-base: var(--#{$prefix}color-fg-on-accent);
+      --#{$prefix}theme-#{$name}-on-soft: var(--#{$prefix}color-fg);
+    }
+  }
+
+  // --- Enhancement: OKLCH-derived (modern browsers) ---
+  @supports (color: oklch(0.5 0.1 0)) {
+    :where(.#{$prefix}interface) {
+      @each $name, $values in $accents {
+        $c: map.get($values, c);
+        $h: map.get($values, h);
+
+        /* Accent: #{$name} (OKLCH c=#{$c} h=#{$h}) */
+        --#{$prefix}palette-#{$name}-c: #{$c};
+        --#{$prefix}palette-#{$name}-h: #{$h};
+
+        --#{$prefix}theme-#{$name}-base:    oklch(0.62 var(--#{$prefix}palette-#{$name}-c) var(--#{$prefix}palette-#{$name}-h));
+        --#{$prefix}theme-#{$name}-soft:    oklch(0.92 calc(var(--#{$prefix}palette-#{$name}-c) * 0.55) var(--#{$prefix}palette-#{$name}-h));
+        --#{$prefix}theme-#{$name}-border:  oklch(0.80 calc(var(--#{$prefix}palette-#{$name}-c) * 0.45) var(--#{$prefix}palette-#{$name}-h));
+        --#{$prefix}theme-#{$name}-on-base: oklch(0.98 0 0);
+        --#{$prefix}theme-#{$name}-on-soft: var(--#{$prefix}color-fg);
+      }
+    }
+  }
+}
+
+// Private: dark mode accent OKLCH overrides (swap L values, tighten chroma).
+// Fallback path needs no dark override — core family vars already handle it.
+@mixin _accent-dark-overrides($prefix, $accents: $accent-defaults) {
+  @supports (color: oklch(0.5 0.1 0)) {
+    @each $name, $_ in $accents {
+      --#{$prefix}theme-#{$name}-base:    oklch(0.72 var(--#{$prefix}palette-#{$name}-c) var(--#{$prefix}palette-#{$name}-h));
+      --#{$prefix}theme-#{$name}-soft:    oklch(0.30 calc(var(--#{$prefix}palette-#{$name}-c) * 0.35) var(--#{$prefix}palette-#{$name}-h));
+      --#{$prefix}theme-#{$name}-border:  oklch(0.38 calc(var(--#{$prefix}palette-#{$name}-c) * 0.30) var(--#{$prefix}palette-#{$name}-h));
+      --#{$prefix}theme-#{$name}-on-base: oklch(0.18 0 0);
+      --#{$prefix}theme-#{$name}-on-soft: var(--#{$prefix}color-fg);
+    }
+  }
+}
+
+// Public: explicit dark mode (data-theme="dark")
+@mixin emit-accent-roles-dark($prefix, $accents: $accent-defaults) {
+  :where(.#{$prefix}interface)[data-theme="dark"] {
+    @include _accent-dark-overrides($prefix, $accents);
+  }
+}
+
+// Public: auto mode - respects system preference (data-theme="auto")
+@mixin emit-accent-roles-auto($prefix, $accents: $accent-defaults) {
+  @media (prefers-color-scheme: dark) {
+    :where(.#{$prefix}interface)[data-theme="auto"] {
+      @include _accent-dark-overrides($prefix, $accents);
+    }
+  }
+}
+
 @mixin emit-spacing-primitives($prefix, $steps: $spacing-steps) {
   @each $n in $steps {
     --#{$prefix}palette-spacing-#{$n}: calc(var(--#{$prefix}spacing-base) * #{$n});

package/tui-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.0.2",
-  "generated": "2026-02-17T04:01:35.339Z",
+  "version": "0.0.3",
+  "generated": "2026-02-24T00:56:13.287Z",
   "components": {
     "Accordion": {
       "props": {
@@ -128,7 +128,21 @@
           "description": "Additional CSS class"
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-avatar-size",
+        "--tui-avatar-radius",
+        "--tui-avatar-bg",
+        "--tui-avatar-fg",
+        "--tui-avatar-border",
+        "--tui-avatar-indicator-bg",
+        "--tui-avatar-indicator-fg",
+        "--tui-avatar-overflow-bg",
+        "--tui-avatar-overflow-fg",
+        "--tui-avatar-group-overlap",
+        "--tui-avatar-group-gap",
+        "--tui-avatar-group-border-width",
+        "--tui-avatar-group-border-color"
+      ],
       "story": {
         "title": "Primitives/Avatar",
         "tags": [
@@ -270,7 +284,10 @@
         "--tui-button-radius",
         "--tui-button-bg-interact",
         "--tui-button-fg-interact",
-        "--tui-button-border-interact"
+        "--tui-button-border-interact",
+        "--tui-control-height-sm",
+        "--tui-control-height-md",
+        "--tui-control-height-lg"
       ],
       "story": {
         "title": "Primitives/Button",
@@ -474,7 +491,9 @@
           "required": false
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-input-accent"
+      ],
       "story": {
         "title": "Forms/Checkbox",
         "tags": [
@@ -576,7 +595,13 @@
           "required": false
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-chip-bg",
+        "--tui-chip-fg",
+        "--tui-chip-border",
+        "--tui-chip-icon",
+        "--tui-chip-radius"
+      ],
       "story": {
         "title": "Primitives/Chip",
         "tags": [
@@ -620,7 +645,9 @@
           "required": false
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-chip-group-gap"
+      ],
       "story": {
         "title": "Primitives/ChipGroup",
         "tags": [
@@ -724,7 +751,19 @@
           "description": "Class name applied directly to the `<input>` element.\nUse for utilities like `tui-input-reset` that must target the input itself."
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-combobox-input-bg",
+        "--tui-combobox-input-fg",
+        "--tui-combobox-input-border",
+        "--tui-combobox-input-border-focus",
+        "--tui-combobox-input-radius",
+        "--tui-combobox-content-bg",
+        "--tui-combobox-content-border",
+        "--tui-combobox-content-shadow",
+        "--tui-combobox-content-radius",
+        "--tui-combobox-option-bg-hover",
+        "--tui-combobox-option-bg-selected"
+      ],
       "story": {
         "title": "Forms/Combobox",
         "tags": [
@@ -773,7 +812,11 @@
           "description": "Additional CSS class names."
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-content-indicator-bg",
+        "--tui-content-indicator-border",
+        "--tui-content-indicator-fg"
+      ],
       "story": {
         "title": "Primitives/ContentIndicator",
         "tags": [
@@ -802,7 +845,17 @@
           "description": "Default open state for uncontrolled usage."
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-dropdown-bg",
+        "--tui-dropdown-fg",
+        "--tui-dropdown-radius",
+        "--tui-dropdown-shadow",
+        "--tui-dropdown-border",
+        "--tui-dropdown-z",
+        "--tui-dropdown-min-width",
+        "--tui-dropdown-item-bg-hover",
+        "--tui-dropdown-item-bg-active"
+      ],
       "story": {
         "title": "Primitives/Dropdown",
         "tags": [
@@ -890,7 +943,14 @@
           "required": false
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-icon-size-xs",
+        "--tui-icon-size-sm",
+        "--tui-icon-size-md",
+        "--tui-icon-size-lg",
+        "--tui-icon-size-xl",
+        "--tui-icon-size-xxl"
+      ],
       "story": {
         "title": "Primitives/Icon",
         "tags": [
@@ -1003,7 +1063,14 @@
           "required": false
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-icon-button-bg",
+        "--tui-icon-button-fg",
+        "--tui-icon-button-border",
+        "--tui-icon-button-radius",
+        "--tui-icon-button-bg-interact",
+        "--tui-icon-button-fg-interact"
+      ],
       "story": {
         "title": "Primitives/IconButton",
         "tags": [
@@ -1083,6 +1150,75 @@
         "Notice"
       ]
     },
+    "MoveHandle": {
+      "props": {
+        "mode": {
+          "type": "\"full\" | \"handle\"",
+          "required": false,
+          "defaultValue": "full",
+          "description": "Structural mode. 'full' (default) shows background panel with arrows/index. 'handle' shows only the bare drag icon button."
+        },
+        "size": {
+          "type": "\"sm\" | \"md\"",
+          "required": false,
+          "defaultValue": "md",
+          "description": "Component scale. sm = 32px, md = 40px. Ignored when mode is 'handle'."
+        },
+        "index": {
+          "type": "number",
+          "required": false,
+          "description": "Position index. When provided, shows number at rest, drag handle on hover."
+        },
+        "locked": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "When true, shows lock icon and disables all interaction."
+        },
+        "canMoveUp": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "When false, disables the move-up button without hiding it. Default: true."
+        },
+        "canMoveDown": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "When false, disables the move-down button without hiding it. Default: true."
+        },
+        "labels": {
+          "type": "MoveHandleLabels",
+          "required": false,
+          "description": "Override internal button labels for i18n."
+        },
+        "dragHandleProps": {
+          "type": "HTMLAttributes<HTMLButtonElement>",
+          "required": false,
+          "description": "Props to spread on the drag handle button (e.g., from dnd-kit useSortable)."
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        }
+      },
+      "cssTokens": [
+        "--tui-move-handle-size",
+        "--tui-move-handle-icon-size"
+      ],
+      "story": {
+        "title": "Components/MoveHandle",
+        "tags": [
+          "autodocs",
+          "lms"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
     "MultiSelect": {
       "props": {
         "size": {
@@ -1141,7 +1277,21 @@
           "description": "Optional trigger ID override.\nUseful for Field integration via htmlFor."
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-multiselect-trigger-bg",
+        "--tui-multiselect-trigger-fg",
+        "--tui-multiselect-trigger-border",
+        "--tui-multiselect-trigger-border-focus",
+        "--tui-multiselect-trigger-radius",
+        "--tui-multiselect-content-bg",
+        "--tui-multiselect-content-border",
+        "--tui-multiselect-content-shadow",
+        "--tui-multiselect-content-radius",
+        "--tui-multiselect-option-bg-hover",
+        "--tui-multiselect-option-bg-selected",
+        "--tui-multiselect-chip-bg",
+        "--tui-multiselect-chip-fg"
+      ],
       "story": {
         "title": "Forms/MultiSelect",
         "tags": [
@@ -1350,7 +1500,14 @@
           "description": "Inline styles"
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-overlap-stack-overlap",
+        "--tui-overlap-stack-overflow-bg",
+        "--tui-overlap-stack-overflow-fg",
+        "--tui-overlap-stack-item-radius",
+        "--tui-overlap-stack-border-width",
+        "--tui-overlap-stack-border-color"
+      ],
       "story": {
         "title": "Components/OverlapStack",
         "tags": [
@@ -1410,7 +1567,9 @@
           "description": "Additional class name"
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-pager-gap"
+      ],
       "story": {
         "title": "Primitives/Pager",
         "tags": [
@@ -1505,7 +1664,17 @@
           "description": "Visual variant for circle mode.\n- `'ring'`: Hollow centre (default) — shows progress as a ring/donut\n- `'solid'`: Filled centre — shows as a solid filled circle\n\nOnly applies when `mode=\"circle\"`. Ignored in line mode."
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-progress-track",
+        "--tui-progress-fill",
+        "--tui-progress-label",
+        "--tui-progress-radius",
+        "--tui-progress-z1-fill",
+        "--tui-progress-z2-fill",
+        "--tui-progress-z3-fill",
+        "--tui-progress-z4-fill",
+        "--tui-progress-z5-fill"
+      ],
       "story": {
         "title": "Primitives/Progress",
         "tags": [
@@ -1535,7 +1704,9 @@
           "required": false
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-radio-accent"
+      ],
       "story": {
         "title": "Forms/RadioGroup",
         "tags": [
@@ -1609,7 +1780,11 @@
           "description": "Gap override (e.g. '0.25rem') – otherwise uses density utilities"
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-rating-active",
+        "--tui-rating-inactive",
+        "--tui-rating-scale"
+      ],
       "story": {
         "title": "Primitives/Rating",
         "tags": [
@@ -1666,7 +1841,18 @@
           "description": "Additional classes"
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-segmented-gap",
+        "--tui-segmented-padding",
+        "--tui-segmented-radius",
+        "--tui-segmented-bg",
+        "--tui-segmented-border",
+        "--tui-segmented-item-padding",
+        "--tui-segmented-item-radius",
+        "--tui-segmented-item-fg",
+        "--tui-segmented-item-bg-active",
+        "--tui-segmented-item-fg-active"
+      ],
       "story": {
         "title": "Components/SegmentedControl",
         "tags": [
@@ -1745,7 +1931,19 @@
           "description": "Optional trigger ID override.\nUseful for Field integration via htmlFor."
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-select-trigger-bg",
+        "--tui-select-trigger-fg",
+        "--tui-select-trigger-border",
+        "--tui-select-trigger-border-focus",
+        "--tui-select-trigger-radius",
+        "--tui-select-content-bg",
+        "--tui-select-content-border",
+        "--tui-select-content-shadow",
+        "--tui-select-content-radius",
+        "--tui-select-option-bg-hover",
+        "--tui-select-option-bg-selected"
+      ],
       "story": {
         "title": "Forms/Select",
         "tags": [
@@ -1794,7 +1992,13 @@
           "description": "Additional CSS class names."
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-sidebar-width",
+        "--tui-sidebar-bg",
+        "--tui-sidebar-border",
+        "--tui-sidebar-padding",
+        "--tui-sidebar-z"
+      ],
       "story": {
         "title": "Components/Sidebar",
         "tags": [
@@ -1889,7 +2093,14 @@
           "description": "Additional CSS class names."
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-steplist-gap",
+        "--tui-steplist-padding",
+        "--tui-steplist-radius",
+        "--tui-steplist-current-bg",
+        "--tui-steplist-current-border",
+        "--tui-steplist-hover-bg"
+      ],
       "story": {
         "title": "Components/StepList",
         "tags": [
@@ -1944,7 +2155,10 @@
           "required": false
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-switch-accent",
+        "--tui-switch-track-off"
+      ],
       "story": {
         "title": "Forms/Switch",
         "tags": [
@@ -2190,7 +2404,9 @@
           "description": "Class name applied directly to the `<input>` element.\nUse for utilities like `tui-input-reset` that must target the input itself."
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-input-group-gap"
+      ],
       "story": {
         "title": "Forms/TextInput",
         "tags": [
@@ -2227,7 +2443,10 @@
           "description": "Inline styles for layout integration"
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-toolbar-gap",
+        "--tui-toolbar-padding"
+      ],
       "story": {
         "title": "Components/Toolbar",
         "tags": [
@@ -2260,7 +2479,12 @@
           "description": "Override provider's delay for this tooltip."
         }
       },
-      "cssTokens": [],
+      "cssTokens": [
+        "--tui-tooltip-bg",
+        "--tui-tooltip-fg",
+        "--tui-tooltip-radius",
+        "--tui-tooltip-z"
+      ],
       "story": {
         "title": "Primitives/Tooltip",
         "tags": [
@@ -2421,9 +2645,9 @@
       "lms": 7,
       "player": 24,
       "reaction": 36,
-      "system": 75
+      "system": 76
     },
-    "total": 154,
+    "total": 155,
     "manifest": "./icons/manifest.json"
   }
 }