Changelog
Full version history of the DigiLawyer Design System. Filter by type or contributor. Add new entries at the top of both this table and CHANGELOG.md.
All versions
| Version | Type | What changed | Description | Date | Updated by |
|---|---|---|---|---|---|
| v2.54.2 | PATCH | Fix Storybook controls across the remaining eighteen components | Completed the 25-component Storybook audit. Declared controls for every PropTypes.node prop that lacked one, following the convention Button and Input already used: text-carrying props (children, label, caption) get control:'text'; element-valued props (icon, leading, trailing, badge, action) get control:false so they stop rendering as uneditable empty-object controls. Composite components — Breadcrumb, Dropdown, Pagination and Table — take structural children rather than text, so their children control is hidden instead of forced to text. Avatar's alt uses a custom validator function which react-docgen cannot type, so it also fell back to a JSON control and could not be edited; now text. Avatar and Snackbar hardcoded JSX children which always override a spread children prop, leaving their controls inert; both moved into args. Tabs and UploadMedia had their node props declared as well. Result: 25/25 components clean, 194 stories indexing. No shipped component changed and the bundle is unchanged at 78.06 kB. No component was ever functionally broken — every one worked correctly; Storybook simply could not show it. | 21 August 2026 | Adesh Singh |
| v2.54.1 | PATCH | Wire Storybook actions for six interactive components | Added action argTypes to DatePicker (onSelect), Rating (onChange), Slider (onChange), Snackbar (onClose), Tabs (onClick) and UploadMedia (onFilesChange). All six fired their callbacks correctly but none were logged, so interactions looked dead in Storybook — Snackbar worst of all, where clicking the close button produced no visible and no logged result despite Snackbar.jsx wiring it properly. Snackbar's Playground also hardcoded onClose after the args spread, which would have silently overridden the action spy; removed so args flows through, verified the close button still renders with no visual change. Audited all six functionally first: DatePicker opens and selects and closes, Rating updates stars and ARIA, Slider tracks value, Tabs moves selection, UploadMedia registers files — none were actually broken, only unobservable. Stories files only, no shipped component changed, bundle unchanged at 78.06 kB. Known gap: SliderRange has no args-driven story, so its onChange still cannot be logged in the Actions tab. | 21 August 2026 | Adesh Singh |
| v2.54.0 | MINOR | Alert — enforce one-line title and three-line body | Alert title is now capped at one line and the body at three, both truncating with an ellipsis. Previously either could grow unbounded, so pasted or AI-generated copy silently stretched the Alert and broke the layout around it. Root cause was .alert-title carrying flex:1 without min-width:0 — a flex child defaults to min-width:auto and refuses to shrink below its content, so a long title widened the whole component instead of truncating; .alert-body had no constraint at all. The title fix follows the existing .snackbar-label pattern; the body uses -webkit-line-clamp:3 plus the standard line-clamp, the first line-clamp in components.css. Alert.jsx now warns in development when copy is genuinely being cut, measured via scrollWidth/scrollHeight rather than a character budget — a character count false-positives in wide containers and false-negatives in narrow ones. The check bails when clientWidth is 0 so Alerts inside collapsed accordions or inactive tabs do not warn spuriously; the warning follows the existing Tag.jsx pattern and is eliminated from consumer production builds. Documented in the docs Do/Don't list and in .claude/components/alert.md, and demonstrated by a new Copy Limits story in Storybook. Note the clamp is width-dependent: copy that fits a 480px Alert can still clamp in a narrow column, which is exactly what the dev warning exists to catch. | 17 August 2026 | Adesh Singh |
| v2.53.5 | PATCH | Storybook control fixes and defaultProps cleanup | Three housekeeping fixes with no change to rendered output. (1) Removed five redundant defaultProps blocks from Button, Tag, Checkbox and Dropdown/DropdownItem — every value already existed as a destructured default parameter, so the blocks were dead duplicates and a second place for defaults to drift out of sync. React 19 ignores defaultProps on function components entirely, so this also clears the React 18.3 deprecation warning and makes the package React 19-ready. Verified by rendering: all defaults still apply and all overrides still flow. (2) Normalised 13 changelog author entries from 'Adesh' to 'Adesh Singh' in CHANGELOG.md, plus 26 data-by attributes and table cells in changelog.html — the docs changelog filters by data-by, so the split name listed one person as two contributors. The four prose mentions of 'Adesh' inside descriptions were deliberately left untouched, and the CHANGELOG.md template placeholder now asks for a full name. (3) Fixed Alert's Storybook controls: title and children are PropTypes.node, which react-docgen reports as 'node' and Storybook renders as an uneditable JSON control — both are now text controls; onDismiss is wired to an action so the Actions tab logs dismissals; and the inert icon/actions placeholder args were removed. | 17 August 2026 | Adesh Singh |
| v2.53.4 | PATCH | Fix DatePicker minDate/view-sync/range-title bugs, SliderRange labeling and NaN, UploadMedia drag-and-drop | minDate={new Date()} no longer disables today after midnight (day cells vs comparison date normalized to same time-of-day). DatePicker now re-syncs its visible month when a controlled value changes externally. The range-mode calendar title no longer renders as a dead clickable button. SliderRange gained the documented inputAProps/inputBProps API so each thumb can get its own aria-label. Slider/SliderRange no longer produce a NaN fill when min equals max. UploadMedia now implements real drag-and-drop (previously click-only despite its own docs claiming otherwise), enforces accept filtering on drops the same as the file picker, and actually wires up the disabled prop it always documented but never implemented. | 18 July 2026 | Adesh Singh |
| v2.53.3 | PATCH | Fix Dropdown/Tag missing exports and non-functional disabled state | Dropdown, DropdownItem, and Tag were never exported from the package entry point (import returned undefined). disabled on Link/Option (as="a") and DropdownItem only changed cursor styling — the row/link stayed fully clickable and, for Link, still navigated. Both are now fixed and verified live: exports resolve correctly, and disabled elements no longer fire onClick or navigate. | 18 July 2026 | Adesh Singh |
| v2.53.2 | PATCH | Fix Link as=button native button chrome | Link rendered as="button" showed native browser button styling (grey background, outset border, padding) because .link in components.css never reset those properties — only <a> usage was covered. Added background/border/margin/padding/appearance resets, scoped harmlessly for <a> since anchors have no such defaults to begin with. | 16 July 2026 | Adesh Singh |
| v2.53.1 | PATCH | Canary protocol for AI sessions | Add canary token to react/components-manifest.json and CLAUDE.md rule requiring it be stated at the start of every session before any design system work, to prevent hallucinated component/token references. | 19 June 2026 | Adesh Singh |
| v2.53.0 | MINOR | Responsive Phase 3 — HTML docs Responsive sections | Add Responsive section (with 390 px mobile demo frame) to Button, Table, Tabs, Pagination, and Breadcrumb component docs pages. Add .rsp-phone utility to components.css. | 15 June 2026 | Adesh Singh |
| v2.52.0 | MINOR | Responsive Phase 2 — Storybook viewports + Responsive stories | Add DigiLawyer breakpoints (390/744/1440) to Storybook viewport toolbar via preview.js. Add Responsive story to Button, Table, Tabs, Pagination, and Breadcrumb demonstrating mobile CSS utilities. | 15 June 2026 | Adesh Singh |
| v2.51.0 | MINOR | Responsive utilities | Add responsive CSS for Button, Table, Tabs, Pagination and Breadcrumb — mobile breakpoint (≤743 px) rules in components.css | 15 June 2026 | Adesh Singh |
| v2.50.0 | MINOR | Breadcrumb | Hierarchical location molecule: Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, BreadcrumbCurrent + chevron icons. Hover now shows underline (CSS fix for HTML + React). All 25 components complete. | 14 June 2026 | Adesh Singh |
| v2.49.0 | MINOR | Link | Inline text hyperlink atom: 3 colour variants × 4 sizes × 3 states, leading/trailing icon slots, underline + disabled props. | 14 June 2026 | Adesh Singh |
| v2.48.0 | MINOR | Progress Bar | Linear progress atom: ProgressBar with 7 colours × 2 sizes, determinate + indeterminate. Storybook: Playground, Default, Variants, Sizes, States, FullMatrix. | 14 June 2026 | Adesh Singh |
| v2.47.0 | MINOR | Snackbar | Toast notification molecule: Snackbar + SnackbarClose. 7 variants × 3 states (semi/filled/border). Storybook: Playground, Default, Variants, States, FullMatrix. | 14 June 2026 | Adesh Singh |
| v2.46.1 | PATCH | Table kebab alignment | Center the kebab action button in action-only columns — changed .table-cell-end from justify-content:flex-end to center. | 14 June 2026 | Adesh Singh |
| v2.46.0 | MINOR | Table | Data grid organism: TableWrap, Table, TableCell, TableCellAction + KebabIcon. Full Storybook coverage — Default (6×4 grid), Composition, States, FullMatrix. | 14 June 2026 | Adesh Singh |
| v2.45.0 | MINOR | Options — React component | Single selectable row with leading/trailing slots, 3 sizes, 3 states. OptionsMenu wrapper. Storybook: Playground, Default, Variants, Sizes, States, FullMatrix. | 14 June 2026 | Adesh Singh |
| v2.44.0 | MINOR | DatePicker — React component | Single and range date picker with day/month/year view navigation, controlled and uncontrolled modes, minDate/maxDate, and interactive Input trigger story. | 14 June 2026 | Adesh Singh |
| v2.43.0 | MINOR | UploadMedia — React component | Drop-target / file-list upload field with empty, 1-file, 2-file, and 3-file (limit) states. Controlled and uncontrolled modes, image preview, per-file remove, hover state, and Storybook stories. | 14 June 2026 | Adesh Singh |
| v2.42.0 | MINOR | Rating — React component | Star and heart rating component with half-step, read-only, disabled, three sizes, three colours, and Storybook stories. | 14 June 2026 | Adesh Singh |
| v2.41.0 | MINOR | Slider — React component | Slider and SliderRange components. Three track sizes (4/8/12px). Tooltip-on-hover and permanent-value-label display modes. Range variant with two thumbs and cross-constraint guard. Thumb position computed with the exact thumbPx formula from the HTML docs. | 14 June 2026 | Adesh Singh |
| v2.40.0 | MINOR | Pagination — React component | Pagination, PaginationPrev, PaginationNext, PaginationItem, and PaginationEllipsis components. Three sizes (lg/md/sm), interactive Default story with page state, EdgePages and FullMatrix stories. | 14 June 2026 | Adesh Singh |
| v2.39.0 | MINOR | Tabs — React component | Tabs, Tab, TabPanel components with lg/md/sm sizes, horizontal/vertical alignment, four states (default, hover, active, disabled), WAI-ARIA role=tablist/tab/tabpanel, and interactive Default story with panel switching. | 14 June 2026 | Adesh Singh |
| v2.38.0 | MINOR | Tooltip — React component | Tooltip pill with 3 sizes, 4 arrow positions, icon slots, and TooltipHost for CSS-only hover/focus show without JavaScript. | 14 June 2026 | Adesh Singh |
| v2.37.0 | MINOR | Alert — React component | Alert component with 7 semantic colours, 3 variants (Semi-filled, Filled, Border), dismiss button, and AlertBtnPrimary/Secondary action helpers. | 14 June 2026 | Adesh Singh |
| v2.36.0 | MINOR | Avatar — React component | Avatar component with Icon, Initials, and Image variants; 4 sizes; hover state; AvatarStack and AvatarStatus composition helpers. | 14 June 2026 | Adesh Singh |
| v2.35.0 | MINOR | Badge — React component | Badge component with Dot, Label, and Verify variants; 7 semantic colours; 3 sizes; BadgePin composition helper. | 14 June 2026 | Adesh Singh |
| v2.34.0 | MINOR | Tag — React component | Tag React component with 8 colors, 3 variants, 4 sizes, removable chips, and filter chip support. | 14 June 2026 | Adesh Singh |
| v2.33.0 | MINOR | Dropdown — React component | Dropdown and DropdownItem React components available in Storybook. Matches Figma panel chrome exactly. | 14 June 2026 | Adesh Singh |
| v2.32.1 | PATCH | React Storybook links on every component page + collaboration workflow (CONTRIBUTING.md, PR template, issue templates). | ds.js auto-injects "For React" section at bottom of all 25 component pages — live Storybook link for 7 components with React stories, "coming soon" note for the rest. Added Storybook Quick Link card on Overview. Added CONTRIBUTING.md, .github/pull_request_template.md, and three issue templates (bug, design feedback, token change). | 13 June 2026 | Adesh Singh |
| v2.31.7 | PATCH | Overview: empty 4th changelog card → "View full changelog" card-link. Sidebar: .qlink-card clicks now set pending-active flag so destination page nudges sidebar to show the active link. | Removed empty <div class="cl-card"> (4th grid slot). Replaced with .cl-card.cl-card-more styled as a card-link. In ds.js: added SIDEBAR_PENDING_ACTIVE_KEY; .qlink-card clicks set the flag; on load, if flag is set → clear it and call nudgeSidebarToActive() (deferred to window.load); otherwise fall back to sessionStorage restore. |
3 June 2026 | Adesh Singh |
| v2.31.6 | PATCH | Sidebar scroll persistence — 2 bugs fixed: RAF race condition lost the saved position on fast clicks; restore ran before CSS applied so scrollTop was silently ignored. | Bug 1 (RAF race): scroll listener debounced via RAF — if user clicked a link before next frame, RAF cancelled and latest scrollTop never saved. Fix: save synchronously. Bug 2 (restore too early): restoreSidebarScroll at DOMContentLoaded set scrollTop before height: calc(100vh - 56px) applied — sidebar not yet scrollable, value ignored. Fix: restore immediately (works from cache) AND at window.load (after CSS). Also added click handler on .sb-link to force-save before navigation. |
3 June 2026 | Adesh Singh |
| v2.31.5 | PATCH | Sidebar — sessionStorage scroll persistence. No auto-scroll ever. User owns the sidebar scroll position across all page navigations. | Removed all auto-scroll logic (scrollSidebarToActive, window.load deferral, visibility-check nudge). Added restoreSidebarScroll (reads ds-sidebar-scroll from sessionStorage after build) and initSidebarScrollPersistence (passive scroll listener, RAF-debounced, saves scrollTop on every user scroll). First visit: position 0. Private browsing / storage errors: silently ignored. Active link still highlighted by buildSidebar() — never moved. |
3 June 2026 | Adesh Singh |
| v2.31.4 | PATCH | Sidebar — eliminated scroll-to-center jump on navigation. Active link visibility check replaces centering formula. No scroll if link is already in view. | Old: scrollTop = offsetTop − clientHeight/2 + itemH/2 — always repositioned, causing a jarring snap. New: check if aTop < sTop (above view → nudge up) or aTop + aH > sTop + sH (below view → nudge down). If neither, link is already visible → no scroll. Works with the window.load deferral from v2.31.3. |
3 June 2026 | Adesh Singh |
| v2.31.3 | PATCH | Sidebar — fixed intermittent active-link scroll position. Deferred scrollSidebarToActive() to window.load so it measures layout only after CSS is applied. | Root cause: DOMContentLoaded fires before stylesheets paint. sidebar.clientHeight read as 0 (CSS not applied) → scrollTop = max(0, offsetTop - 0/2) → 0 → sidebar showed top of list → active link for pages low in the nav (Rating, Slider, Date Picker) was off-screen. Pages near the top (Colors, Button) appeared to work because they were visible at position 0. Fix: in init() check document.readyState === 'complete'; if not, register window.addEventListener('load', scrollSidebarToActive, { once: true }). Only ds.js changed. |
3 June 2026 | Adesh Singh |
| v2.31.2 | PATCH | Rating Interactive — Full Rating and Half Rating shown side by side. data-half="true" controls the mode. | Interactive section restructured into two labelled groups: Full Rating (integer-only, no data-half) and Half Rating (data-half="true", left 50% = .5). Each group has Stars·Yellow / Stars·Brand / Hearts·Red. JS refactored to use DOM traversal (closest('.rt-demo-pair')) instead of fragile idx mapping; useHalf flag controls hoverVal logic. New data-half API row added. |
2 June 2026 | Adesh Singh |
| v2.31.1 | PATCH | Rating Interactive — half-rating on hover. Left 50% = half preview, right 50% = full. Works on star-yellow, star-brand, heart-red. | Rewrote interactive JS. mousemove + mouseenter detect cursor position via getBoundingClientRect (safe vs child SVG offsetX skew). hoverVal returns i + 0.5 when cursor is left of midpoint, i + 1 when right. renderVal(val, preview) handles fractional values: items before index get fill, the half-index item gets half icon, rest get stroke. Value label shows "2.5 / 5 stars" format. |
2 June 2026 | Adesh Singh |
| v2.31.0 | MINOR | Rating — fully documented (Star + Heart, 3 colours, 3 sizes, 3 fill states, interactive). Last planned component — system complete. 4 new tokens. | Two shapes (Star + Heart) × 3 fill states (Filled / Half / Stroke) × 3 sizes (24/20/16px) × 3 colours (.rating-brand inverts dark / .rating-yellow #FFC107 / .rating-red #CD3232). SVG sprite pool (6 symbols). Half-icon via explicit polygon + full stroke overlay — no clipPath. data-interactive enables hover-preview + click-to-rate. --_rt private cascade drives colour; empty icons always use --rating-empty. 7 sections. 0 stubs remain — DigiLawyer DS is complete. |
2 June 2026 | Adesh Singh |
| v2.30.1 | PATCH | Slider — 5 bug fixes: thumb centering, hover/drag rings, 3 sizes, tooltip hidden by default, two count modes. | (1) Thumb: input height: 16px + margin-top: calc((--track-h - 16px) / 2). (2) Rings: 8px hover + 14px active box-shadow using 2 new tokens. (3) Sizes: --track-h var; .slider-md=8px, .slider-lg=12px. (4) Tooltip: opacity: 0 by default; shown on .has-tip:hover or .is-dragging (JS mousedown/up). (5) Two count modes: .has-tip = ephemeral pill; .has-val = permanent bottom label. |
1 June 2026 | Adesh Singh |
| v2.30.0 | MINOR | Slider — full documentation (single + range, live JS demo). 4 new tokens. Last Inputs stub completed. | New .slider-field + .slider + .slider-tip + .slider-val 1:1 from Figma light + dark nodes. 4px track, 16px thumb with page-bg halo. Tooltip inverts like Tooltip component. Range variant: two overlapping inputs, fill between thumbs via --pct-a / --pct-b. JS auto-init via data-slider / data-slider-range attributes. 4 new tokens: --slider-track-bg / --slider-fill / --slider-tip-bg / --slider-tip-text. Only Rating stub remains. |
1 June 2026 | Adesh Singh |
| v2.29.2 | PATCH | Alert — 3 dark-mode root-cause fixes: body text invisible in coloured semi-filled, brand semi/filled primary buttons invisible (white-on-white). | (1) --_body changed from var(--color-heading) to var(--_fg) — dark semi-filled bgs are LIGHT tints so `#FFFFFF` body text was invisible. Border variant overrides back to var(--color-heading). (2) Brand semi dark: --_b1fg now uses var(--alert-brand-filled-text) which flips `#FFF`→light / `#2D2D2D`→dark. (3) Brand filled dark: new .alert-brand.alert-filled rule swaps btn1 bg/fg using --alert-brand-filled-text and --alert-brand-filled-bg so contrast inverts correctly. |
1 June 2026 | Adesh Singh |
| v2.29.1 | PATCH | Alert header alignment fixed (centre-aligned, both icon slots 24px). Deleted notification + accordion + list-group + images files. Updated overview + NAV. | .alert-header changed to align-items: center; both icon slots fixed to flex: 0 0 24px; width/height: 24px. Deleted notification.html, accordion.html, list-group.html, images.html. Removed those 4 entries from NAV + SEARCH_DOCS. Overview component grid now shows Alert instead of Notification and drops the 3 deleted components. STATUS.md updated: 2 pending stubs remain (Slider, Rating); Removed Components section added. |
1 June 2026 | Adesh Singh |
| v2.29.0 | MINOR | Alert — fully documented (7 colours × 3 variants). Replaces "Notification" system-wide. 70 new --alert-* tokens. |
"Notification" renamed to "Alert" in NAV, SEARCH_DOCS, SEARCH_TOKENS, STATUS throughout. New .alert component 1:1 from Figma 140-6541 (light) + 5958-2561 (dark). Semi-filled (tinted bg) / Filled (solid bg, inverted buttons) / Border (page bg + hairline) × Brand / Info / Danger / Success / Warning / Notice / Alert(orange). CSS custom property cascade with --_accent holding the vivid colour for Filled primary button text. Brand inverts in dark filled (white bg + dark text). Full matrix 7 × 3 = 21 surfaces from JS. |
1 June 2026 | Adesh Singh |
| v2.28.1 | PATCH | Tooltip — fixed layout of Sizes + Positions sections; added interactive hover demo; added .tooltip-host CSS. |
Sizes: was a 4-col grid causing labels to share rows with different-size tooltips; now a 2-col grid (label | tooltip), one row per size. Positions: was a 4-col grid whose narrow columns clipped left-edge labels; now flex-column with one labelled block per position + a flex-row of 3 sizes. Added .tooltip-host to components.css — a position: relative wrapper that hides child tooltips at rest (opacity: 0) and fades them in on :hover/:focus-within without JS. New Interactive section demonstrates all 4 positions live. |
1 June 2026 | Adesh Singh |
| v2.28.0 | MINOR | Tooltip — full documentation (3 sizes × 4 positions). Inverts in dark mode. 1 new token: --tooltip-border. |
New .tooltip 1:1 from Figma 140-7707 (light) + 2289-4036 (dark). Dark pill in light mode, light pill in dark — always contrasts with the page. Sizes: Large 40px (Body 2) / Medium 32px (Caption 1) / Small 24px (Caption 2). Positions: top/bottom/right/left — class name indicates where tooltip appears; arrow points back toward trigger via ::before (border) + ::after (fill) triangle pair. .tooltip-icon slot scales 16/14/12 px. 1 new --tooltip-border token (rgba white-10% light / black-10% dark); other 2 tokens already existed. |
1 June 2026 | Adesh Singh |
| v2.27.2 | PATCH | Avatar — badge pinning rewritten with CSS custom properties: truly auto-adjusts at every avatar and badge size. Added overflow: visible to the stack. |
Defines --_av-r (avatar radius) on .avatar-stack and derives --_av-pin: calc(50% - var(--_av-r) * 0.7071) — mathematically exact 45° circle-edge offset. Override --_av-r per size class (-lg/-sm/-xs) and CSS cascades the pin automatically. transform: translate(50%, ±50%) centres the badge on that edge so any badge size auto-extends outward. overflow: visible prevents stacks inside overflow: hidden parents from clipping badges. |
1 June 2026 | Adesh Singh |
| v2.27.1 | PATCH | Avatar — Sizes grid transposed (rows = sizes, columns = variants per Figma); .avatar-pin-br status dot now centred on the circle's bottom-right edge at every size. |
(1) Sizes grid had variants as rows + an awkward 4th "X-small" row. Rewrote to a header row of variants (Icon / Initials / Image) × four size rows (Large 48 → X-small 24), matching Figma's axis. (2) .avatar-pin-br pinned the dot's corner (bottom/right: 7%), drifting inward and shifting per dot size. Switched to a size-independent centre-anchor — left: 83%; top: 83%; transform: translate(-50%,-50%) — placing the dot's centre on the circle's 45° bottom-right edge. Count pin (top-right) unchanged. |
1 June 2026 | Adesh Singh |
| v2.27.0 | MINOR | Avatar — full documentation: Icon / Initials / Image × 4 sizes + Badge composition (count top-right, status dot bottom-right). 2 new tokens. | New .avatar + .avatar-stack + .avatar-status 1:1 from Figma 125-2432 (light) + 5914-6626 (dark). Blue #3156DF disc, white content, 1px black-10% hairline — identical both modes per Figma. xs 24 / sm 32 / md 40 / lg 48; initials font 10/12/16/20 px. Hover keeps bg + adds a 10% black scrim. .avatar-pin-tr pins a Badge count, .avatar-pin-br pins a status dot (online/busy/away/offline) with a page-bg ring. Added --avatar-border + --avatar-overlay-hover; corrected legacy --avatar-bg-hover to match Figma's hover==default. |
1 June 2026 | Adesh Singh |
| v2.26.2 | PATCH | Doc-page demo layouts collapsed inline on Link / Pagination / Breadcrumb / Table — page-local grid/column helpers lost a specificity tie to .demo-panel.active. |
The Variants / Sizes / Separators / States demo sections use <div class="demo-panel active {prefix}-grid">. .demo-panel.active (0,2,0) sets display: flex + center; the single-class helpers .ln-grid / .pg-grid / .bc-grid / .tbl-row (0,1,0) lost, so display: grid / flex-direction: column were overridden and every label + example flowed inline. Same bug fixed for Progress Bar in v2.22.1. Rescoped each under .demo-panel.{prefix}-grid / -row to tie specificity + win on source order; added justify-items / justify-content: start for left-alignment. Older horizontal flex-wrap helpers (badge, dropdown, etc.) unaffected. |
1 June 2026 | Adesh Singh |
| v2.26.1 | PATCH | Alignment fixes — Link / Breadcrumb / Pagination. Three independent inline-flex × icon-vs-text issues. | (1) Pagination — restored gap in .pagination .btn cascade; .btn base sets gap: 0 so the chevron stuck flush against Previous / Next label. (2) Link — added vertical-align: middle so the inline-flex link baseline-aligns with surrounding running text; display: block on .link-icon svg kills the inline-image baseline gap. (3) Breadcrumb separator — explicit height: 1em + line-height: 1, with width / height: 1em + display: block on inner SVG. The slash and chevron separator variants now occupy the same em-box and center identically; .breadcrumb-sm no longer needs a separator-size override since SVG auto-scales with font-size. |
1 June 2026 | Adesh Singh |
| v2.26.0 | MINOR | Breadcrumb — full documentation. Zero new tokens — composes with foundation tokens (--color-subheading + --color-heading). |
New .breadcrumb + .breadcrumb-item + .breadcrumb-separator + .breadcrumb-current 1:1 from Figma 141-9432 (light) + 5942-1172 (dark). Trail items = Body 1 Medium in --color-subheading; current page = Body 1 Semi Bold in --color-heading. Separator slot is consumer-supplied (thin chev / slash / thick chev all demoed) — inherits currentColor. .breadcrumb-sm drops to Body 2 (14/20). No own tokens; foundation refreshes propagate automatically. Composition pairs breadcrumb-above-H1 + folder-paths inside Table cells. |
1 June 2026 | Adesh Singh |
| v2.25.0 | MINOR | Pagination — full documentation. Zero new tokens — composes entirely with Button (active = .btn-primary, inactive + Prev/Next = .btn-ghost). | New .pagination wrapper + .pagination-ellipsis + .btn-square 1:1 from Figma 141-8644 (light) + 5941-919 (dark). Three densities lg 40 / md 36 / sm 32 px drive Body 1 / Body 2 / Caption 1 Semi Bold via cascade — the size lives on the wrapper, not per-button. Chevron icons step 16 / 14 / 12 px. .btn-square clamps min-width = row-height for uniform page cells. Full matrix renders 3 sizes × 4 page-position states (page 1 / mid-range / second-to-last / last) via inline JS. |
1 June 2026 | Adesh Singh |
| v2.24.0 | MINOR | Link — full documentation: 3 variants × 4 sizes × 3 states + .link-icon slot. Added missing --link-brand-hover token. |
New .link component 1:1 from Figma 140-7864 (light) + 5940-2868 (dark). Default / Brand / Blue variants × Body 1 / 3 / Caption 1 / 2 sizes × Default / Hover / Disabled. Underline on hover; .link-underline pins at rest. .link-icon auto-scales 16 / 14 / 12 / 10 px. 6 existing --link-* tokens were already in parity; added --link-brand-hover (same tan in light, #BAB28A in dark). Full matrix renders 36 cells from inline JS. |
1 June 2026 | Adesh Singh |
| v2.23.0 | MINOR | Table — full documentation: .table + .table-wrap + .table-cell + .table-cell-action. 6 new tokens. Utility classes .table-cell-end + .td-num. Page passed through /simplify cleanup. |
New .table 1:1 from Figma 140-5139 (light) + 5892-39544 (dark). Real HTML <table>, border-collapse: collapse, 5%-alpha hairline borders. .table-wrap clips outer corners to 8 px. Header strip #F6F6F6 / #2D2D2D; body transparent. .table-cell flex wrapper inside <td> for label + kebab action; .table-cell-action = 24×24 ghost icon button. Two utility classes shipped from the /simplify pass. 6 --table-* tokens × 2 modes. Cleanup pass landed 8 fixes: restored broken comment opener, trimmed verbose comments, dropped dead rules + no-op overrides, swept inline styles to utility classes, replaced IIFE table generator with literal HTML. |
1 June 2026 | Adesh Singh |
| v2.22.10 | PATCH | Tabs now compose with the canonical Badge component — legacy .tab-badge alias retired |
v2.22.3–v2.22.6 rewrote Badge (3 Label sizes, scalloped Verify, Caption 2 typography, Brand-dark inversion) but Tabs still used the local .tab-badge alias. Bulk-replaced 31 markup instances with <span class="badge badge-label badge-info">…</span>. Dropped the 26-line .tab-badge CSS block. Added a cascade rule: .tab.tab-sm > .badge.badge-label:not(.badge-sm):not(.badge-lg) auto-applies sm sizing, same for .tab-lg → lg. Explicit badge-size mods still win. Tabs are now a true consumer of Badge. |
1 June 2026 | Adesh Singh |
| v2.22.9 | PATCH | Tabs — icons now scale per size (horizontal 20 / 16 / 14 · vertical 24 / 20 / 16). Alignment demo restructured: one size per .tabs row so small tabs aren't stretched by align-items: stretch |
Icons were hardcoded 16×16 regardless of tab size. Added size-specific .tab-lg/.tab-sm/.tab-vertical rules. Alignment demo had three sizes in one .tabs row → small tab stretched to large vertical's height (64 px) → looked broken. Rewrote as a 3 × 2 grid (sizes × alignments), each cell its own .tabs row, with pixel-size labels in the left column. |
1 June 2026 | Adesh Singh |
| v2.22.8 | PATCH | Tabs — added Vertical alignment variant (.tab-vertical) per refreshed Figma node 5934-1968. New .tab-label-row child + Alignment section. |
Figma's refreshed dark frame exposes Alignment = Horizontal | Vertical on every tab. Pulled get_metadata: vertical heights are 64 / 52 / 48 px (vs horizontal 48 / 40 / 32). Added .tab-vertical modifier — column flex direction, new heights, 4 px gap. .tab-label-row wraps label + badge so they stay together under the icon. Active-state underline still anchors at the bottom of either layout. New Alignment section on tabs.html + API rows + search anchor. Source-node citation refreshed (dark 5914-6861 → 5934-1968). |
1 June 2026 | Adesh Singh |
| v2.22.7 | PATCH | Tabs — re-audited against refreshed Figma nodes (3817-106 light, 5914-6861 dark). All 24 state/colour tokens match 1:1. Fixed .tab-badge to use Info (blue) tokens + Caption 2 typography + size-scale per tab. |
Tab tokens (4 states × 3 fields × 2 modes = 24 values) confirmed already in parity — no token changes. Real mismatch was on .tab-badge: was using Brand (dark grey) but Figma shows Badge_Label Blue (Info, #2843CD). Typography was 6 px font on 12 px pill vs Figma's Caption 2 Semi Bold (10 / 12). Refactored to compose with --badge-info-* tokens. Added size-scaling: .tab-sm .tab-badge → 12 / 8 px, default md → 16 / 10 px, .tab-lg .tab-badge → 20 / 12 px. Source-node citations refreshed (dark 5887-4266 → 5914-6861). |
1 June 2026 | Adesh Singh |
| v2.22.6 | PATCH | Badge Verify — rebuilt as the scalloped verified-account glyph (12 bumps + central disc + white check) per Figma. Was rendering as a plain circle with a check. | Pulled the 12 px render from Figma node 123-2263 — Verify is the Twitter-style scalloped badge, not a plain circle. SVG symbol rewritten: 13 circles (1 central r=5 + 12 r=1 bumps at every 30°) form the serrated outline; check path on top. .badge.badge-verify container is now transparent — SVG owns the visual. Two CSS custom properties drive colours: --vs (shape fill) + --vc (check stroke) per variant. Brand-dark inverts correctly. |
1 June 2026 | Adesh Singh |
| v2.22.5 | PATCH | Badge — sidebar regression: unterminated HTML comment in badge.html was swallowing the <nav id="sidebar-mount"> mount point |
v2.22.4's verify-fix added a note above the #ico-badge-check symbol opened with <!-- but mistakenly closed with C-style */. Parser kept consuming the document looking for -->, ate the sidebar mount, so ds.js couldn't inject the sidebar nav. Replaced */ with -->; comment balance now 10 / 10. |
1 June 2026 | Adesh Singh |
| v2.22.4 | PATCH | Badge Verify variant — check was white-on-white invisible. Removed redundant inner disc from the SVG symbol. | #ico-badge-check drew <circle fill="currentColor"/> (= white = badge text token) on top of the badge's coloured background, then a hard-coded stroke="#FFFFFF" check on top of THAT white disc. Net effect: invisible white-on-white check inside the coloured halo border — the verify badge looked blank. Symbol now ships as a single currentColor-stroked check path. Stroke width 1.2 → 1.6 for legibility at small sizes. |
1 June 2026 | Adesh Singh |
| v2.22.3 | PATCH | Badge Label sizes — added missing 12 / 16 / 20 px pill heights per Figma. Previous implementation only had Label at 12 px (one height); Figma spec is three. | Audited Figma metadata: Badge has 2 size axes. Dot/Verify (square: 4 / 8 / 12) was correct. Label (pill height: 12 / 16 / 20) was not. Added .badge.badge-label.badge-sm (12 tall, 8 px font) + .badge.badge-label.badge-lg (20 tall, 12 px font); default md is now 16 tall + 10 px Caption 2 Semi Bold. Specificity (0,3,0) lets Label size mods beat the Dot/Verify .badge-sm / .badge-lg (0,1,0). Sizes section now shows 3 × 4 label grid. API table updated. |
1 June 2026 | Adesh Singh |
| v2.22.2 | PATCH | Badge — re-audited against refreshed Figma nodes (123-2217/123-2267 light, 5926-1828/5926-1773 dark). All 42 token values already match 1:1; source-node citations updated | Design team renamed/refreshed the dark Badge frames (old 5897-1277/5897-1222 → new 5926-1828/5926-1773). Pulled fresh variable defs and diffed all 7 colours × 3 fields × 2 modes — zero drift. Brand inversion, chromatic palette, and halo border (#FFFFFF light / #1C1C1C dark) all confirmed unchanged. Updated source-node comments in tokens.css and the "Mirrors Figma node…" line in badge.html. No CSS / visual change. |
1 June 2026 | Adesh Singh |
| v2.22.1 | PATCH | Progress Bar — fix Variants/States/Sizes grid (was flowing inline) + rebuild Interactive with radio-style active states + inline % readout | .pb-grid / .pb-row were specificity 0,1,0 and lost to .demo-panel.active (0,2,0) which set display: flex — label/bar pairs flowed inline. Rescoped under .demo-panel for spec tie. Interactive: bar + % moved to one flex row (% is now inline-right of the bar). Three control rows form a 2-col grid (label left, options right). Colour + Size are radio groups (single active = .btn-primary); Ramp + Indeterminate are mutually-exclusive toggles. |
1 June 2026 | Adesh Singh |
| v2.22.0 | MINOR | Progress Bar — full documentation: 7 colours × 2 sizes (8 / 12 px) + indeterminate, live interactive demo, 42 new tokens | New .progress component 1:1 from Figma 3007-14257 (light) + 5917-1593 (dark). Replaces legacy 4-token block with 21 tokens × 2 modes — track at ~20% alpha of progress colour (Brand is neutral). Sizes .progress-sm 8 px / .progress-md 12 px. .progress-indeterminate runs a 1.4 s sweep. Live demo: ramp button drives a real %; colour + size buttons swap modifier classes. Full matrix 7 × 5 grid at both sizes. |
1 June 2026 | Adesh Singh |
| v2.21.4 | PATCH | Date Picker Interactive demo — title-button view-switch + prev/next nav arrows now work (were closing the panel mid-render) | Panel click delegate calls render() which replaces panel.innerHTML, detaching e.target. The document-level outside-click handler then sees !field.contains(detachedNode) as true and immediately closes the panel. Fix: e.stopPropagation() at the top of the panel handler so in-panel clicks never reach the outside-click guard. |
1 June 2026 | Adesh Singh |
| v2.21.3 | PATCH | Date Picker Interactive demo — input pinned to top of canvas + Month→Year title click re-anchors range | .dp-interactive-panel now forces align-items / justify-content: flex-start so the Text Input sits at the top of the 620px canvas (was centered, calendar overflowed). View-switch handler recomputes yearRangeStart on Month→Year hop so it always lands on the range containing the current view year. |
1 June 2026 | Adesh Singh |
| v2.21.2 | PATCH | Date Picker Interactive demo — min-height 500 → 620 so open calendar fits inside canvas | v2.21.1's 500px was tight. Input-field ~100px + calendar ~360px + demo padding ~56px ≈ 530px so the calendar overflowed the bottom border. Bumped to 620px with breathing room. | 31 May 2026 | Adesh Singh |
| v2.21.1 | PATCH | Date Picker Interactive demo — unclip + extend canvas so calendar is visible | Calendar was clipped by .demo-box's overflow:hidden and the 100px .demo-panel min-height. Added 2 page-local helpers (.dp-interactive-box → overflow:visible; .dp-interactive-panel → min-height 500px) so the open calendar has room. | 31 May 2026 | Adesh Singh |
| v2.21.0 | MINOR | Date Picker — full documentation (4 variants + 5 states), live demo composes Text Input | New .datepicker component 1:1 from Figma 105-1786 / 105-2329 / 105-2431 (light) + 5913-1594 / 5913-1609 / 5913-1616 (dark). Single / Range / Month / Year variants. 5 cell states (Default / Hover / Active / In-range / Disabled), Active inverts. 10 --datepicker-* tokens × 2 modes. Live demo wires Text Input → calendar panel with month nav, view-switching, outside-click dismiss. | 31 May 2026 | Adesh Singh |
| v2.20.0 | MINOR | Badge — full documentation (3 variants × 3 sizes × 7 colours), Tabs `.tab-badge` refactored to use Badge tokens | New .badge component 1:1 from Figma 123-2217 / 123-2267 / 5897-1277 / 5897-1222. 3 variants (Dot / Label / Verify) × 3 sizes (sm 4 / md 8 / lg 12) × 7 colours. Brand inverts in dark. 1px halo border (white light / page-bg dark) separates badge from any host surface. .badge-pin helper anchors at top:-4/right:-4. 21 new --badge-* tokens × 2 modes = 42 total. Tabs refactored: .tab-badge is now an alias that reads --badge-brand-* tokens. | 31 May 2026 | Adesh Singh |
| v2.19.5 | PATCH | Snackbar Positions section — triggers fire Info Filled (was Brand Semi), buttons preview the style | Position triggers switched from Brand Semi to Info Filled. Buttons themselves restyle inline via --snackbar-info-deep / -filled-text lookup — same pattern as Variants triggers. MutationObserver on data-theme keeps previews accurate across the theme toggle. | 31 May 2026 | Adesh Singh |
| v2.19.4 | PATCH | Snackbar — adds box-shadow var(--shadow-3) to base rule | Single-line addition on .snackbar. Picks up per-theme shadow automatically — light: 4/16/4 rgba(0,0,0,0.06); dark: 4/16/4 rgba(0,0,0,0.30) (from v2.17.0). Every snackbar across all 7 page sections now reads as a floating notification. | 31 May 2026 | Adesh Singh |
| v2.19.3 | PATCH | Snackbar dark Semi bgs — rgba transparent tints → solid dark colours (matches light-mode pattern) | 6 dark Semi bgs (Info / Danger / Success / Warning / Notice / Alert) were rgba(X, 0.20) — composited differently depending on what surface they sat over. Light mode has always used solid pale colours; dark mode now matches with solid dark equivalents (Info #212B4D, Danger #4A2929, Success #224429, Warning #4A4119, Notice #382E4F, Alert #4D341A). Surface-independent. Border tokens unchanged (borders benefit from transparency). Filled unchanged. | 31 May 2026 | Adesh Singh |
| v2.19.2 | PATCH | Snackbar dark mode — Brand Filled readable, Brand Semi no longer merges, other Semi alphas 15% → 20% | Hardcoded filled text was #FFFFFF — broke Brand in dark (deep=white). Added --snackbar-{v}-filled-text token (Brand dark = #2D2D2D, others white). Snackbar text + inverted action button bg/border now read the token. Brand dark semi-bg #2D2D2D → #3D3D3D (was colliding with --color-bg-2). Other semi rgba alphas 0.15 → 0.20 for visibility on dark page. | 31 May 2026 | Adesh Singh |
| v2.19.1 | PATCH | Snackbar Interactive — segmented State toggle + variant triggers preview snackbar style | State toggle markup used non-existent .btn-pos-l/m/r → switched to canonical .btn-pos-left/middle/right + .btn-group-active-border wrapper + .active/aria-pressed (matches Button Group). Variant triggers now restyle live to preview the snackbar's deep/semi-bg/border-border tokens for the currently-selected state — flip Semi → Filled → Border and all 7 buttons re-skin. MutationObserver on data-theme keeps previews accurate across the theme toggle. | 31 May 2026 | Adesh Singh |
| v2.19.0 | MINOR | Snackbar — full documentation (7 variants × 3 states) + MUI-style interactive demo | New .snackbar component 1:1 from Figma 161-5424. 7 colour variants × 3 states (Semi-filled / Filled / Border) = 21 surfaces. 21 --snackbar-* tokens per mode (42 total). Filled action button inverts via descendant rule. Interactive section: 7 variant triggers + 3-state toggle fire real toasts at top-right with auto-dismiss + close. Positions section: 6 viewport anchors with stacking regions. 21-cell matrix. Dark mode flagged for Figma verification. | 31 May 2026 | Adesh Singh |
| v2.18.0 | MINOR | Tabs — full documentation (3 sizes × 4 states), light + dark Figma-verified | New .tab component 1:1 from Figma 3817-106 (light) + 5887-4266 (dark). 3 sizes (lg 48 / md 40 / sm 32) × 4 states (Default / Hover / Active / Disabled). Active swaps bottom border to solid. Optional leading .tab-icon + trailing .tab-badge inline pill. 7 new --tab-* tokens added (5 existed). Default-section demo is live-interactive (aria-selected + tabpanel swap). 12-cell matrix mirrors Figma. | 31 May 2026 | Adesh Singh |
| v2.17.2 | PATCH | Yellow primitives refreshed (12 stops) — amber/tan/brown ramp replaces butter/gold | From Color Primitives ZIP. 12 primitive --primitive-yellow-* updated + 8 cascaded component refs (--color-warning-text, --input-warning-caption, --tag-yellow-filled-bg, --tag-yellow-outline-text across light + dark) + 12 inline swatches on colors.html. Opacity base #DFCF13 unchanged, so --color-warning-bg, --tag-yellow-outline-bg, --tag-yellow-outline-border untouched. tokens.json regenerated. | 31 May 2026 | Adesh Singh |
| v2.17.1 | PATCH | Tag dark-mode tokens match Figma 5856:4255 — closes v2.17.0 Known Issue | Full rewrite of dark Tag block. Outline (24 surfaces): 6 colours had wrong bg shade + wrong alpha 20%→10%; Blue + Yellow had wrong border + text ramps; Grey border #E7E7E7→#6D6D6D; Black border white-alpha→black-alpha. Two new Filled overrides: Yellow #FFD400→#FFD91B, Orange #DF7417→#ED8A19 (more saturated/lighter for visibility on dark). Light unchanged. Dark-mode audit complete. | 31 May 2026 | Adesh Singh |
| v2.17.0 | MINOR | Dark-mode parity audit (9 components) + black drop shadows + new --upload-* tokens | Batched audit against 9 Figma dark nodes. Most components already correct. 3 deltas: (1) Checkbox + Radio dark hover/disabled steps corrected per Figma — bg-hover #3D3D3D→#2D2D2D, checked-hover #E7E7E7→#D1D1D1, checked-disabled #6D6D6D→#454545. (2) New --upload-bg + --upload-bg-hover (Upload diverges from Input in dark: #2D2D2D / #3D3D3D vs Input #3D3D3D / #3D3D3D). (3) Dark shadows: rgba(255,255,255,X) white glow → rgba(0,0,0,X) deep black with elevated alpha — industry-standard dark drop shadow. Toggle thumb shadow flips too. | 31 May 2026 | Adesh Singh |
| v2.16.5 | PATCH | Options dark-mode tokens match Figma (5837:3332). Dropdown inherits. | Dark --options-bg #2D2D2D → #1C1C1C (matches dropdown panel — rows blend until hover). Dark --options-bg-hover rgba overlay → solid #2D2D2D (lifts on hover, opposite of light's dim-on-hover). Dark --options-text-disabled #B0B0B0 → #888888 (Neutral/400). Light unchanged. | 31 May 2026 | Adesh Singh |
| v2.16.4 | PATCH | Options Medium: icon 24 → 16, font Body 1 → Body 2 (Figma 98:17811). Propagates to Dropdown. | Re-verified all 3 sizes against the canonical Options + Dropdown Figma node. Medium had wrong icon size and wrong typography; Large + Small already correct. Restructured CSS so base = Medium and .options-lg bumps icons + font back up. Default bg already #FFFFFF. Docs Sizes desc + API rows updated. | 31 May 2026 | Adesh Singh |
| v2.16.3 | PATCH | Options Small — padding + typography now match Figma 1:1 | .options-sm had 3 bugs vs Figma node 3420:2915: padding-x 8 → 12px, font-size 14 → 12px, line-height 20 → 16px. Now Caption 1 (12/16) with shared 12px horizontal padding across all sizes. Docs Sizes desc and API row updated. | 31 May 2026 | Adesh Singh |
| v2.16.2 | PATCH | Upload Media — hero glyph swapped from gallery-add to a classic upload arrow-into-tray | Sprite symbol id renamed ico-gallery-add → ico-upload. New 2-stroke design: up arrow stem + chevron head landing into an open tray, matching the Lucide / Feather / Heroicons upload convention. All 8 references updated (7 inline + 1 in page script). Prose mention shifted to "upload-arrow icon". | 31 May 2026 | Adesh Singh |
| v2.16.1 | PATCH | Upload Media — Default demo opens real file picker, renders pills with thumbnail previews, × removes | Opt-in via data-upload-interactive on .upload. Inline page script wires Choose-file to native <input type=file>, reads images with FileReader for live thumbnails, × deletes per file. 5MB / 3-file limit enforced — Choose button hides at limit. Two new attrs documented: data-upload-max, data-upload-accept. | 31 May 2026 | Adesh Singh |
| v2.16.0 | MINOR | Upload Media — full documentation (4 variants × 2 states) | New .upload component 1:1 from Base-AI Figma (node 3348-6794). Empty / 1 / 2 / 3 (limit) file states × Default + Hover. Empty state stacks hero icon + heading + subheading + Choose-file button. File-list state shows .upload-file pills. Zero new tokens — reuses --input-* from Text Input. Choose-file button composes with existing .btn.btn-primary.btn-sm. | 31 May 2026 | Adesh Singh |
| v2.15.3 | PATCH | Text Area — per-size typography, icon, and padding now match Figma 1:1 | v2.15.0 had all 3 sizes sharing Body 2 / 16px icon. Figma differs them on those exact axes: Large = Body 1 + 24px icon + 12px padding; Medium = Body 2 + 16px icon + 8/12 padding; Small = Caption 1 + 16px icon + 8/12 padding. Container height stays 120px across all three — size axis is typography density, not height. Docs page (intro, Sizes desc, matrix headers, API rows) updated to match. | 31 May 2026 | Adesh Singh |
| v2.15.2 | PATCH | Text Area — fix broken resize + anchor handle to shell bottom-right (Figma parity) | Shell switched from fixed height + flex layout to min-height + position:relative. Textarea now spans full width with padding-right for the trailing icon, which moved to absolute top-right. Native browser resize handle now lands at the shell's actual bottom-right corner. | 31 May 2026 | Adesh Singh |
| v2.15.1 | PATCH | Text Input — typed text weight medium → regular | .input > input font-weight: --fw-medium (500) → --fw-regular (400) per design revision. Label, caption, OTP, and Text Area weights unchanged. | 31 May 2026 | Adesh Singh |
| v2.15.0 | MINOR | Text Area — full documentation, shares wrapper + tokens with Text Input | New .textarea component 1:1 from Base-AI Figma (node 101-18519). 3 sizes × 8 states = 24 cells. Reuses .input-field wrapper, label, caption, state modifiers, and the entire --input-* token group from Text Input. Only the shell is new — top-aligned, native <textarea> with resize: vertical, 16×16 trailing icon. Hover / Focus / Filled native CSS. Zero new tokens. | 31 May 2026 | Adesh Singh |
| v2.14.0 | MINOR | Text Input — full documentation (3 sizes × 8 states × 3 variants) | New .input component 1:1 from Base-AI Figma (node 2260-4637). 72 combinations. Shell handles Hover / Focus / Filled via native :hover, :focus-within, :has(). State modifiers only colour the caption. Tags variant composes our .tag chip. OTP variant is N single-character cells. 6-section docs with 3×8 = 24-cell matrix. | 29 May 2026 | Adesh Singh |
| v2.13.0 | MINOR | Dropdown — full documentation, Figma-exact panel chrome | New .dropdown component 1:1 from Base-AI Figma (node 144-1623). Panel wraps .options rows. 3 Figma-exact fixes to chrome: radius 4 → 8px, shadow -5 → -3 (subtler), 8px gap between rows. CSS aliases .options-menu so existing Options demos inherit the fix. 4-section docs (Default / Sizes / Composition / API). | 29 May 2026 | Adesh Singh |
| v2.12.0 | MINOR | Options — sizes (lg/md/sm), Tag composition, Figma-exact tokens | 3 sizes via .options-lg / default / .options-sm (48/40/32 px) with explicit heights and box-sizing border-box. Trailing slot now composes our real .tag (replaced the ad-hoc .opt-tag helper). Hover bg corrected to rgba(0,0,0,0.05) overlay; disabled text #5D5D5D → #6D6D6D. Fixed --radius-xxs typo (sharp corners). Full matrix is now 3 sizes × 3 states per Figma node 3420-2878. | 29 May 2026 | Adesh Singh |
| v2.11.5 | PATCH | Tag — Black Filled chip visible in dark mode | Dark theme inherited light's #2D2D2D filled-bg, identical to --color-bg-2 → invisible chip. Inverted to white bg + dark text in dark mode. "Black" remains the max-contrast neutral in both themes. | 29 May 2026 | Adesh Singh |
| v2.11.4 | PATCH | Tag — fixed 5 broken token names (padding, font, weight, radius) | Root cause of every "size still wrong" report. CSS used --space-xs/--space-xxs/--font-family/--font-weight-semibold/--radius-xxs — none exist. Fixed to --spacing-xs/--spacing-xxs/--font-primary/--fw-semibold/--radius-xs. Tag now renders with the correct padding, Inter Semi Bold, and 4px rounded corners. | 29 May 2026 | Adesh Singh |
| v2.11.3 | PATCH | Tag — matrix + demos now show canonical [icon] Label [icon] pattern | Figma reference always shows leading + trailing icon slots — my matrix rendered bare "Label". Added ico-tag-ph placeholder square and wrapped every Full matrix cell + Variants/Sizes demos with icon slots. CSS unchanged — pure docs fidelity fix. | 29 May 2026 | Adesh Singh |
| v2.11.2 | PATCH | Tag — pixel-exact heights + Filled border transparent (Figma 1:1) | Sizes now use box-sizing:border-box + explicit height (lg=32 / md=28 / sm=24 / xs=20) to match Figma symbol names 1:1. Filled border drops to transparent per Figma spec. | 29 May 2026 | Adesh Singh |
| v2.11.1 | PATCH | Tag — Figma fidelity fixes (Outline text, 4th size, color corrections) | Outline + Semi text now uses the darker filled-bg shade (matches Figma 1:1, better contrast). Yellow/grey/black outline values corrected. Added missing .tag-lg — Figma has 4 sizes (lg/md/sm/xs), not 3. sm now Caption 1 (12/16), xs now Caption 2 (10/12). Icon sizes 16/14/12/10 px. Dark mode mirrors corrected light relationship. | 29 May 2026 | Adesh Singh |
| v2.11.0 | MINOR | Tag component — full documentation | New .tag component 1:1 from Base-AI Figma. 8 colors × 3 variants (Filled/Outline/Semi) × 3 sizes (md/sm/xs). Optional leading/trailing icon slots. 40 --tag-* tokens light + 24 dark overrides for outline/semi treatments. 7-section docs with 8×3 = 24-cell matrix. | 29 May 2026 | Adesh Singh |
| v2.10.0 | MINOR | Options component — full documentation | New .options component 1:1 from Base-AI Figma. Single selectable row (button role=option) with leading/label/trailing slots. Lives inside .options-menu panel with shadow + radius. 14 new --options-* tokens (light + dark). 5-section docs with 3×3 matrix. | 27 May 2026 | Adesh Singh |
| v2.9.6 | PATCH | Sidebar auto-scrolls to active link on page load | Before, every page opened with the sidebar at scrollTop:0 — active links on pages below the fold (Tabs, Breadcrumb, etc.) were invisible until users manually scrolled the sidebar. Added scrollSidebarToActive() in ds.js, runs once in init(), centres the active link in the sidebar's scroll viewport, never touches window/document. | 26 May 2026 | Adesh Singh |
| v2.9.5 | PATCH | Homepage Latest Changes trimmed to 3 most recent + rule codified | Removed 5 oldest cards (v2.6.0 → v2.2.0) from the index.html Latest Changes grid. Only the 3 most recent stay on the homepage; full history lives in CHANGELOG.md and changelog.html. CLAUDE.md versioning rule now explicitly says "exactly 3 cards always". | 26 May 2026 | Adesh Singh |
| v2.9.4 | PATCH | Remove orphan legacy Checkbox tokens | Deleted the legacy /* Checkbox */ block (--checkbox-unchecked-border, --checkbox-checked-icon, --checkbox-disabled-bg + duplicate --checkbox-checked-bg) from both :root and [data-theme="dark"]. Zero CSS/JS/HTML references — verified by repo-wide grep. Canonical --checkbox-* tokens unchanged. Forward-looking --link-*/--avatar-*/--tooltip-* etc. placeholders kept. | 26 May 2026 | Adesh Singh |
| v2.9.3 | PATCH | Toggle dark-mode tokens corrected to match Figma source | 5 wrong values + 1 structural gap. Thumb colour is state-dependent in dark mode (white when off/disabled, dark when on) — added --toggle-thumb-on token + CSS rule. Fixed --toggle-bg-disabled (#454545→#6D6D6D), --toggle-checked-bg-hover (#E7E7E7→#FAFAFA), and --toggle-thumb-shadow to use white alpha per Figma. | 26 May 2026 | Adesh Singh |
| v2.9.2 | PATCH | Toggle thumb visually centred — shadow was creating perceived low offset | v2.9.1 fixed the geometric centring but the thumb still read as low because --toggle-thumb-shadow used --shadow-5 (card-level — 4px Y-offset, 16px blur on a 16-20px circle). Replaced with a tight component-appropriate shadow (0 1px 3px rgba). Thumb now reads centred at every size. | 26 May 2026 | Adesh Singh |
| v2.9.1 | PATCH | Fix Toggle thumb vertical misalignment | v2.9.0 toggle track had a 1px border that offset the thumb's absolute-positioned top by 1px (asymmetric centering — 3px above, 1px below). Since every Figma state had the border either transparent or same-as-bg, removing the border was both correct and simpler. Thumb now perfectly centered at every size. | 26 May 2026 | Adesh Singh |
| v2.9.0 | MINOR | Toggle Switch component — full documentation, three sizes | New .toggle component 1:1 from Base-AI Figma. Hidden native checkbox + .toggle-track pill + .toggle-thumb knob that slides via CSS. Three sizes (sm/md/lg) via custom properties. First real use of new-component.js scaffold. 14 new --toggle-* tokens reusing --shadow-5 for thumb drop-shadow. 6 sections, matrix is 3×3×2 = 18 cells matching Figma. | 26 May 2026 | Adesh Singh |
| v2.8.0 | MINOR | Scaffold tooling — build-tokens.js + new-component.js | Two new scripts in docs/scripts/. build-tokens.js parses tokens.css → emits tokens.json (323 light + 323 dark, var() refs resolved). new-component.js scaffolds a component page from the foundation starter and prints paste-blocks for the manual ds.js / tokens.css / components.css edits. Cuts next-component setup from ~30 min to ~10 min. | 25 May 2026 | Adesh Singh |
| v2.7.3 | PATCH | Repo restructured — docs site moved into docs/ alongside react/ and new storybook/ | Seven HTML-site folders moved into top-level docs/. New sibling storybook/ placeholder. Internal links unchanged (pages use page-relative paths). migrate-stubs.js still resolves correctly. Root README rewritten as monorepo intro; HTML-site instructions live in docs/README.md. | 22 May 2026 | Adesh Singh |
| v2.7.2 | PATCH | Fix theme-toggle flicker and lag on the sidebar | Every element's background transition was animating independently over 200ms, cascading visibly across body / sidebar / nav links / demo boxes. ds.js now adds an html.ds-no-transitions class for one frame around the theme swap so the colour change is synchronous across every element. No flicker, instant theme switch. | 22 May 2026 | Adesh Singh |
| v2.7.1 | PATCH | Drop redundant Tokens: paragraph from component pages | Removed the inconsistent "Tokens: --foo, --bar, ..." paragraph from button-group, checkbox, and radio pages. It was only on 3 of 4 documented components and added visual noise without info — token discoverability is already covered by global header search + tokens.css. | 22 May 2026 | Adesh Singh |
| v2.7.0 | MINOR | Radio Button component — full documentation | New .radio component (label + visually-hidden native input + circular box + inner dot). Same a11y pattern as .checkbox; browser handles single-select via shared name=. 1:1 from Base-AI Figma. Documented at components/radio.html with 5 sections (Default / Variants / States / Full matrix / API); matrix is 2×3 matching Figma. 13 new --radio-* tokens (light + dark). Search index extended. | 22 May 2026 | Adesh Singh |
| v2.6.0 | MINOR | Persistent global header — logo + version chip + global search + theme toggle on every page | New top bar auto-injected by ds.js. Logo + version chip left; search + theme toggle right. Sticky at the top, content scrolls beneath. Search covers all pages, every documented section, and ~120 semantic CSS tokens (~220 entries total) with keyboard nav (↓/↑/Enter/Esc). Sidebar no longer carries its own logo or theme button — those moved to the header. New --ds-header-height token, new #ico-search sprite symbol. | 22 May 2026 | Adesh Singh |
| v2.5.1 | PATCH | not-allowed cursor now shows on disabled buttons (and disabled buttons inside button groups) | All five .btn-*:disabled rules had cursor: not-allowed paired with pointer-events: none — the second declaration was swallowing hover events before the cursor could apply. Dropped pointer-events: none everywhere; the native HTML disabled attribute still prevents clicks. Matches the .checkbox wrapper pattern. Button groups inherit automatically. | 22 May 2026 | Adesh Singh |
| v2.5.0 | MINOR | Checkbox component — full documentation | New .checkbox built on native <input type="checkbox"> with three visual variants (Unchecked / Checked / Indeterminate) × three interaction states (Default / Hover / Disabled). Implemented 1:1 from the Base-AI Figma reference. 13 new --checkbox-* tokens (light + dark). Two new sprite symbols (#ico-check, #ico-dash) reusable for future selection components. 5-section docs page with a 3×3 matrix mirroring Figma exactly. New .is-hover doc helper for forcing the hover visual at rest. | 22 May 2026 | Adesh Singh |
| v2.4.4 | PATCH | Trim Button Group docs — drop Variants and Figma reference sections | Removed the Variants tab block (conflicted with the no-all-primary rule) and the Remote/Local Figma reference demo (covered structurally by the Full matrix now). Page down to 9 sections. Refreshed the page intro to point users to Secondary/Tertiary/Ghost as the base + aria-pressed or .btn-group-active-border for the selected button. | 22 May 2026 | Adesh Singh |
| v2.4.3 | PATCH | Button Group — Full matrix reshaped to position variants; new .btn-pos-* helpers | Replaced v2.4.2's state × size × variant grid with a position-based row matching the Base-AI Figma reference — Left / Middle / Right / Up / Down. Added .btn-pos-left/-middle/-right/-up/-down helpers in components.css for documentation and hand-composed layouts (real .btn-group handles position automatically). Added .bg-matrix-row/cell layout helpers. CLAUDE.md generalises "Full matrix" — axes differ per component. | 22 May 2026 | Adesh Singh |
| v2.4.2 | PATCH | Button Group — Full matrix, universal toggle, active-border selection; matrix scaffold in starter | Added the canonical Full matrix (4 states × 4 sizes × 5 variants) to button-group.html with documented skip rules (no all-primary groups, active-border only on tertiary). Every .btn-group is now toggle-interactive by default; opt out with data-no-toggle. New .btn-group-active-border modifier swaps the selected style to btn-active-border. Cleaned up the Figma reference section. starters/foundation.html now scaffolds Full matrix + API table; CLAUDE.md documents the required sections. | 22 May 2026 | Adesh Singh |
| v2.4.1 | PATCH | Figma reference demo in Button Group — Remote/Local toggle from Base-AI library | Implemented the Remote/Local segmented toggle from the Base-AI Figma library as a live interactive demo in components/button-group.html. 1:1 visual parity using existing tokens. Three refinements: added --spacing-xxs (4px) token; .btn-group buttons use --fw-semibold for clearer small-size reads; .btn-xs corners in a group use --radius-md (8px) to match Figma pill radius. | 22 May 2026 | Adesh Singh |
| v2.4.0 | MINOR | Button Group component — full documentation | New .btn-group composes existing button variants. Attached (shared borders, segmented control) and .btn-group-separated (gap, action bar) styles, plus .btn-group-vertical orientation. Selection via aria-pressed or .active. Documented at components/button-group.html with 9 sections, interactive toggle demos, code samples, and an API table. Tokens: --btn-group-gap, --btn-group-overlap. | 22 May 2026 | Adesh Singh |
| v2.3.0 | MINOR | Audit pass — auto-extract TOC, bulk-migrate every page, diagnostics, lean shell | Each page now declares just key and root; ds.js auto-extracts the right-rail TOC from main's h2[id] anchors. Bulk-migrated all 26 component stubs from the legacy hardcoded-sidebar pattern via scripts/migrate-stubs.js — each dropped from ~99–115 lines to ~25. Added DS_PAGE diagnostics (console.warn for missing keys/anchors) and a ?ds-debug=1 toggle that logs active-section transitions. New starters/component.html and starters/foundation.html templates. |
22 May 2026 | Adesh Singh |
| v2.2.3 | PATCH | Pin TOC active state during click-driven smooth scroll; add RAF scroll listener | v2.2.2 set the right section on hashchange, but IO kept firing during the smooth scroll and update() flipped the indicator back briefly — the flicker read as "stuck / jumping / not working." Added pinUntil so update() is a no-op for 800ms after a click, plus a requestAnimationFrame-throttled scroll listener so fast scroll can't out-run the indicator. Fixed 100px activation line. | 22 May 2026 | Adesh Singh |
| v2.2.2 | PATCH | TOC scroll-spy still picked the wrong section near the top; clicks on first/last link looked broken | v2.2.1's 30%-viewport activation line was too low — on pages with several headings stacked in the top ~200px (e.g. overview h1 + intro + quick-links h2), the algorithm picked quick-links even at scrollY=0. Lowered the line to min(20vh, 140px) so only one heading qualifies at the top. Wired hashchange to read location.hash and setActive immediately on click instead of waiting for the smooth-scroll. | 22 May 2026 | Adesh Singh |
| v2.2.1 | PATCH | Fix TOC scroll-spy stalling on click and inside long sections | v2.2.0 IO callback only updated when a heading was inside the 15–30% activation zone, so clicking a TOC link (heading lands above the zone) and scrolling within tall sections both left the indicator stuck. Rewrote initTOCSpy to use IO as a trigger and recompute the active section on every fire. Added hashchange listener and bottom-of-page snap. | 22 May 2026 | Adesh Singh |
| v2.2.0 | MINOR | Shared TOC component, head-loaded ds.js | ds.js renders the on-page TOC from a window.DS_PAGE.toc array and is loaded in <head> so the theme restore fires before first paint (no flash). Migrated all 10 built pages to the new pattern. | 22 May 2026 | Adesh Singh |
| v2.1.0 | MINOR | Shared JS architecture (ds.js) | Created shared/ds.js handling sidebar injection, version display from CSS tokens, localStorage theme toggle, TOC scroll-spy, and copy buttons. Added README.md. | 18 May 2026 | Adesh Singh |
| v2.0.5 | PATCH | Overview page restructure | Quick Links updated to foundation links only, added full Components section with all component cards and links, Latest Changes moved to bottom of page | 17 May 2026 | Adesh Singh |
| v2.0.4 | PATCH | Full token audit — replaced hardcoded values | Replaced hardcoded colors and px values with CSS tokens across components.css, layout.css, shadows.html, typography.html, and index.html. Added --sidebar-width and --toc-width layout tokens. Syntax highlight colors and layout micro-spacing kept as intentional hardcodes. | 17 May 2026 | Adesh Singh |
| v2.0.3 | PATCH | Removed Bigotech references, cleaned up overview page | Replaced all Bigotech mentions with DigiLawyer, removed products card, made intro minimal so Quick Links appears in first fold | 17 May 2026 | Adesh Singh |
| v2.0.2 | PATCH | Overview improvements and changelog restructure | Moved changelog to other/ folder, added Quick Links and Latest Changes to overview, sidebar Other section added | 17 May 2026 | Adesh Singh |
| v2.0.0 | MAJOR | Initial release | Complete token architecture, Button and Button Group, multi-page docs, categorised sidebar, light/dark mode | 17 May 2026 | Adesh Singh |
| No entries match the current filters. | |||||