Releases: AftabIbrahimKazi/strata
Releases · AftabIbrahimKazi/strata
Release list
v1.8.17
Fixed
package.json'shomepagefield pointed at a dead URL. Still referencedhttps://aftabibrahimkazi.github.io/strata, the old GitHub Pages address from before the docs site moved to Vercel — that URL now returns a genuine 404, so anyone following the "homepage" link from the npm package page landed on a dead page. Updated to the current docs site URL.
Full changelog: https://github.com/AftabIbrahimKazi/strata/blob/main/CHANGELOG.md#1817--2026-08-16
v1.8.16
Fixed
shadow-smandshadow-lgsilently stopped applying their own shadow strength. The responsive shadow registration built class names asshadow-${breakpoint}for every entry in the breakpoint list (sm,md,lg,xl,xxl). Sincesmandlgare also the named shadow scale's own suffixes, that produced class names identical to the baseshadow-sm/shadow-lgclasses — and because registration is last-write-wins, the responsive loop (which runs later) silently overwrote both with "default-strength shadow, active from that breakpoint up" instead.shadow-sm,shadow, andshadow-lgrendered as the exact same shadow. The documentedshadow-{bp}-{variant}responsive pattern (shadow-md-sm,shadow-lg-lg, …) was unaffected and still correct. Fixed by dropping the undocumented bareshadow-${bp}registration entirely.
Full changelog: https://github.com/AftabIbrahimKazi/strata/blob/main/CHANGELOG.md#1816--2026-08-16
Strata CSS v1.8.15
Fixed
- Dependabot alert (high severity): nanoid transitive dependency.
postcsspulled innanoid@3.3.16, which has a predictable-ID generation issue on non-secure entropy sources. Pinned to>=3.3.17via npmoverrides, sincenanoidis not a direct dependency ofstrata-css.
v1.2.5
Added — @strata-packages/picker
themeoption — per-instance inline CSS variable overrides (primary, bg, text, radius, shadow, cellSize, fontSize)classNameoption — extra class on popup for targeted CSS overrides
v1.2.4
Added
@strata-packages/picker— new standalone package: date, time, and datetime picker- Zero dependencies, works standalone or as
Strata.Pickerwith Strata CSS - Declarative init via
data-st-datepicker,data-st-timepicker,data-st-datetimepicker - Date range selection with two-input mode and range highlight
- Preset shortcuts (built-in and custom)
- Month/year grid navigation
--stp-*CSS variable system; auto-inherits--st-*tokens when Strata CSS is present
- Zero dependencies, works standalone or as
Fixed
- Picker popup now appends to
<body>with no CSS opacity transition — appears immediately on open position: fixedpopup no longer adds scroll offset to viewport coordinates- Picker rewritten as unified
createPicker— date / time / datetime all working correctly
v1.2.3
Fixed
@strata-packages/formsauto-init now recognises alldata-st-*select attributes at DOMContentLoaded
v1.2.2
Added — @strata-packages/forms
- Checkbox select mode: dropdown stays open while ticking, Select All row, group-level checkboxes,
checkboxDisplay:chips/count/list maxDisplay— fixed-height chip trigger with+Noverflow badge- Search input always rendered inside the dropdown (not above it)
v1.2.1
Fixed
@strata-packages/formsbackend-friendlyrequiredvalidation — triggers visible error state on custom trigger
v1.2.0
Added — @strata-packages/forms
- New standalone package: fully accessible custom select replacement
- Multi-select with chips,
maxItems, searchable, clearable, grouped<optgroup>, creatable, avatar/custom render, asyncloadOptions, auto-width with viewport edge detection - Native
<select>stays in DOM — form submission works with any backend - Declarative init via
data-st-selectanddata-st-*option attributes
v1.0.0
Components
btn-primary,btn-secondary,btn-success,btn-danger,btn-warning,btn-info,btn-light,btn-dark— full semantic button set with hover, focus, and active states baked incard,card-header,card-body,card-footer— composable card componentcontainer,row,col-*— Bootstrap-compatible responsive grid across all six breakpointsmodal— dialog component withdata-st-toggle,data-st-dismiss, anddata-st-backdropattribute APInavbar,navbar-brand,navbar-nav— navigation bar component- Skeleton loader — animated loading placeholder with
Strata.skeletonJavaScript API
Utilities
- Spacing:
mt-*,mb-*,ms-*,me-*,pt-*,pb-*,px-*,py-*,mx-auto,my-* - Display:
d-flex,d-none,d-block,d-grid,d-inline,d-inline-flex,d-inline-block - Colors:
text-*,bg-*— all semantic colors (primary, secondary, success, danger, warning, info, light, dark, muted) - Sizing:
w-25,w-50,w-75,w-100,h-25,h-50,h-75,h-100,mw-100,mh-100 - Flexbox:
justify-content-*,align-items-*,align-self-*,flex-wrap,flex-nowrap,flex-grow-*,flex-shrink-* - Position:
position-static,position-relative,position-absolute,position-fixed,position-sticky - Overflow:
overflow-auto,overflow-hidden,overflow-scroll,overflow-visible - Opacity:
opacity-0,opacity-25,opacity-50,opacity-75,opacity-100 - Visibility:
visible,invisible - Z-index:
z-0throughz-3 - Cursor:
cursor-pointer,cursor-default,cursor-not-allowed,cursor-wait - Shadows:
shadow-none,shadow-sm,shadow,shadow-lg - Transitions:
transition,transition-fast,transition-slow,transition-none - Easing:
ease-in,ease-out,ease-in-out,ease-linear - Arbitrary values:
mt-[24px],bg-[#ff0000],w-[347px],transition-[background-color_0.3s_ease] - Important variants:
!mt-0,!d-none,!p-0 - Breakpoint variants on all utilities:
col-md-6,d-lg-none,mt-xl-4,px-xxl-5
Theming
- Three built-in themes:
light(default),dark,dim— applied viadata-st-themeon<html> - Automatic system preference detection via
prefers-color-scheme— no configuration needed - Unlimited custom themes via CSS custom properties:
[data-st-theme="brand"] { --st-primary: #7c3aed } - All
--st-*custom properties fully overridable in:rootor any selector - Smooth theme transitions — all elements animate when the theme attribute changes
State Management
data-st-visible="true|false"— fade + translateY transition for show/hidedata-st-collapsed="true|false"— smoothmax-heightexpand/collapsedata-st-loading="true|false"— opacity reduction + pointer-events disableddata-st-disabled="true|false"— opacity reduction +cursor: not-alloweddata-st-theme="light|dark|dim|custom"— live theme switching
Build System
- PostCSS plugin with O(1) class registry — 1065 pre-computed entries, zero linear scanning
- Multi-layer caching: dirty flag, file mtime, glob hash, config hash, output string cache
- CSS
@layerhierarchy:st-base→st-components→st-utilities— breakpoint order guaranteed, HTML class order irrelevant - Bootstrap-style breakpoints: xs (0px), sm (576px), md (768px), lg (992px), xl (1200px), xxl (1400px)
- Custom breakpoints via
strata.config.jstheme.breakpoints prefers-reduced-motionrespected automatically — no configuration needed- CLI:
strata init(scaffold),strata --watch(development),strata --build(production),strata --minify(minified production)
Performance (vs Tailwind CSS 3 in watch mode)
- Cold build: 1.89ms avg vs 7.21ms — 3.8× faster
- Warm rebuild: 0.14ms avg vs 2.70ms — 19× faster
- Warm p95: 0.23ms vs 6.12ms — 26× faster
Reproduce via npm run benchmark.