@repobit/dex-system-design 1.0.0 → 2.0.0

package/CHANGELOG.md

@@ -3,6 +3,95 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@1.0.1...@repobit/dex-system-design@2.0.0) (2026-10-15)
+
+### ⚠ BREAKING CHANGES
+
+* **DEX-1014:** bd-custom-input-clipboard no longer dispatches a custom
+"input" event with the string as detail. Listen for bd-input or
+bd-change and read detail.value. Nothing in this repository listened for
+the old event.
+
+Co-Authored-By: Claude <noreply@anthropic.com>
+
+### Features
+
+* **DEX-1014:** a dark-surface focus ring, because the white band merged into light controls
+* **DEX-1014:** bd-button and bd-button-link take a description for their inner control
+* **DEX-1014:** bd-custom-dropdown has a value and fires bd-input / bd-change
+* **DEX-1014:** bd-link takes a description too, so a bd-link tooltip trigger is described
+* **DEX-1014:** bd-link takes an arrow, because three components hand-drew a chevron instead
+* **DEX-1014:** bd-p takes color and an eyebrow variant, so all five eyebrows read 500
+* **DEX-1014:** bd-pagination-dots runs autoplay, with the progress in the current pill
+* **DEX-1014:** bd-pagination-dots, an atom for the slide indicator only awards-flex could draw
+* **DEX-1014:** bd-tooltip dismisses on Escape, the rest of WCAG 1.4.13
+* **DEX-1014:** check:docs reads docs/README.md and checks Markdown links
+* **DEX-1014:** the awards carousel shows one award per slide on a phone
+* **DEX-1014:** the eyebrow steps down to 14px below lg, as the tablet and mobile frames draw it
+
+### Bug Fixes
+
+* **DEX-1014:** a bd-code block is a group, not a landmark, and a tab stop only when it scrolls
+* **DEX-1014:** a bd-link with no href is not a link to the top of the page
+* **DEX-1014:** a bd-picture source with no type is used, not skipped as type="undefined"
+* **DEX-1014:** a select's descenders no longer clip; fields give text their full line box
+* **DEX-1014:** a standalone link takes its own role's weight, 500 rather than the inline 400
+* **DEX-1014:** an input's focused prop means focused, not a ring on a field that is not
+* **DEX-1014:** atom focus rings survive forced-colors mode, because box-shadow is not painted there
+* **DEX-1014:** bd-alert's dismiss button has a 24px target, not a 16px one
+* **DEX-1014:** bd-avatar falls back to initials on a broken image, and stays quiet without a name
+* **DEX-1014:** bd-back with an href is a real link, not a button that sets location
+* **DEX-1014:** bd-badge icons render at 16px, not the 32px they fell back to
+* **DEX-1014:** bd-blockquote credits the quote from outside it, in a figcaption
+* **DEX-1014:** bd-button focus is an offset outline, because code can leave the gap unpainted
+* **DEX-1014:** bd-caption size="sm" takes the caption-small role whole, and the docs say what it is
+* **DEX-1014:** bd-custom-dropdown announces invalid and its hint, not only draws them
+* **DEX-1014:** bd-custom-dropdown renders an empty field, not nothing, on non-JSON options
+* **DEX-1014:** bd-custom-input-clipboard announces invalid and its hint, not only draws them
+* **DEX-1014:** bd-custom-input-clipboard fires bd-input / bd-change, like its siblings
+* **DEX-1014:** bd-custom-input-clipboard gets its own export, ./input-clipboard
+* **DEX-1014:** bd-divider-vertical's thickness is a border-width step, not a length written as given
+* **DEX-1014:** bd-highlight keeps text after a repeated phrase, and adds no spaces round the mark
+* **DEX-1014:** bd-highlight keeps the headline's markup when it marks the phrase
+* **DEX-1014:** bd-label's for names and activates its control, as a native label's does
+* **DEX-1014:** bd-li's color is a text role, not a string written into its style, closes [#f00](https://github.com/bitdefender/dex-core/issues/f00)
+* **DEX-1014:** bd-list falls back to a styled value instead of carrying one nothing styles
+* **DEX-1014:** bd-progress clamps the value it reports, not only the fill it draws
+* **DEX-1014:** bd-progress clears a tone it does not style
+* **DEX-1014:** bd-radio keeps one tab stop per group when another radio changes
+* **DEX-1014:** bd-radio reflects name, so a radio named by property joins its group
+* **DEX-1014:** bd-spinner announces its label, which an empty status region never did
+* **DEX-1014:** bd-spinner keeps its arc under reduced motion and pulses the disc instead
+* **DEX-1014:** bd-switch thumb stays on its track when the reader enlarges text
+* **DEX-1014:** bd-switch's bd-change bubbles and is composed, like its siblings
+* **DEX-1014:** bd-terminal-cursor holds still under prefers-reduced-motion
+* **DEX-1014:** bd-toggle-radio's change event carries the name it declares
+* **DEX-1014:** bd-tooltip describes its trigger, so a screen reader hears the tooltip
+* **DEX-1014:** bd-tooltip re-places itself after it is moved in the DOM
+* **DEX-1014:** bd-tooltip stays open while the pointer moves onto the bubble
+* **DEX-1014:** bd-video reaches its player: captions, muted and controls="false" all work
+* **DEX-1014:** component focus rings survive forced-colors mode too
+* **DEX-1014:** custom-click bubbles and is composed, so a wrapper can hear it
+* **DEX-1014:** dividers draw a role at full strength, and opacity is only what a caller asks for
+* **DEX-1014:** eight Code Connect templates emit markup their element honours
+* **DEX-1014:** icons leave their host's style attribute alone, so a page's colour survives
+* **DEX-1014:** numbered bd-li items count 1, 2, 3 instead of all reading "1."
+* **DEX-1014:** stacked static quote cards take their own height on a phone
+* **DEX-1014:** surface="dark" buttons take the inverse ring, because blue vanished on a brand hero
+* **DEX-1014:** the awards pause toggle keeps 3:1 on the tint, and two band rules are written down
+* **DEX-1014:** the bd-contact-button manifest entry lists what the element has
+* **DEX-1014:** the current pagination pill takes a 2px edge, drawn inside so the fill keeps 8px
+* **DEX-1014:** the touch-target tokens read the dimension scale instead of px literals
+
+
+## [1.0.1](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@1.0.0...@repobit/dex-system-design@1.0.1) (2026-10-15)
+
+**Note:** Version bump only for package @repobit/dex-system-design
+
+
+
+
+
 ## [1.0.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.26.0...@repobit/dex-system-design@1.0.0) (2026-10-14)
 
 ### ⚠ BREAKING CHANGES

package/README.md

@@ -18,7 +18,7 @@ import '@repobit/dex-system-design/button';
 ```
 
 ```html
-<bd-button kind="primary" size="md">Buy now</bd-button>
+<bd-button variant="primary" size="md">Buy now</bd-button>
 ```
 
 Each component is a separate entry point — see the `exports` map in
@@ -33,29 +33,43 @@ cascade layer. Importing any component installs them; nothing else is required.
 .thing {
   padding: var(--spacing-16);
   border-radius: var(--radius-md);
-  color: var(--color-neutral-900);
+  color: var(--color-text-primary);
+  background: var(--color-surface-container);
 }
 ```
 
+For colour, use the **semantic roles** — `--color-text-*`, `--color-surface-*`,
+`--color-border-*`, `--status-*` — rather than the palette steps
+(`--color-neutral-900`, `--color-blue-500`) behind them. A role names the job,
+so it keeps its contrast when a theme or a single value changes; a palette
+step is only today's value. `Foundations/Color/Responsibilities` and
+`Foundations/Surfaces` list which role answers which question.
+
 ### 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:
+your own stylesheet wins with no special syntax. Override a role, not a
+palette step:
 
 ```css
 :root {
-  --color-blue-500: #0a58ca;
+  --color-text-brand: var(--color-blue-700);
 }
 ```
 
-Dark mode is the same mechanism:
+Recolouring a palette step (`--color-blue-500: …`) changes every role built on
+it at once, including ones whose contrast was measured against that exact
+value, such as white text on a blue button.
+
+**If your own CSS uses `@layer`**, declare the order first. The tokens' layer is
+installed after your stylesheets, so it is declared last and an override
+inside one of your layers silently loses to it:
 
 ```css
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-neutral-0: #111418;
-    --color-neutral-900: #e8eaed;
-  }
+@layer bd-tokens, app;   /* bd-tokens first, so app wins */
+
+@layer app {
+  :root { --color-text-brand: var(--color-blue-700); }
 }
 ```
 
@@ -63,6 +77,16 @@ 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.
 
+### Dark mode
+
+No dark theme ships yet. **Do not build one by swapping palette steps** — for
+example exchanging `--color-neutral-0` and `--color-neutral-900`. The roles
+that sit on coloured fills do not flip with them. Measured with exactly that
+swap: a primary button's label falls to 4.07:1, and 2.99:1 on hover; text on an
+error fill to 3.39:1; brand text on the page to 2.99:1 — all under the 4.5:1
+text minimum. A dark theme has to remap the semantic roles, and
+`Foundations/Theming/Dark mode` is the study of how.
+
 You can also import the tokens directly if you need them without a component:
 
 ```js
@@ -83,8 +107,13 @@ 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.
+fonts, grid, shape, elevation, focus, motion and dimension. Their swatches and
+values are read from the loaded token CSS at render time, so those cannot drift
+from the tokens; the explanatory prose beside them can, and is checked only for
+the files and references it cites.
+
+The full set of rules for working in this package — and the reasoning behind
+each — is in [`CLAUDE.md`](./CLAUDE.md).
 
 ## Page generation
 
@@ -129,6 +158,8 @@ foundation**. Everything is built and styled from them and from nothing else.
 | `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 |
+| `npm run check:ds` | every design-system gate — run before finishing any change |
+| `npm test` | `check:ds` plus the browser checks (needs Playwright's Chromium) |
 
 `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`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -55,6 +55,7 @@
     "./marks": "./src/components/icons/marks.js",
     "./image": "./src/components/image/image.js",
     "./input": "./src/components/input/input.js",
+    "./input-clipboard": "./src/components/input/input-clipboard.js",
     "./label": "./src/components/label/label.js",
     "./light-carousel": "./src/components/light-carousel/light-carousel.js",
     "./link": "./src/components/link/link.js",
@@ -62,6 +63,7 @@
     "./list-item": "./src/components/list/list-item/list-item.js",
     "./modal": "./src/components/modal/modal.js",
     "./page-schema": "./schemas/page-schema.json",
+    "./pagination-dots": "./src/components/pagination-dots/pagination-dots.js",
     "./paragraph": "./src/components/paragraph/paragraph.js",
     "./picture": "./src/components/picture/picture.js",
     "./pricing-cards": "./src/components/pricing-cards/pricing-card.js",
@@ -158,8 +160,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.6.50",
-    "@repobit/dex-store-elements": "2.1.20",
+    "@repobit/dex-store": "1.6.51",
+    "@repobit/dex-store-elements": "2.1.21",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -177,5 +179,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "e9db0e1ce45d462ecca8b9c6e6d43e32447d3535"
+  "gitHead": "2d3b6d84d6e805628c3b6448429fb190beff3e78"
 }