@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.48

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/hyphens.mdx

@@ -0,0 +1,112 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "hyphens";
+export const description = "Utilities for controlling how words should be hyphenated.";
+
+<ApiTable
+  rows={[
+    ["hyphens-none", "hyphens: none;"],
+    ["hyphens-manual", "hyphens: manual;"],
+    ["hyphens-auto", "hyphens: auto;"],
+  ]}
+/>
+
+## Examples
+
+### Preventing hyphenation
+
+Use the `hyphens-none` utility to prevent words from being hyphenated even if the line break suggestion `&shy;` is used:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <p className="mx-auto max-w-xs border-x border-x-pink-400/30 py-8 break-normal hyphens-none text-gray-900 dark:text-gray-200">
+      Officially recognized by the Duden dictionary as the longest word in German,{" "}
+      <span className="font-bold" lang="de">
+        Kraftfahrzeug&shy;haftpflichtversicherung
+      </span>{" "}
+      is a 36 letter word for motor vehicle liability insurance.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:hyphens-none] -->
+<!-- [!code word:&shy;] -->
+<!-- prettier-ignore -->
+<p class="hyphens-none">
+  ... Kraftfahrzeug&shy;haftpflichtversicherung is a ...
+</p>
+```
+
+</Figure>
+
+### Manual hyphenation
+
+Use the `hyphens-manual` utility to only set hyphenation points where the line break suggestion `&shy;` is used:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <p className="mx-auto max-w-xs border-x border-x-pink-400/30 py-8 break-normal hyphens-manual text-gray-900 dark:text-gray-200">
+      Officially recognized by the Duden dictionary as the longest word in German,{" "}
+      <span className="font-bold" lang="de">
+        Kraftfahrzeug&shy;haftpflichtversicherung
+      </span>{" "}
+      is a 36 letter word for motor vehicle liability insurance.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:hyphens-manual] -->
+<!-- [!code word:&shy;] -->
+<!-- prettier-ignore -->
+<p class="hyphens-manual">
+  ... Kraftfahrzeug&shy;haftpflichtversicherung is a ...
+</p>
+```
+
+</Figure>
+
+This is the default browser behavior.
+
+### Automatic hyphenation
+
+Use the `hyphens-auto` utility to allow the browser to automatically choose hyphenation points based on the language:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <p className="mx-auto max-w-xs border-x border-x-pink-400/30 py-8 break-normal hyphens-auto text-gray-900 dark:text-gray-200">
+      Officially recognized by the Duden dictionary as the longest word in German,{" "}
+      <span className="font-bold" lang="de">
+        Kraftfahrzeughaftpflichtversicherung
+      </span>{" "}
+      is a 36 letter word for motor vehicle liability insurance.
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:hyphens-auto] -->
+<!-- [!code word:lang="de"] -->
+<!-- prettier-ignore -->
+<p class="hyphens-auto" lang="de">
+  ... Kraftfahrzeughaftpflichtversicherung is a ...
+</p>
+```
+
+</Figure>
+
+The line break suggestion `&shy;` will be preferred over automatic hyphenation points.
+
+### Responsive design
+
+<ResponsiveDesign element="p" property="hyphens" defaultClass="hyphens-none" featuredClass="hyphens-auto" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/inline-size.mdx

@@ -0,0 +1,191 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+
+export const title = "inline-size";
+export const description = "Utilities for setting the inline size of an element.";
+
+<ApiTable
+  rows={[
+    ["inline-<number>", "inline-size: calc(var(--spacing) * <number>);"],
+    ["inline-<fraction>", "inline-size: calc(<fraction> * 100%);"],
+    ["inline-3xs", "inline-size: var(--container-3xs); /* 16rem (256px) */"],
+    ["inline-2xs", "inline-size: var(--container-2xs); /* 18rem (288px) */"],
+    ["inline-xs", "inline-size: var(--container-xs); /* 20rem (320px) */"],
+    ["inline-sm", "inline-size: var(--container-sm); /* 24rem (384px) */"],
+    ["inline-md", "inline-size: var(--container-md); /* 28rem (448px) */"],
+    ["inline-lg", "inline-size: var(--container-lg); /* 32rem (512px) */"],
+    ["inline-xl", "inline-size: var(--container-xl); /* 36rem (576px) */"],
+    ["inline-2xl", "inline-size: var(--container-2xl); /* 42rem (672px) */"],
+    ["inline-3xl", "inline-size: var(--container-3xl); /* 48rem (768px) */"],
+    ["inline-4xl", "inline-size: var(--container-4xl); /* 56rem (896px) */"],
+    ["inline-5xl", "inline-size: var(--container-5xl); /* 64rem (1024px) */"],
+    ["inline-6xl", "inline-size: var(--container-6xl); /* 72rem (1152px) */"],
+    ["inline-7xl", "inline-size: var(--container-7xl); /* 80rem (1280px) */"],
+    ["inline-auto", "inline-size: auto;"],
+    ["inline-px", "inline-size: 1px;"],
+    ["inline-full", "inline-size: 100%;"],
+    ["inline-screen", "inline-size: 100vw;"],
+    ["inline-dvw", "inline-size: 100dvw;"],
+    ["inline-dvh", "inline-size: 100dvh;"],
+    ["inline-lvw", "inline-size: 100lvw;"],
+    ["inline-lvh", "inline-size: 100lvh;"],
+    ["inline-svw", "inline-size: 100svw;"],
+    ["inline-svh", "inline-size: 100svh;"],
+    ["inline-min", "inline-size: min-content;"],
+    ["inline-max", "inline-size: max-content;"],
+    ["inline-fit", "inline-size: fit-content;"],
+    ["inline-(<custom-property>)", "inline-size: var(<custom-property>);"],
+    ["inline-[<value>]", "inline-size: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `inline-<number>` utilities like `inline-24` and `inline-64` to set an element to a fixed inline size based on the spacing scale:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-center">
+      <div className="space-y-4 text-center font-mono text-xs font-bold text-white">
+        <div className="hidden rounded-lg bg-blue-500 px-4 py-2 inline-96 sm:block">inline-96</div>
+        <div className="hidden rounded-lg bg-blue-500 px-4 py-2 inline-80 sm:block">inline-80</div>
+        <div className="hidden rounded-lg bg-blue-500 px-4 py-2 inline-64 sm:block">inline-64</div>
+        <div className="rounded-lg bg-blue-500 px-4 py-2 inline-48">inline-48</div>
+        <div className="rounded-lg bg-blue-500 px-4 py-2 inline-40">inline-40</div>
+        <div className="rounded-lg bg-blue-500 px-4 py-2 inline-32">inline-32</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:inline-96,inline-80,inline-64,inline-48,inline-40,inline-32,inline-24] -->
+<div class="inline-96 ...">inline-96</div>
+<div class="inline-80 ...">inline-80</div>
+<div class="inline-64 ...">inline-64</div>
+<div class="inline-48 ...">inline-48</div>
+<div class="inline-40 ...">inline-40</div>
+<div class="inline-32 ...">inline-32</div>
+```
+
+</Figure>
+
+### Using a percentage
+
+Use `inline-full` or `inline-<fraction>` utilities like `inline-1/2` and `inline-2/5` to give an element a percentage-based inline size:
+
+<Figure>
+
+<Example>
+  {
+    <div className="space-y-4 font-mono text-xs font-bold text-white">
+      <div className="flex gap-x-4">
+        <div className="rounded-lg bg-violet-500 px-4 py-2 text-center inline-1/2">inline-1/2</div>
+        <div className="rounded-lg bg-violet-500 px-4 py-2 text-center inline-1/2">inline-1/2</div>
+      </div>
+      <div className="flex gap-x-4">
+        <div className="rounded-lg bg-violet-500 px-4 py-2 text-center inline-2/5">inline-2/5</div>
+        <div className="rounded-lg bg-violet-500 px-4 py-2 text-center inline-3/5">inline-3/5</div>
+      </div>
+      <div className="flex gap-x-4">
+        <div className="rounded-lg bg-violet-500 px-4 py-2 text-center inline-1/3">inline-1/3</div>
+        <div className="rounded-lg bg-violet-500 px-4 py-2 text-center inline-2/3">inline-2/3</div>
+      </div>
+      <div className="rounded-lg bg-violet-500 px-4 py-2 text-center font-mono text-white inline-full">inline-full</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:inline-1/2,inline-2/5,inline-3/5,inline-1/3,inline-2/3,inline-full] -->
+<div class="flex ...">
+  <div class="inline-1/2 ...">inline-1/2</div>
+  <div class="inline-1/2 ...">inline-1/2</div>
+</div>
+<div class="flex ...">
+  <div class="inline-2/5 ...">inline-2/5</div>
+  <div class="inline-3/5 ...">inline-3/5</div>
+</div>
+<div class="flex ...">
+  <div class="inline-1/3 ...">inline-1/3</div>
+  <div class="inline-2/3 ...">inline-2/3</div>
+</div>
+<div class="inline-full ...">inline-full</div>
+```
+
+</Figure>
+
+### Using the container scale
+
+Use utilities like `inline-sm` and `inline-xl` to set an element to a fixed inline size based on the container scale:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-center">
+      <div className="space-y-4 text-center font-mono text-xs font-bold text-white">
+        <div className="hidden rounded-lg bg-sky-500 px-4 py-2 inline-xl sm:block">inline-xl</div>
+        <div className="hidden rounded-lg bg-sky-500 px-4 py-2 inline-lg sm:block">inline-lg</div>
+        <div className="hidden rounded-lg bg-sky-500 px-4 py-2 inline-md sm:block">inline-md</div>
+        <div className="rounded-lg bg-sky-500 px-4 py-2 inline-sm">inline-sm</div>
+        <div className="rounded-lg bg-sky-500 px-4 py-2 inline-xs">inline-xs</div>
+        <div className="rounded-lg bg-sky-500 px-4 py-2 inline-2xs">inline-2xs</div>
+        <div className="rounded-lg bg-sky-500 px-4 py-2 inline-3xs">inline-3xs</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:inline-xl,inline-lg,inline-md,inline-sm,inline-xs,inline-2xs,inline-3xs] -->
+<div class="inline-xl ...">inline-xl</div>
+<div class="inline-lg ...">inline-lg</div>
+<div class="inline-md ...">inline-md</div>
+<div class="inline-sm ...">inline-sm</div>
+<div class="inline-xs ...">inline-xs</div>
+<div class="inline-2xs ...">inline-2xs</div>
+<div class="inline-3xs ...">inline-3xs</div>
+```
+
+</Figure>
+
+### Matching the viewport
+
+Use the `inline-screen` utility to make an element span the entire inline size of the viewport:
+
+```html
+<!-- [!code classes:inline-screen] -->
+<div class="inline-screen">
+  <!-- ... -->
+</div>
+```
+
+### Resetting the inline size
+
+Use the `inline-auto` utility to remove an element's assigned inline size under a specific condition, like at a particular breakpoint:
+
+```html
+<!-- [!code classes:inline-full,inline-auto] -->
+<div class="inline-full md:inline-auto">
+  <!-- ... -->
+</div>
+```
+
+### Using a custom value
+
+<UsingACustomValue utility="inline" value="5px" name="inline size" variable="inline-size" />
+
+### Responsive design
+
+<ResponsiveDesign property="inline-size" defaultClass="inline-1/2" featuredClass="inline-full" />
+
+## Customizing your theme
+
+<CustomizingYourSpacingScale utility="inline" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/isolation.mdx

@@ -0,0 +1,30 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "isolation";
+export const description =
+  "Utilities for controlling whether an element should explicitly create a new stacking context.";
+
+<ApiTable
+  rows={[
+    ["isolate", "isolation: isolate;"],
+    ["isolation-auto", "isolation: auto;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use the `isolate` and `isolation-auto` utilities to control whether an element should explicitly create a new stacking context:
+
+```html
+<!-- [!code classes:isolate] -->
+<div class="isolate ...">
+  <!-- ... -->
+</div>
+```
+
+### Responsive design
+
+<ResponsiveDesign property="isolation" defaultClass="isolate" featuredClass="isolation-auto" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/justify-content.mdx

@@ -0,0 +1,348 @@
+import { CodeExampleStack } from "@/components/code-example";
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "justify-content";
+export const description =
+  "Utilities for controlling how flex and grid items are positioned along a container's main axis.";
+
+<ApiTable
+  rows={[
+    ["justify-start", "justify-content: flex-start;"],
+    ["justify-end", "justify-content: flex-end;"],
+    ["justify-end-safe", "justify-content: safe flex-end;"],
+    ["justify-center", "justify-content: center;"],
+    ["justify-center-safe", "justify-content: safe center;"],
+    ["justify-between", "justify-content: space-between;"],
+    ["justify-around", "justify-content: space-around;"],
+    ["justify-evenly", "justify-content: space-evenly;"],
+    ["justify-stretch", "justify-content: stretch;"],
+    ["justify-baseline", "justify-content: baseline;"],
+    ["justify-normal", "justify-content: normal;"],
+  ]}
+/>
+
+## Examples
+
+### Start
+
+Use the `justify-start` utility to justify items against the start of the container's main axis:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 flex justify-start space-x-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-fuchsia-500">01</div>
+        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-fuchsia-500">02</div>
+        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-fuchsia-500">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:justify-start] -->
+<div class="flex justify-start ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Center
+
+Use the `justify-center` or `justify-center-safe` utilities to justify items along the center of the container's main axis:
+
+<Figure hint="Resize the container to see the alignment behavior">
+
+<Example resizable>
+  {
+    <div className="grid grid-cols-1 gap-8">
+      <div>
+        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">justify-center</p>
+        <div className="mt-4 grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex justify-center space-x-4 overflow-hidden rounded-lg font-mono text-sm leading-6 font-bold text-white">
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-blue-500">01</div>
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-blue-500">02</div>
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-blue-500">03</div>
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-blue-500">04</div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          justify-center-safe
+        </p>
+        <div className="mt-4 grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex justify-center-safe space-x-4 overflow-hidden rounded-lg font-mono text-sm leading-6 font-bold text-white">
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-indigo-500">01</div>
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-indigo-500">02</div>
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-indigo-500">03</div>
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-indigo-500">04</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+<CodeExampleStack>
+
+```html
+<!-- [!code filename:justify-center] -->
+<!-- [!code classes:justify-center] -->
+<div class="flex justify-center ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+</div>
+```
+
+```html
+<!-- [!code filename:justify-center-safe] -->
+<!-- [!code classes:justify-center-safe] -->
+<div class="flex justify-center-safe ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+</div>
+```
+
+</CodeExampleStack>
+
+</Figure>
+
+When there is not enough space available, the `justify-center-safe` utility will align items to the start of the container instead of the center.
+
+### End
+
+Use the `justify-end` or `justify-end-safe` utilities to justify items against the end of the container's main axis:
+
+<Figure hint="Resize the container to see the alignment behavior">
+
+<Example resizable>
+  {
+    <div className="grid grid-cols-1 gap-8">
+      <div>
+        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">justify-end</p>
+        <div className="mt-4 grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex justify-end space-x-4 overflow-hidden rounded-lg font-mono text-sm leading-6 font-bold text-white">
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-pink-500">01</div>
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-pink-500">02</div>
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-pink-500">03</div>
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-pink-500">04</div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">justify-end-safe</p>
+        <div className="mt-4 grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex justify-end-safe space-x-4 overflow-hidden rounded-lg font-mono text-sm leading-6 font-bold text-white">
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-fuchsia-500">01</div>
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-fuchsia-500">02</div>
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-fuchsia-500">03</div>
+            <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-fuchsia-500">04</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+<CodeExampleStack>
+
+```html
+<!-- [!code filename:justify-end] -->
+<!-- [!code classes:justify-end] -->
+<div class="flex justify-end ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>03</div>
+</div>
+```
+
+```html
+<!-- [!code filename:justify-end-safe] -->
+<!-- [!code classes:justify-end-safe] -->
+<div class="flex justify-end-safe ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>03</div>
+</div>
+```
+
+</CodeExampleStack>
+
+</Figure>
+
+When there is not enough space available, the `justify-end-safe` utility will align items to the start of the container instead of the end.
+
+### Space between
+
+Use the `justify-between` utility to justify items along the container's main axis such that there is an equal amount of space between each item:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 flex justify-between space-x-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-cyan-500">01</div>
+        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-cyan-500">02</div>
+        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-cyan-500">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:justify-between] -->
+<div class="flex justify-between ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Space around
+
+Use the `justify-around` utility to justify items along the container's main axis such that there is an equal amount of space on each side of each item:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 flex justify-around space-x-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-purple-500">01</div>
+        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-purple-500">02</div>
+        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-purple-500">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:justify-around] -->
+<div class="flex justify-around ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Space evenly
+
+Use the `justify-evenly` utility to justify items along the container's main axis such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using `justify-around`:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 flex justify-evenly space-x-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-indigo-500">01</div>
+        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-indigo-500">02</div>
+        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-indigo-500">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:justify-evenly] -->
+<div class="flex justify-evenly ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Stretch
+
+Use the `justify-stretch` utility to allow auto-sized content items to fill the available space along the container's main axis:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid grid-cols-[4rem_auto_4rem] justify-stretch gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex h-14 items-center justify-center rounded-lg bg-fuchsia-500">01</div>
+        <div className="flex h-14 items-center justify-center rounded-lg bg-fuchsia-500">02</div>
+        <div className="flex h-14 items-center justify-center rounded-lg bg-fuchsia-500">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:justify-stretch] -->
+<div class="grid grid-cols-[4rem_auto_4rem] justify-stretch ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Normal
+
+Use the `justify-normal` utility to pack content items in their default position as if no `justify-content` value was set:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 flex justify-normal space-x-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-blue-500">01</div>
+        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-blue-500">02</div>
+        <div className="flex size-14 shrink-0 items-center justify-center rounded-lg bg-blue-500">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:justify-normal] -->
+<div class="flex justify-normal ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="justify-content" defaultClass="flex justify-start" featuredClass="justify-between" />