From 3bbc99b2481a52363608f2e71c900b090f6f6b8c Mon Sep 17 00:00:00 2001 From: Antoine Quatrelivre Date: Fri, 21 Nov 2025 15:05:12 +0100 Subject: [PATCH 1/3] Update default breakpoints to match with our `@studiometa/tailwind-config` --- packages/js-toolkit/src/Base/features.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/js-toolkit/src/Base/features.ts b/packages/js-toolkit/src/Base/features.ts index 1b579f846..20d53106c 100644 --- a/packages/js-toolkit/src/Base/features.ts +++ b/packages/js-toolkit/src/Base/features.ts @@ -19,14 +19,14 @@ export const features = new Map([ [ 'breakpoints', { - xxs: '0rem', + '2xs': '0rem', xs: '30rem', // 480px - s: '48rem', // 768px - m: '64rem', // 1024px - l: '80rem', // 1280px - xl: '90rem', // 1440px - xxl: '120rem', // 1920px - xxxl: '160rem', // 2560px + s: '40rem', // 640px + m: '48rem', // 768px + l: '64rem', // 1024px + xl: '80rem', // 1280px + '2xl': '96rem', // 1440px + '3xl': '120rem', // 1920px }, ], ['prefix', 'tk'], From f4763b9ee2032e3351995cb6b923bf287a28315b Mon Sep 17 00:00:00 2001 From: Antoine Quatrelivre Date: Fri, 21 Nov 2025 15:06:32 +0100 Subject: [PATCH 2/3] Update changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5aefa9411..93b796b5a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ All notable changes to this project will be documented in this file. The format ### Changed +- ⚠️ Update the default breakpoints to match `@studiometa/tailwind-config` ([#708](https://github.com/studiometa/js-toolkit/pull/708)) - Assemble the published package in `packages/js-toolkit/` instead of a repository-level `dist/`. The subpaths a consumer imports are unchanged ([#777](https://github.com/studiometa/js-toolkit/pull/777)) - Build with tsdown (rolldown) instead of esbuild plus a separate `tsgo --build` pass, in every package ([#777](https://github.com/studiometa/js-toolkit/pull/777)) - Format with `oxfmt` instead of Prettier, across the whole tree; the demo keeps Prettier for its Twig templates ([#777](https://github.com/studiometa/js-toolkit/pull/777)) @@ -177,6 +178,7 @@ All notable changes to this project will be documented in this file. The format - Deprecate `$parent`, `$children` and `$root` instance properties in favor of `$closest(name)` and `$query(name)` ([#694](https://github.com/studiometa/js-toolkit/issues/694)) +||||||| parent of 74613a7a (Update changelog) ## [v3.4.3](https://github.com/studiometa/js-toolkit/compare/3.4.2..3.4.3) (2025-11-13) ### Fixed From dfbc0936e7816f810af14339d48b1a5dcb8538c2 Mon Sep 17 00:00:00 2001 From: Antoine Quatrelivre Date: Fri, 21 Nov 2025 16:25:46 +0100 Subject: [PATCH 3/3] Update the documentation --- .../docs/api/decorators/withBreakpointManager.md | 8 ++++---- .../docs/api/decorators/withBreakpointObserver.md | 6 +++--- packages/docs/api/services/useResize.md | 14 +++++++------- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/docs/api/decorators/withBreakpointManager.md b/packages/docs/api/decorators/withBreakpointManager.md index b24463bc9..ff75d1b3e 100644 --- a/packages/docs/api/decorators/withBreakpointManager.md +++ b/packages/docs/api/decorators/withBreakpointManager.md @@ -15,8 +15,8 @@ import MenuMobile from './MenuMobile'; import MenuDesktop from './MenuDesktop'; export default class Menu extends withBreakpointManager(Base, [ - ['xxs xs s', MenuMobile], - ['m l xl xxl', MenuDesktop], + ['2xs xs s', MenuMobile], + ['m l xl 2xl', MenuDesktop], ]) { static config = { name: 'Menu', @@ -48,8 +48,8 @@ import MenuMobile from './MenuMobile'; import MenuDesktop from './MenuDesktop'; export default class Menu extends withBreakpointManager(Base, [ - ['xxs xs s', MenuMobile], - ['m l xl xxl', MenuDesktop], + ['2xs xs s', MenuMobile], + ['m l xl 2xl', MenuDesktop], ]) { static config = { name: 'Menu', diff --git a/packages/docs/api/decorators/withBreakpointObserver.md b/packages/docs/api/decorators/withBreakpointObserver.md index 42526612e..9eeb35e4a 100644 --- a/packages/docs/api/decorators/withBreakpointObserver.md +++ b/packages/docs/api/decorators/withBreakpointObserver.md @@ -18,7 +18,7 @@ export default class MobileComponent extends withBreakpointObserver(Base) { options: { activeBreakpoints: { type: String, - default: 'xxs xs s', + default: '2xs xs s', }, }, }; @@ -49,7 +49,7 @@ export default class MobileComponent extends withBreakpointObserver(Base) { options: { activeBreakpoints: { type: String, - default: 'xxs xs s', + default: '2xs xs s', }, }, }; @@ -70,7 +70,7 @@ export default class MobileComponent extends withBreakpointObserver(Base) { options: { inactiveBreakpoints: { type: String, - default: 'm l xl xxl', + default: 'm l xl 2xl', }, }, }; diff --git a/packages/docs/api/services/useResize.md b/packages/docs/api/services/useResize.md index 5e6f8b8df..e4e787cf7 100644 --- a/packages/docs/api/services/useResize.md +++ b/packages/docs/api/services/useResize.md @@ -68,14 +68,14 @@ Configure the breakpoints used for responsive features of this service. This par ```js { - xxs: '0rem', // 0px + '2xs': '0rem', xs: '30rem', // 480px - s: '48rem', // 768px - m: '64rem', // 1024px - l: '80rem', // 1280px - xl: '90rem', // 1440px - xxl: '120rem', // 1920px - xxxl: '160rem', // 2560px + s: '40rem', // 640px + m: '48rem', // 768px + l: '64rem', // 1024px + xl: '80rem', // 1280px + '2xl': '96rem', // 1440px + '3xl': '120rem', // 1920px } ```