@repobit/dex-system-design 0.25.12 → 0.26.0

package/CHANGELOG.md

@@ -3,6 +3,193 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.26.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.25.12...@repobit/dex-system-design@0.26.0) (2026-10-14)
+
+### ⚠ BREAKING CHANGES
+
+* **DEX-1014:** the ./icons export no longer registers bd-ai-icon,
+bd-av-comparatives-icon, bd-best-brands-icon, bd-pc-mag-icon,
+bd-pc-mag-2024-icon, bd-pc-mag-business-icon, bd-pc-mag-readers-icon or
+bd-top-product-icon. Import ./marks for those, or the individual files.
+component-manifest.json records the new packageExport for all eight.
+
+### Features
+
+* **DEX-1014:** a dark mode page in Storybook, because the study only lived in Figma
+* **DEX-1014:** a fixed media frame role, because video and terminal read inverse
+* **DEX-1014:** a token map, because the structural findings had no page to land on
+* **DEX-1014:** add the Content Switcher, and retire the pricing toggle
+* **DEX-1014:** add the ultimate-security demo page, graded by the typography contract
+* **DEX-1014:** adopt the Eclipse icon set, and make focus visible where it was not
+* **DEX-1014:** align bd-progress across all four sources, and gate the class
+* **DEX-1014:** an icon-only button, because the audience cards' arrow had nothing to render it
+* **DEX-1014:** check whether two correct colour roles read against each other
+* **DEX-1014:** close Phase 2's spacing half as scale membership, not role coverage
+* **DEX-1014:** close Phase 3 — private aliases and host selectors, both checked
+* **DEX-1014:** connect the Figma atom library to the elements it describes
+* **DEX-1014:** draw the check and the right chevron, and retire the five glyph icons
+* **DEX-1014:** every token declares its tier, because the tier was being read off the name
+* **DEX-1014:** expose bd-link's anchor as a part
+* **DEX-1014:** extract bd-tab-list atom from the three tab sections
+* **DEX-1014:** flag a stray backtick before it breaks the template
+* **DEX-1014:** gate both coverage axes against a baseline, and share one baseline
+* **DEX-1014:** gate the plan documents against citing what does not exist
+* **DEX-1014:** give control labels a role family, taking NEEDS_ROLE from 39 to 2
+* **DEX-1014:** give the awards section its band, and its cards the edge that follows
+* **DEX-1014:** give the inverse surface the second text step it never had, closes [#0b1626](https://github.com/bitdefender/dex-core/issues/0b1626)
+* **DEX-1014:** give the pricing cards a brand band and a visible edge
+* **DEX-1014:** give the wayfinding family one contract
+* **DEX-1014:** govern spacing-vs-dimension by behaviour rather than by name
+* **DEX-1014:** hold atoms to zero literals, and lint lengths and motion
+* **DEX-1014:** implement the page column once, as bd-ensemble, closes [#4](https://github.com/bitdefender/dex-core/issues/4)
+* **DEX-1014:** land Header / v2's chosen configuration, and give the hero one h1
+* **DEX-1014:** make a missing icon visible, and make the set of owed icons a command
+* **DEX-1014:** make nine type roles fluid, and give the scale a mobile ladder
+* **DEX-1014:** make the card shape a role, and check it
+* **DEX-1014:** map the carousels to Figma
+* **DEX-1014:** map the content surfaces to Figma, closes [#27c93](https://github.com/bitdefender/dex-core/issues/27c93)
+* **DEX-1014:** map the disclosure and overlay components to Figma
+* **DEX-1014:** map the page furniture to Figma, completing the component layer
+* **DEX-1014:** map the wayfinding components to Figma with Code Connect
+* **DEX-1014:** name the boundary eight components had to spell themselves, closes [#151719](https://github.com/bitdefender/dex-core/issues/151719)
+* **DEX-1014:** name the colour, stacking and opacity roles as tokens
+* **DEX-1014:** name the focus-ring and indicator roles as tokens
+* **DEX-1014:** name the surface-container role and document the surface system
+* **DEX-1014:** promote the colour coverage check into the repo, report-only
+* **DEX-1014:** reshape bd-alert to the Eclipse banner, and rebuild the Figma set to match
+* **DEX-1014:** role purposes live in one module, because Figma only restated the code name
+* **DEX-1014:** size the interface icons from the icon scale
+* **DEX-1014:** the avatar disc reads the brand tint, chosen for what it means
+* **DEX-1014:** the header's CTA labels are the page's, and the secondary CTA was dead
+* **DEX-1014:** the header's heading level is the page's to set, not the component's
+
+### Bug Fixes
+
+* **DEX-1014:** a self-test may not assert what the checkout happens to be
+* **DEX-1014:** act on the drift audit — nine dead rules, seven motion guards, five documents
+* **DEX-1014:** align the awards card, and repair the icon values worth repairing
+* **DEX-1014:** align the badge Playground args, unbreaking CI
+* **DEX-1014:** align the highlight end-bar with its background
+* **DEX-1014:** bd-display defaults to md, the largest step that fits every width
+* **DEX-1014:** bound the tooltip bubble so its text stops leaving the page
+* **DEX-1014:** bring the CompareSection card to the card-family corner
+* **DEX-1014:** bring the fourth form control into the form family
+* **DEX-1014:** check the lint baseline both ways, and say what is in it
+* **DEX-1014:** check:docs must not fail on a shallow clone — it broke the branch
+* **DEX-1014:** clean up manifest and package.json exports after tabsComponent removal
+* **DEX-1014:** clear the literals left in the remaining atoms
+* **DEX-1014:** close the contrast census — one real row, two that never rendered
+* **DEX-1014:** close the dark mode palette and primitive findings, light unchanged
+* **DEX-1014:** close the features section at both ends
+* **DEX-1014:** close the findings the component-layer drawings surfaced
+* **DEX-1014:** close the three wayfinding interaction defects
+* **DEX-1014:** close three gaps the Figma atom audit surfaced
+* **DEX-1014:** close two tooling gaps found while evaluating something else
+* **DEX-1014:** correct anchor-nav accessibility and align its motion
+* **DEX-1014:** correct failing text and surface contrast pairs
+* **DEX-1014:** correct the pairing matrix where the matrix was the thing that was wrong
+* **DEX-1014:** count baseline entries instead of just matching them
+* **DEX-1014:** delete the form-input leading token that described the bug
+* **DEX-1014:** disable the paste button to the colour its own field uses
+* **DEX-1014:** end the highlight bars on the background edge
+* **DEX-1014:** finish the tertiary button's contrast decision, on the resting state
+* **DEX-1014:** frozen exempts the architecture mechanism, not the content
+* **DEX-1014:** give every focus ring one owner, and one that can reach its target
+* **DEX-1014:** give the 11px label role the four axes it was missing
+* **DEX-1014:** give the accordion one focus ring, on the control that takes focus
+* **DEX-1014:** give the anchor-nav dropdown the leading its size names
+* **DEX-1014:** give the anchor-nav trigger a control edge, and drop the footer's dead one, closes [#c5c9](https://github.com/bitdefender/dex-core/issues/c5c9) [#88909](https://github.com/bitdefender/dex-core/issues/88909)
+* **DEX-1014:** give the awards section a host selector, for three of five rules
+* **DEX-1014:** give the awards-flex edge a border width, not a spacing step
+* **DEX-1014:** give the back control a name, a type, and a hidden arrow
+* **DEX-1014:** give the banner the typography role it was assembling by hand
+* **DEX-1014:** give the breadcrumb one type size, a weight cue and a real target
+* **DEX-1014:** give the dark theme's bar label the ink for a light fill, closes [#338](https://github.com/bitdefender/dex-core/issues/338) [#151719](https://github.com/bitdefender/dex-core/issues/151719) [#7c3](https://github.com/bitdefender/dex-core/issues/7c3)
+* **DEX-1014:** give the dialog the depth role its siblings already use
+* **DEX-1014:** give the feedback surfaces the roles they were asking for
+* **DEX-1014:** give the light carousel item the family inset at every width
+* **DEX-1014:** give the modal the dialog role its labels were already written for
+* **DEX-1014:** give the modal title back the space its rule could never apply
+* **DEX-1014:** give the process steps headings the ink for their own surface, closes [#0b1626](https://github.com/bitdefender/dex-core/issues/0b1626) [#0b1626](https://github.com/bitdefender/dex-core/issues/0b1626)
+* **DEX-1014:** give the table's text the leading it never declared
+* **DEX-1014:** give the terms link the resting-link ink, not the pressed one
+* **DEX-1014:** give the terms prose a readable measure
+* **DEX-1014:** give the two wrapping texts that had no leading a body role
+* **DEX-1014:** give the video player a focus ring and somewhere for focus to go
+* **DEX-1014:** ink on a fill reads its own role, because the borrowed ones flip in a dark theme, closes [#0059d6](https://github.com/bitdefender/dex-core/issues/0059d6) [#0045](https://github.com/bitdefender/dex-core/issues/0045)
+* **DEX-1014:** keep display typography inside the viewport
+* **DEX-1014:** keep the explicit footer locale ahead of URL inference
+* **DEX-1014:** keep the highlight decorations with their end when it wraps
+* **DEX-1014:** keep the tooltip on screen at container edges
+* **DEX-1014:** keep the tooltip's geometry inside the viewport
+* **DEX-1014:** let a tall modal be reached, and stop it overhanging the phone
+* **DEX-1014:** let an inline link take its sentence's type
+* **DEX-1014:** let documented component attributes reach their properties
+* **DEX-1014:** let the carousel card's edge stop growing with the text
+* **DEX-1014:** let the colour gate see a primitive behind an alias
+* **DEX-1014:** let the grid hear the column attributes it documents
+* **DEX-1014:** let the input state showcase vary only the state
+* **DEX-1014:** let the link's hover underline reach the light surfaces
+* **DEX-1014:** let the list marker follow the leading it centres on
+* **DEX-1014:** let the table own its rows, and its narrow labels come from columns
+* **DEX-1014:** let the three P4B motion sites honour prefers-reduced-motion
+* **DEX-1014:** make a compare-bar work on its own, and take the fill pair for green and red, closes [#c5c9](https://github.com/bitdefender/dex-core/issues/c5c9) [#e1e3e5](https://github.com/bitdefender/dex-core/issues/e1e3e5) [#006](https://github.com/bitdefender/dex-core/issues/006) [#15c14](https://github.com/bitdefender/dex-core/issues/15c14) [#0e8532](https://github.com/bitdefender/dex-core/issues/0e8532) [#ff0000](https://github.com/bitdefender/dex-core/issues/ff0000) [#d60000](https://github.com/bitdefender/dex-core/issues/d60000) [#7c3](https://github.com/bitdefender/dex-core/issues/7c3) [#338](https://github.com/bitdefender/dex-core/issues/338) [#7c3](https://github.com/bitdefender/dex-core/issues/7c3)
+* **DEX-1014:** make compare regions own a resolvable accessible name
+* **DEX-1014:** make the agent-endpoints pill a real button-link
+* **DEX-1014:** make the footer column API honest
+* **DEX-1014:** make the header compose at every width
+* **DEX-1014:** make the two disclosure controls agree, and stop focus tightening a corner
+* **DEX-1014:** match the button and field corner radius at every size
+* **DEX-1014:** meet pagination target-size requirements
+* **DEX-1014:** mirror the highlight decorations vertically and pad both sides
+* **DEX-1014:** name the leadings that were spelled by hand, and delete the ones that reach nothing
+* **DEX-1014:** put a picture on screen
+* **DEX-1014:** put the footer nav's focus ring in the shadow root that holds it
+* **DEX-1014:** put the header on the breakpoint scale, and make the scrim scale with its panel
+* **DEX-1014:** put three no-role markers where they can be read
+* **DEX-1014:** raise the four atom colours that fail WCAG contrast
+* **DEX-1014:** read the form and button spacing tokens as pixels, not steps
+* **DEX-1014:** remove page switcher mobile overflow
+* **DEX-1014:** repair syntax error and unused var from merge conflicts
+* **DEX-1014:** repair the design-system checks after the component merge
+* **DEX-1014:** report a hex no token expresses, not only one a token duplicates, closes [#006](https://github.com/bitdefender/dex-core/issues/006) [#7c3](https://github.com/bitdefender/dex-core/issues/7c3) [#7c3](https://github.com/bitdefender/dex-core/issues/7c3) [#0003](https://github.com/bitdefender/dex-core/issues/0003)
+* **DEX-1014:** resolve brand text through the role, not the blue-500 primitive
+* **DEX-1014:** resolve the awards-flex edge through a border role
+* **DEX-1014:** restore carousel rendering
+* **DEX-1014:** restore terminal message text visibility
+* **DEX-1014:** retire the card's last eleven importants, seven redundant and four unreachable
+* **DEX-1014:** ring the whole disclosure, and let arrows walk the accordion
+* **DEX-1014:** say which kind of current location each nav marks
+* **DEX-1014:** separate heading level from heading size, and land the P4 decisions
+* **DEX-1014:** settle the section-title roles and the last hand-written heading
+* **DEX-1014:** settle three card-family differences that measurement says are not decisions
+* **DEX-1014:** stop six components running off the side of the page
+* **DEX-1014:** stop the awards outline changing with the viewport
+* **DEX-1014:** stop the loading placeholder claiming a contrast exemption
+* **DEX-1014:** stop the runtime self-test asserting machine-specific behaviour
+* **DEX-1014:** stop two components redefining body-regular, and mark the table's raw type
+* **DEX-1014:** synchronize the component layer with the atom and token architecture
+* **DEX-1014:** teach the colour check the spelling this package actually uses
+* **DEX-1014:** text-subtle is a placement rule, because no value clears every ground
+* **DEX-1014:** the branch was red, because check:attributes is not in check:ds
+* **DEX-1014:** the dark mode findings follow the study's renumbering
+* **DEX-1014:** the dark mode text roles render, because bd-p has no colour attribute
+* **DEX-1014:** the footer had the wrong locale key, because Hungary is an English market
+* **DEX-1014:** the info badge reads its own fill, because sharing a value is not sharing a role
+* **DEX-1014:** the mobile ladder holds, and the page that measured it was reading the wrong font
+* **DEX-1014:** the mobile ladder was calibrated on a language we do not sell in
+* **DEX-1014:** the neutral badge takes the heavier tint, because only brand has a reason not to
+* **DEX-1014:** the pairing check could not see a numeric line-height step
+* **DEX-1014:** the token map reads the Surfaces role tables, because moving them hid three reads
+* **DEX-1014:** three colours that were chosen by eye and measured wrong
+* **DEX-1014:** three header defects only the render showed, and a lint rule for the fourth
+* **DEX-1014:** three light-theme contrast failures the dark mode study measured
+* **DEX-28949:** clear the remaining design-system findings from main's code, closes [#2E6BF6](https://github.com/bitdefender/dex-core/issues/2E6BF6)
+* **DEX-28949:** move main's merged-in CSS onto the design tokens
+* **DEX-28949:** put install-options on roles, and make main's atom attributes reach the atoms
+* **DEX-28949:** put terminal-message's log lines on the media roles
+
+
 ## [0.25.12](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.25.11...@repobit/dex-system-design@0.25.12) (2026-10-12)
 
 **Note:** Version bump only for package @repobit/dex-system-design

package/README.md

@@ -1,15 +1,138 @@
-# `@repobit/dex-design-system`
+# @repobit/dex-system-design
 
-# Target Integration SDK Documentation
+Design system for Bitdefender web surfaces, built as [Lit](https://lit.dev) web
+components. Every component is a custom element prefixed `bd-`, styled entirely
+from design tokens.
 
-Dex design system shenanigans
+```bash
+npm install @repobit/dex-system-design
+```
 
----
+## Using a component
 
-## Overview
+Import the component you need; importing it registers its custom element and
+installs the design tokens.
 
-The Target Integration SDK is designed to simplify the integration process with Adobe Target and the Adobe Data Layer. It provides a centralized solution for managing visitor identity operations, sending events, appending visitor IDs to URLs, retrieving mbox offers, and fetching Customer Data Platform (CDP) data. The SDK encapsulates these operations within a single abstract class, ensuring that targeting functionalities are cleanly organized and maintainable in your application.
+```js
+import '@repobit/dex-system-design/button';
+```
 
----
+```html
+<bd-button kind="primary" size="md">Buy now</bd-button>
+```
 
-## Key Features
+Each component is a separate entry point — see the `exports` map in
+`package.json` for the full list. There is no barrel import.
+
+## Tokens
+
+Tokens are declared on `:root` in document scope, inside the `bd-tokens`
+cascade layer. Importing any component installs them; nothing else is required.
+
+```css
+.thing {
+  padding: var(--spacing-16);
+  border-radius: var(--radius-md);
+  color: var(--color-neutral-900);
+}
+```
+
+### Overriding a token
+
+Because the tokens sit in a cascade layer, and unlayered CSS beats any layer,
+your own stylesheet wins with no special syntax:
+
+```css
+:root {
+  --color-blue-500: #0a58ca;
+}
+```
+
+Dark mode is the same mechanism:
+
+```css
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-neutral-0: #111418;
+    --color-neutral-900: #e8eaed;
+  }
+}
+```
+
+This works because a token is declared once, on the document, rather than on
+each component's `:host`. A `:host` declaration would beat an inherited value
+and make the token unoverridable.
+
+You can also import the tokens directly if you need them without a component:
+
+```js
+import '@repobit/dex-system-design/tokens';        // installs into document scope
+```
+```css
+@import '@repobit/dex-system-design/tokens.css';   /* or via CSS */
+@import '@repobit/dex-system-design/fonts.css';    /* @font-face, document scope only */
+```
+
+`fonts.css` must be loaded in document scope. An `@font-face` rule inside a
+shadow root never reaches `document.fonts` and silently does nothing.
+
+## Documentation
+
+```bash
+npm run storybook
+```
+
+`Foundations/` documents every primitive — colour, spacing, typography,
+fonts, grid, shape, elevation, focus, motion and dimension. Those pages read
+the loaded token CSS at render time, so they cannot drift from the tokens.
+
+## Page generation
+
+`schemas/` holds the machine-readable contract for generating pages from a
+content brief:
+
+- `component-manifest.json` — public tags, entry points and props
+- `page-schema.json` — the page tree a generator must produce
+
+See `schemas/README.md`. Run `npm run check:manifest` after changing a
+component's public props.
+
+## Conventions
+
+The tokens in `src/tokens/tokens.js` are the **single source of truth for the
+foundation**. Everything is built and styled from them and from nothing else.
+
+- **Never a literal where a token exists.** No raw hex, no off-scale radii, no
+  hardcoded control heights.
+- **Never borrow a value from an external source** — a Figma file, a
+  screenshot, another design system. Read the intent, then express it with the
+  token that already carries that value. If a design calls for `#0059d6`, write
+  `var(--color-blue-600)`. If it needs a value the tokens do not have, adding
+  the token is its own decision — do not inline it.
+- **`line-height` is always unitless** and always from
+  `--typography-lineHeight-*`. An absolute line-height inherits as a fixed line
+  box and stops scaling when a reader raises their default font size.
+- **Never a spacing or dimension token for type.**
+  `font-size: var(--spacing-14)` is a category error.
+- **No `var(--token, literal)` fallbacks.** Tokens are always present, and a
+  fallback restating a value silently lies once the token changes.
+- **Contrast:** 4.5:1 for body text, 3:1 for non-text UI and icons. Note that
+  `--color-blue-500` is only 4.53:1 on pure white and fails on any tint — use
+  `--color-blue-600` for text.
+
+## Scripts
+
+| | |
+|---|---|
+| `npm run storybook` | component and token documentation |
+| `npm run dev` | Vite dev server for `index.html` |
+| `npm run build:tokens` | regenerate the CSS token files from their JS sources |
+| `npm run build:tokens:check` | fail if a generated file is stale (CI) |
+| `npm run check:manifest` | verify the component manifest against the components |
+
+`src/tokens/tokens.js` is the source of truth for tokens; `tokens.css` is
+generated from it. Edit the JS and run `npm run build:tokens`.
+
+## Licence
+
+ISC

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.25.12",
+  "version": "0.26.0",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -17,46 +17,72 @@
     "LICENSE"
   ],
   "exports": {
-    "./component-manifest": "./schemas/component-manifest.json",
-    "./page-schema": "./schemas/page-schema.json",
-    "./accordion-bg": "./src/components/accordion/accordion-bg.js",
     "./accordion": "./src/components/accordion/accordion.js",
+    "./accordion-bg": "./src/components/accordion/accordion-bg.js",
+    "./alert": "./src/components/alert/alert.js",
     "./anchor": "./src/components/anchor/anchor-nav.js",
+    "./annotation": "./src/components/annotation/annotation.js",
+    "./avatar": "./src/components/avatar/avatar.js",
+    "./back": "./src/components/back/back.js",
     "./badge": "./src/components/badge/badge.js",
+    "./blockquote": "./src/components/blockquote/blockquote.js",
     "./button": "./src/components/button/button.js",
+    "./caption": "./src/components/caption/caption.js",
     "./cards": "./src/components/cards/card.js",
     "./carousel": "./src/components/carousel/carousel.js",
-    "./compare": "./src/components/compare/compare.js",
     "./checkbox": "./src/components/checkbox/checkbox.js",
+    "./code": "./src/components/code/code.js",
+    "./compare": "./src/components/compare/compare.js",
+    "./component-manifest": "./schemas/component-manifest.json",
+    "./display": "./src/components/display/display.js",
     "./divider-horizontal": "./src/components/divider/divider-horizontal.js",
     "./divider-vertical": "./src/components/divider/divider-vertical.js",
     "./dropdown": "./src/components/dropdown/dropdown.js",
     "./features": "./src/components/features/features.js",
     "./features-tab": "./src/components/features-tab/features-tab.js",
+    "./fieldset": "./src/components/fieldset/fieldset.js",
+    "./fonts.css": "./src/tokens/fonts.css",
     "./footer": "./src/components/footer/footer.js",
     "./footer-links-group": "./src/components/footer/footer-links-group.js",
     "./footer-lp": "./src/components/footer/footer-lp.js",
     "./footer-nav-menu": "./src/components/footer/footer-nav-menu.js",
     "./grid": "./src/components/grid/grid.js",
-    "./heading": "./src/components/heading/heading.js",
     "./header": "./src/components/header/header.js",
+    "./heading": "./src/components/heading/heading.js",
+    "./help-text": "./src/components/help-text/help-text.js",
     "./highlight": "./src/components/highlight/highlight.js",
+    "./icons": "./src/components/icons/icons.js",
+    "./marks": "./src/components/icons/marks.js",
     "./image": "./src/components/image/image.js",
     "./input": "./src/components/input/input.js",
+    "./label": "./src/components/label/label.js",
+    "./light-carousel": "./src/components/light-carousel/light-carousel.js",
     "./link": "./src/components/link/link.js",
     "./list": "./src/components/list/list.js",
     "./list-item": "./src/components/list/list-item/list-item.js",
-    "./light-carousel": "./src/components/light-carousel/light-carousel.js",
     "./modal": "./src/components/modal/modal.js",
+    "./page-schema": "./schemas/page-schema.json",
     "./paragraph": "./src/components/paragraph/paragraph.js",
     "./picture": "./src/components/picture/picture.js",
     "./pricing-cards": "./src/components/pricing-cards/pricing-card.js",
+    "./progress": "./src/components/progress/progress.js",
     "./radio": "./src/components/radio/radio.js",
     "./review": "./src/components/review/review.js",
     "./review-grid": "./src/components/review/review-grid.js",
+    "./skeleton": "./src/components/skeleton/skeleton.js",
+    "./spinner": "./src/components/spinner/spinner.js",
+    "./switch": "./src/components/switch/switch.js",
+    "./tab-list": "./src/components/tab-list/tab-list.js",
+    "./tab-list-css": "./src/components/tab-list/tab-list.css.js",
     "./tabs": "./src/components/tabs/tabs.js",
-    "./tabsComponent": "./src/components/tabsComponent/tabsComponent.js",
-    "./terms": "./src/components/termsOfUse/terms.js"
+    "./tag": "./src/components/tag/tag.js",
+    "./terms": "./src/components/termsOfUse/terms.js",
+    "./textarea": "./src/components/textarea/textarea.js",
+    "./tokens": "./src/tokens/tokens.js",
+    "./tokens.css": "./src/tokens/tokens.css",
+    "./tooltip": "./src/components/tooltip/tooltip.js",
+    "./video": "./src/components/video/video.js",
+    "./visually-hidden": "./src/components/visually-hidden/visually-hidden.js"
   },
   "publishConfig": {
     "access": "public"
@@ -70,18 +96,74 @@
     "start": "vite",
     "dev": "vite",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build --disable-telemetry"
+    "build-storybook": "storybook build --disable-telemetry",
+    "build:tokens": "node scripts/build-tokens.mjs",
+    "build:tokens:check": "node scripts/build-tokens.mjs --check",
+    "check:manifest": "node scripts/check-manifest.mjs",
+    "check:architecture": "node scripts/check-architecture.mjs",
+    "check:architecture:selftest": "node scripts/check-architecture.mjs --selftest",
+    "check:architecture:negative": "node scripts/check-architecture.mjs --negative-control",
+    "check:ensemble": "node scripts/check-ensemble.mjs",
+    "check:ensemble:selftest": "node scripts/check-ensemble.mjs --selftest",
+    "check:ensemble:negative": "node scripts/check-ensemble.mjs --negative-control",
+    "check:semantic-coverage": "node scripts/check-semantic-coverage.mjs",
+    "check:semantic-coverage:selftest": "node scripts/check-semantic-coverage.mjs --selftest",
+    "check:semantic-coverage:negative": "node scripts/check-semantic-coverage.mjs --negative-control",
+    "check:color-coverage": "node scripts/check-color-coverage.mjs",
+    "check:host-selectors": "node scripts/check-host-selectors.mjs",
+    "check:host-selectors:selftest": "node scripts/check-host-selectors.mjs --selftest",
+    "check:host-selectors:negative": "node scripts/check-host-selectors.mjs --negative-control",
+    "check:aliases": "node scripts/check-aliases.mjs",
+    "check:aliases:selftest": "node scripts/check-aliases.mjs --selftest",
+    "check:icons": "node scripts/check-icons.mjs",
+    "check:icons:selftest": "node scripts/check-icons.mjs --selftest",
+    "check:icons:negative": "node scripts/check-icons.mjs --negative-control",
+    "check:color-coverage:selftest": "node scripts/check-color-coverage.mjs --selftest",
+    "lint:tokens": "node scripts/lint-tokens.mjs",
+    "figma:connect:check": "figma connect publish --dry-run --skip-update-check",
+    "figma:connect:publish": "figma connect publish --skip-update-check",
+    "check:attributes": "node scripts/check-attribute-contract.mjs",
+    "check:attributes:selftest": "node scripts/check-attribute-contract.mjs --contract-selftest",
+    "check:attributes:negative": "node scripts/check-attribute-contract.mjs --negative-control",
+    "lint:tokens:selftest": "node scripts/lint-tokens.mjs --selftest",
+    "check:ds": "npm run build:tokens:check && npm run check:token-tiers:selftest && npm run check:token-tiers:negative && npm run check:token-tiers && npm run check:manifest && npm run check:architecture && npm run check:architecture:selftest && npm run check:architecture:negative && npm run check:ensemble && npm run check:ensemble:selftest && npm run check:ensemble:negative && npm run check:baseline:selftest && npm run check:semantic-coverage:selftest && npm run check:semantic-coverage:negative && npm run check:semantic-coverage && npm run check:color-coverage:selftest && npm run check:color-coverage && npm run check:icons:selftest && npm run check:icons:negative && npm run check:icons && npm run check:aliases:selftest && npm run check:aliases && npm run check:host-selectors:selftest && npm run check:host-selectors:negative && npm run check:host-selectors && npm run check:spacing-scale:selftest && npm run check:spacing-scale:negative && npm run check:spacing-scale && npm run check:enum-vocabulary:selftest && npm run check:enum-vocabulary:negative && npm run check:enum-vocabulary && npm run check:accessible-names:selftest && npm run check:accessible-names:negative && npm run check:accessible-names && npm run check:docs:selftest && npm run check:docs:negative && npm run check:docs && npm run lint:tokens:selftest && npm run lint:tokens",
+    "ci:ds": "npm run check:ds && npm run verify:runtime && npm run check:attributes:selftest && npm run check:attributes:negative && npm run check:attributes",
+    "verify:runtime": "node scripts/verify-runtime.mjs --selftest",
+    "verify:render": "node scripts/render-health.mjs",
+    "verify:render:negative": "node scripts/render-health.mjs --negative-control",
+    "verify:typography": "node scripts/render-health.mjs --typography",
+    "verify:typography:selftest": "node scripts/render-health.mjs --typography-selftest",
+    "verify:accordion": "node scripts/verify-accordion.mjs",
+    "verify:accordion:negative": "node scripts/verify-accordion.mjs --negative-control",
+    "verify:accordion:selftest": "node scripts/verify-accordion.mjs --shift-selftest",
+    "check:docs": "node scripts/check-docs.mjs",
+    "check:docs:selftest": "node scripts/check-docs.mjs --selftest",
+    "check:docs:negative": "node scripts/check-docs.mjs --negative-control",
+    "check:token-tiers": "node scripts/check-token-tiers.mjs",
+    "check:token-tiers:selftest": "node scripts/check-token-tiers.mjs --selftest",
+    "check:token-tiers:negative": "node scripts/check-token-tiers.mjs --negative-control",
+    "check:spacing-scale": "node scripts/check-spacing-scale.mjs",
+    "check:spacing-scale:selftest": "node scripts/check-spacing-scale.mjs --selftest",
+    "check:spacing-scale:negative": "node scripts/check-spacing-scale.mjs --negative-control",
+    "check:baseline:selftest": "node scripts/baseline.mjs --selftest",
+    "check:enum-vocabulary": "node scripts/check-enum-vocabulary.mjs",
+    "check:enum-vocabulary:selftest": "node scripts/check-enum-vocabulary.mjs --selftest",
+    "check:enum-vocabulary:negative": "node scripts/check-enum-vocabulary.mjs --negative-control",
+    "check:accessible-names": "node scripts/check-accessible-names.mjs",
+    "check:accessible-names:selftest": "node scripts/check-accessible-names.mjs --selftest",
+    "check:accessible-names:negative": "node scripts/check-accessible-names.mjs --negative-control"
   },
   "bugs": {
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.6.49",
-    "@repobit/dex-store-elements": "2.1.19",
+    "@repobit/dex-store": "1.6.50",
+    "@repobit/dex-store-elements": "2.1.20",
     "lit": "^3.3.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.7",
+    "@figma/code-connect": "^2.0.0",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/blocks": "^8.6.4",
     "@storybook/experimental-addon-test": "^8.6.14",
@@ -94,5 +176,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "9ca40454c888c673804cf84abcc2fc2ca949ef41"
+  "gitHead": "9a7ca2949c8e6a678d3d27a13ff5fa331431bfc8"
 }