@kaizen/tailwind 1.5.1 → 1.5.2

package/dist/cjs/tailwind-presets.cjs

@@ -102,7 +102,7 @@ var kaizenTailwindTheme = {
   screens: {
     md: js.tokens.layout.breakpoints.medium,
     // => @media (min-width: 768px) { ... }
-    lg: js.tokens.layout.breakpoints.large // => @media (min-width: 1080px) { ... }
+    lg: js.tokens.layout.breakpoints.large // => @media (min-width: 1024px) { ... }
   }
 };
 var Preset = {

package/dist/esm/tailwind-presets.mjs

@@ -100,7 +100,7 @@ var kaizenTailwindTheme = {
   screens: {
     md: tokens.layout.breakpoints.medium,
     // => @media (min-width: 768px) { ... }
-    lg: tokens.layout.breakpoints.large // => @media (min-width: 1080px) { ... }
+    lg: tokens.layout.breakpoints.large // => @media (min-width: 1024px) { ... }
   }
 };
 var Preset = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/tailwind",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "Kaizen Tailwind presets",
   "repository": {
     "type": "git",
@@ -26,17 +26,18 @@
   },
   "devDependencies": {
     "@cultureamp/package-bundler": "^2.3.2",
+    "@tailwindcss/container-queries": "^0.1.1",
     "classnames": "^2.5.1",
-    "rollup": "^4.46.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "rollup": "^4.46.2",
     "tailwindcss": "^3.4.17",
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "tailwindcss": ">=3.4.7",
     "react": "^18.3.1 || ^19.0.0",
-    "react-dom": "^18.3.1 || ^19.0.0"
+    "react-dom": "^18.3.1 || ^19.0.0",
+    "tailwindcss": ">=3.4.7"
   },
   "scripts": {
     "build": "pnpm package-bundler build",

package/src/_docs/pages/modifiers/container-queries.mdx

@@ -0,0 +1,72 @@
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './container-queries.stories'
+
+<Meta of={Examples} />
+
+# Container Queries
+
+<Description />
+
+Container queries allow you to apply styles based on the size of a container rather than the viewport. This is especially useful for creating truly reusable components that adapt to their context.
+
+## Fallback container parent
+
+The Kaizen design system includes a fallback container parent in the `_reset.css` file:
+
+```css
+body {
+  container-type: inline-size;
+}
+```
+
+This means that if you use container query classes (like `@md:bg-blue-400`) without explicitly adding an `@container` parent, the body element will act as the container context. In this case, container queries will functionally behave the same as viewport media queries, making the transition from media queries to container queries non-breaking for existing components.
+
+## Preset container queries
+
+Container queries work by establishing a containment context on a parent element using the `@container` class, then applying conditional styles to child elements using the `@` prefix.
+
+<Story of={Examples.ContainerQueries} />
+
+## Using arbitrary values
+
+For one-off container sizes that don't match your configured breakpoints, you can use arbitrary values in square brackets.
+
+<Story of={Examples.ArbitraryContainerQueries} />
+
+## Named containers
+
+When you have nested containers, you can use named containers to query specific containers by name. This prevents conflicts where a child element might respond to the wrong container.
+
+```tsx
+<div className="mt-12 border-1 border-dashed border-purple-300 p-8">
+  <Text variant="body">
+    <strong>Outer container ("sidebar") - resize to see effect</strong>
+  </Text>
+  <div className="@container/sidebar mt-4 resize overflow-auto border-2 border-blue-300">
+    <div className="p-4">
+      <Text variant="body">
+        <strong>Inner container ("card")</strong>
+      </Text>
+      <div className="@container/card mt-2 border border-gray-300 p-2">
+        <div className="@md/sidebar:bg-green-400 h-[50px] w-full rounded border-solid">
+          <div className="flex h-full items-center justify-center text-xs">
+            <Text variant="body">Responds to sidebar container</Text>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+<Story of={Examples.NamedContainers} />
+
+## Best practices
+
+- **For container behavior**: Always establish a containment context with `@container` (or named `@container/name`) on the parent element
+- **Fallback behavior**: Without an explicit `@container` parent, container queries will use the body element and behave like viewport media queries
+- Container queries respond to the **container's** size, not the viewport size (unless using the body fallback)
+- Use named containers when you have nested container contexts
+- Combine container queries with regular responsive design for optimal flexibility
+- Container queries work great for component-level responsive design
+- The fallback body container makes migrating from media queries to container queries seamless

package/src/_docs/pages/modifiers/container-queries.stories.tsx

@@ -0,0 +1,124 @@
+import React from 'react'
+import { type Meta, type StoryFn } from '@storybook/react'
+import { Heading } from '~components/Heading'
+import { Text } from '~components/Text'
+
+export default {
+  title: 'Guides/Tailwind/Utility Class References/Modifiers/Container Queries',
+  parameters: {
+    docsLayout: 'fullPage',
+    docs: {
+      a11y: { disable: true },
+      description: {
+        component: 'Require @kaizen/tailwind and add it into your tailwind config',
+      },
+    },
+  },
+} satisfies Meta
+
+type ContainerQueryInfoProps = {
+  selector: string
+  selectorValue: string
+  children: React.ReactElement
+}
+
+const ContainerQueryInfo = ({
+  selector,
+  selectorValue,
+  children,
+}: ContainerQueryInfoProps): React.ReactElement => (
+  <div className="my-12">
+    <Text variant="intro-lede">Container query selector: @{selector}</Text>
+    <Text variant="body">Breakpoint: {selectorValue}</Text>
+    <Text variant="body">In this example: @{selector}:bg-blue-400</Text>
+    {/* Container wrapper to demonstrate container queries */}
+    <div className="mt-12 border-2 border-dashed border-purple-300 p-8">
+      <Text variant="body">
+        <strong>Container wrapper (resize to see effect)</strong>
+      </Text>
+      <div className="mt-4 resize overflow-auto border border-gray-300">{children}</div>
+    </div>
+  </div>
+)
+
+export const ContainerQueries: StoryFn = () => (
+  <div className="py-32">
+    <Heading tag="p" variant="heading-4" classNameOverride="mb-16">
+      Container query breakpoints activate based on the <em>container&apos;s</em> width, not the
+      viewport. These elements will change color when their parent container reaches the specified
+      width.
+    </Heading>
+
+    <ContainerQueryInfo selector="md" selectorValue="768px">
+      <div className="@container">
+        <div className="@md:bg-blue-400 h-[50px] w-full rounded border-solid" />
+      </div>
+    </ContainerQueryInfo>
+
+    <ContainerQueryInfo selector="lg" selectorValue="1080px">
+      <div className="@container">
+        <div className="@lg:bg-blue-400 h-[50px] w-full rounded border-solid" />
+      </div>
+    </ContainerQueryInfo>
+  </div>
+)
+
+export const ArbitraryContainerQueries: StoryFn = () => (
+  <div className="py-32">
+    <Heading tag="p" variant="heading-4" classNameOverride="mb-16">
+      Custom container query breakpoints can be created with arbitrary values.
+    </Heading>
+
+    <div className="my-12">
+      <Text variant="body">
+        <strong>Custom container width breakpoint</strong> (applied when the container gets wider
+        than 500px)
+      </Text>
+      <Text variant="body">In this example: @[500px]:bg-green-400</Text>
+      <div className="mt-12 border-2 border-dashed border-purple-300 p-8">
+        <Text variant="body">
+          <strong>Container wrapper (resize to see effect)</strong>
+        </Text>
+        <div className="@container mt-4 resize overflow-auto border border-gray-300">
+          <div className="@[500px]:bg-green-400 h-[50px] w-full rounded border-solid" />
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+export const NamedContainers: StoryFn = () => (
+  <div className="py-32">
+    <Heading tag="p" variant="heading-4" classNameOverride="mb-16">
+      Named containers allow you to query specific containers by name, useful when you have nested
+      containers.
+    </Heading>
+
+    <div className="my-12">
+      <Text variant="body">
+        <strong>Named container example</strong> - The inner element responds to the outer
+        &quot;sidebar&quot; container, not the inner &quot;card&quot; container
+      </Text>
+      <Text variant="body">In this example: @container/sidebar and @md/sidebar:bg-green-400</Text>
+      <div className="mt-12 border-1 border-dashed border-purple-300 p-8">
+        <Text variant="body">
+          <strong>Outer container (&quot;sidebar&quot;) - resize to see effect</strong>
+        </Text>
+        <div className="@container/sidebar mt-4 resize overflow-auto border-2 border-blue-300">
+          <div className="p-4">
+            <Text variant="body">
+              <strong>Inner container (&quot;card&quot;)</strong>
+            </Text>
+            <div className="@container/card mt-2 border border-gray-300 p-2">
+              <div className="@md/sidebar:bg-green-400 h-[50px] w-full rounded border-solid">
+                <div className="flex h-full items-center justify-center text-xs">
+                  <Text variant="body">Responds to sidebar container</Text>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+)

package/src/tailwind-presets.ts

@@ -107,7 +107,7 @@ export const kaizenTailwindTheme: KaizenTailwindTheme = {
   // A mix of layout styles
   screens: {
     md: tokens.layout.breakpoints.medium, // => @media (min-width: 768px) { ... }
-    lg: tokens.layout.breakpoints.large, // => @media (min-width: 1080px) { ... }
+    lg: tokens.layout.breakpoints.large, // => @media (min-width: 1024px) { ... }
   },
 } as const