@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

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

@@ -0,0 +1,38 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "break-after";
+export const description = "Utilities for controlling how a column or page should break after an element.";
+
+<ApiTable
+  rows={[
+    ["break-after-auto", "break-after: auto;"],
+    ["break-after-avoid", "break-after: avoid;"],
+    ["break-after-all", "break-after: all;"],
+    ["break-after-avoid-page", "break-after: avoid-page;"],
+    ["break-after-page", "break-after: page;"],
+    ["break-after-left", "break-after: left;"],
+    ["break-after-right", "break-after: right;"],
+    ["break-after-column", "break-after: column;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `break-after-column` and `break-after-page` to control how a column or page break should behave after an element:
+
+```html
+<!-- [!code classes:break-after-column] -->
+<div class="columns-2">
+  <p>Well, let me tell you something, ...</p>
+  <p class="break-after-column">Sure, go ahead, laugh...</p>
+  <p>Maybe we can live without...</p>
+  <p>Look. If you think this is...</p>
+</div>
+```
+
+### Responsive design
+
+<ResponsiveDesign property="break-after" defaultClass="break-after-column" featuredClass="break-after-auto" />

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

@@ -0,0 +1,38 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "break-before";
+export const description = "Utilities for controlling how a column or page should break before an element.";
+
+<ApiTable
+  rows={[
+    ["break-before-auto", "break-before: auto;"],
+    ["break-before-avoid", "break-before: avoid;"],
+    ["break-before-all", "break-before: all;"],
+    ["break-before-avoid-page", "break-before: avoid-page;"],
+    ["break-before-page", "break-before: page;"],
+    ["break-before-left", "break-before: left;"],
+    ["break-before-right", "break-before: right;"],
+    ["break-before-column", "break-before: column;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `break-before-column` and `break-before-page` to control how a column or page break should behave before an element:
+
+```html
+<!-- [!code classes:break-before-column] -->
+<div class="columns-2">
+  <p>Well, let me tell you something, ...</p>
+  <p class="break-before-column">Sure, go ahead, laugh...</p>
+  <p>Maybe we can live without...</p>
+  <p>Look. If you think this is...</p>
+</div>
+```
+
+### Responsive design
+
+<ResponsiveDesign property="break-before" defaultClass="break-before-column" featuredClass="break-before-auto" />

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

@@ -0,0 +1,34 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "break-inside";
+export const description = "Utilities for controlling how a column or page should break within an element.";
+
+<ApiTable
+  rows={[
+    ["break-inside-auto", "break-inside: auto;"],
+    ["break-inside-avoid", "break-inside: avoid;"],
+    ["break-inside-avoid-page", "break-inside: avoid-page;"],
+    ["break-inside-avoid-column", "break-inside: avoid-column;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `break-inside-column` and `break-inside-avoid-page` to control how a column or page break should behave within an element:
+
+```html
+<!-- [!code classes:break-inside-avoid-column] -->
+<div class="columns-2">
+  <p>Well, let me tell you something, ...</p>
+  <p class="break-inside-avoid-column">Sure, go ahead, laugh...</p>
+  <p>Maybe we can live without...</p>
+  <p>Look. If you think this is...</p>
+</div>
+```
+
+### Responsive design
+
+<ResponsiveDesign property="break-inside" defaultClass="break-inside-avoid-column" featuredClass="break-inside-auto" />

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

@@ -0,0 +1,190 @@
+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 = "caption-side";
+export const description = "Utilities for controlling the alignment of a caption element inside of a table.";
+
+<ApiTable
+  rows={[
+    ["caption-top", "caption-side: top;"],
+    ["caption-bottom", "caption-side: bottom;"],
+  ]}
+/>
+
+## Examples
+
+### Placing at top of table
+
+Use the `caption-top` utility to position a caption element at the top of a table:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="overflow-hidden px-4 py-8 sm:px-8">
+      <table className="w-full table-auto border-collapse text-sm">
+        <caption className="caption-top pb-4 text-xs text-gray-500 dark:text-gray-400">
+          Table 3.1: Professional wrestlers and their signature moves.
+        </caption>
+        <thead>
+          <tr>
+            <th className="border border-gray-200 bg-gray-50 p-4 py-3 pl-8 text-left font-medium text-gray-400 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200">
+              Wrestler
+            </th>
+            <th className="border border-gray-200 bg-gray-50 p-4 py-3 pr-8 text-left font-medium text-gray-400 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200">
+              Signature Move(s)
+            </th>
+          </tr>
+        </thead>
+        <tbody className="bg-white dark:bg-gray-800">
+          <tr>
+            <td className="border border-gray-200 p-4 pl-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
+              "Stone Cold" Steve Austin
+            </td>
+            <td className="border border-gray-200 p-4 pr-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
+              Stone Cold Stunner, Lou Thesz Press
+            </td>
+          </tr>
+          <tr>
+            <td className="border border-gray-200 p-4 pl-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
+              Bret "The Hitman" Hart
+            </td>
+            <td className="border border-gray-200 p-4 pr-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
+              The Sharpshooter
+            </td>
+          </tr>
+          <tr>
+            <td className="border border-gray-200 p-4 pl-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
+              Razor Ramon
+            </td>
+            <td className="border border-gray-200 p-4 pr-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
+              Razor's Edge, Fallaway Slam
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:caption-top] -->
+<table>
+  <caption class="caption-top">
+    Table 3.1: Professional wrestlers and their signature moves.
+  </caption>
+  <thead>
+    <tr>
+      <th>Wrestler</th>
+      <th>Signature Move(s)</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>"Stone Cold" Steve Austin</td>
+      <td>Stone Cold Stunner, Lou Thesz Press</td>
+    </tr>
+    <tr>
+      <td>Bret "The Hitman" Hart</td>
+      <td>The Sharpshooter</td>
+    </tr>
+    <tr>
+      <td>Razor Ramon</td>
+      <td>Razor's Edge, Fallaway Slam</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+</Figure>
+
+### Placing at bottom of table
+
+Use the `caption-bottom` utility to position a caption element at the bottom of a table:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="overflow-hidden px-4 py-8 sm:px-8">
+      <table className="w-full table-auto border-collapse text-sm">
+        <caption className="caption-bottom pt-4 text-xs text-gray-500 dark:text-gray-400">
+          Table 3.1: Professional wrestlers and their signature moves.
+        </caption>
+        <thead>
+          <tr>
+            <th className="border border-gray-200 bg-gray-50 p-4 py-3 pl-8 text-left font-medium text-gray-400 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200">
+              Wrestler
+            </th>
+            <th className="border border-gray-200 bg-gray-50 p-4 py-3 pr-8 text-left font-medium text-gray-400 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200">
+              Signature Move(s)
+            </th>
+          </tr>
+        </thead>
+        <tbody className="bg-white dark:bg-gray-800">
+          <tr>
+            <td className="border border-gray-200 p-4 pl-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
+              "Stone Cold" Steve Austin
+            </td>
+            <td className="border border-gray-200 p-4 pr-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
+              Stone Cold Stunner, Lou Thesz Press
+            </td>
+          </tr>
+          <tr>
+            <td className="border border-gray-200 p-4 pl-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
+              Bret "The Hitman" Hart
+            </td>
+            <td className="border border-gray-200 p-4 pr-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
+              The Sharpshooter
+            </td>
+          </tr>
+          <tr>
+            <td className="border border-gray-200 p-4 pl-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
+              Razor Ramon
+            </td>
+            <td className="border border-gray-200 p-4 pr-8 text-gray-500 dark:border-gray-600 dark:text-gray-400">
+              Razor's Edge, Fallaway Slam
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code word:caption-bottom] -->
+<table>
+  <caption class="caption-bottom">
+    Table 3.1: Professional wrestlers and their signature moves.
+  </caption>
+  <thead>
+    <tr>
+      <th>Wrestler</th>
+      <th>Signature Move(s)</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>"Stone Cold" Steve Austin</td>
+      <td>Stone Cold Stunner, Lou Thesz Press</td>
+    </tr>
+    <tr>
+      <td>Bret "The Hitman" Hart</td>
+      <td>The Sharpshooter</td>
+    </tr>
+    <tr>
+      <td>Razor Ramon</td>
+      <td>Razor's Edge, Fallaway Slam</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="caption-side" element="caption" defaultClass="caption-top" featuredClass="caption-bottom" />

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

@@ -0,0 +1,66 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourThemeColors } from "@/components/content.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { UsingACustomValue } from "@/components/content.tsx";
+import colors from "./utils/colors";
+
+export const title = "caret-color";
+export const description = "Utilities for controlling the color of the text input cursor.";
+
+<ApiTable
+  rows={[
+    ["caret-inherit", "caret-color: inherit;"],
+    ["caret-current", "caret-color: currentColor;"],
+    ["caret-transparent", "caret-color: transparent;"],
+    ...Object.entries(colors).map(([name, value]) => [
+      `caret-${name}`,
+      `caret-color: var(--color-${name}); /* ${value} */`,
+    ]),
+    ["caret-<custom-property>", "caret-color: var(<custom-property>);"],
+    ["caret-[<value>]", "caret-color: <value>;"],
+  ]}
+/>
+## Examples
+
+### Basic example
+
+Use utilities like `caret-rose-500` and `caret-lime-600` to change the color of the text input cursor:
+
+<Figure hint="Focus the textarea to see the new caret color">
+
+<Example>
+  {
+    <div className="flex w-full items-center justify-center">
+      <textarea
+        className="w-80 rounded-md p-2 text-sm caret-pink-500 ring-1 ring-gray-900/10 focus:ring-2 focus:ring-pink-500 focus:outline-none dark:bg-gray-950/25 dark:ring-1 dark:ring-white/5 dark:focus:bg-gray-950/10 dark:focus:ring-2 dark:focus:ring-pink-500"
+        rows="2"
+      />
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:caret-pink-500] -->
+<textarea class="caret-pink-500 ..."></textarea>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue element="textarea" utility="caret" value="#50d71e" name="caret color" variable="caret-color" />
+
+### Responsive design
+
+<ResponsiveDesign
+  element="textarea"
+  property="caret-color"
+  defaultClass="caret-rose-500"
+  featuredClass="caret-lime-600"
+/>
+
+## Customizing your theme
+
+<CustomizingYourThemeColors element="textarea" utility="caret" />

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

@@ -0,0 +1,224 @@
+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 = "clear";
+export const description = "Utilities for controlling the wrapping of content around an element.";
+
+<ApiTable
+  rows={[
+    ["clear-left", "clear: left;"],
+    ["clear-right", "clear: right;"],
+    ["clear-both", "clear: both;"],
+    ["clear-start", "clear: inline-start;"],
+    ["clear-end", "clear: inline-end;"],
+    ["clear-none", "clear: none;"],
+  ]}
+/>
+
+## Examples
+
+### Clearing left
+
+Use the `clear-left` utility to position an element below any preceding left-floated elements:
+
+<Figure>
+
+<Example resizable>
+  {
+    <>
+      <img
+        className="float-left mr-6 mb-4 aspect-16/9 w-1/4 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
+        src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+      />
+      <img
+        className="float-right ml-6 aspect-6/5 w-2/5 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
+        src="https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&h=1000&q=90"
+      />
+      <p className="clear-left text-justify">
+        Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but
+        what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding
+        drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve
+        better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is
+        about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld;
+        maybe that's how y'get your kicks. You and your good-time buddies.
+      </p>
+    </>
+  }
+</Example>
+
+```html
+<!-- [!code classes:clear-left] -->
+<article>
+  <img class="float-left ..." src="/img/snow-mountains.jpg" />
+  <img class="float-right ..." src="/img/green-mountains.jpg" />
+  <p class="clear-left ...">Maybe we can live without libraries...</p>
+</article>
+```
+
+</Figure>
+
+### Clearing right
+
+Use the `clear-right` utility to position an element below any preceding right-floated elements:
+
+<Figure>
+
+<Example resizable>
+  {
+    <>
+      <img
+        className="float-left mr-6 aspect-6/5 w-2/5 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
+        src="https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&h=1000&q=90"
+      />
+      <img
+        className="float-right mb-4 ml-6 aspect-16/9 w-1/4 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
+        src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=formathttps://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&h=1000&q=90"
+      />
+      <p className="clear-right text-justify">
+        Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but
+        what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding
+        drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve
+        better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is
+        about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld;
+        maybe that's how y'get your kicks. You and your good-time buddies.
+      </p>
+    </>
+  }
+</Example>
+
+```html
+<!-- [!code classes:clear-right] -->
+<article>
+  <img class="float-left ..." src="/img/green-mountains.jpg" />
+  <img class="float-right ..." src="/img/snow-mountains.jpg" />
+  <p class="clear-right ...">Maybe we can live without libraries...</p>
+</article>
+```
+
+</Figure>
+
+### Clearing all
+
+Use the `clear-both` utility to position an element below all preceding floated elements:
+
+<Figure>
+
+<Example resizable>
+  {
+    <>
+      <img
+        className="float-left mr-6 mb-4 aspect-16/9 w-1/4 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
+        src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=formathttps://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&h=1000&q=90"
+      />
+      <img
+        className="float-right mb-4 ml-6 aspect-6/5 w-2/5 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
+        src="https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&h=1000&q=90"
+      />
+      <p className="clear-both text-justify">
+        Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but
+        what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding
+        drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve
+        better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is
+        about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld;
+        maybe that's how y'get your kicks. You and your good-time buddies.
+      </p>
+    </>
+  }
+</Example>
+
+```html
+<!-- [!code classes:clear-both] -->
+<article>
+  <img class="float-left ..." src="/img/snow-mountains.jpg" />
+  <img class="float-right ..." src="/img/green-mountains.jpg" />
+  <p class="clear-both ...">Maybe we can live without libraries...</p>
+</article>
+```
+
+</Figure>
+
+### Using logical properties
+
+Use the `clear-start` and `clear-end` utilities, which use [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts) to map to either the left or right side based on the text direction:
+
+<Figure>
+
+<Example resizable>
+  {
+    <div dir="rtl">
+      <img
+        className="float-left mr-6 mb-4 aspect-16/9 w-1/4 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
+        src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+      />
+      <img
+        className="float-right ml-6 aspect-6/5 w-2/5 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
+        src="https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&h=1000&q=90"
+      />
+      <p className="clear-end text-justify">
+        ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد، نحن أكبر من أن نغير العالم، ولكن ماذا عن ذلك
+        الطفل الذي يجلس ويفتح كتابًا الآن في أحد فروع المكتبة المحلية ويجد رسومات للتبول والبول على القطة في القبعة
+        والإخوة الصينيون الخمسة؟ ألا يستحق الأفضل؟ ينظر. إذا كنت تعتقد أن الأمر يتعلق بالغرامات المتأخرة والكتب
+        المفقودة، فمن الأفضل أن تفكر مرة أخرى. يتعلق الأمر بحق ذلك الطفل في قراءة كتاب دون أن يتشوه عقله! أو: ربما يثيرك
+        هذا يا سينفيلد؛ ربما هذه هي الطريقة التي تحصل بها على ركلاتك. أنت ورفاقك الطيبين.
+      </p>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code word:dir="rtl"] -->
+<!-- [!code classes:clear-end] -->
+<article dir="rtl">
+  <img class="float-left ..." src="/img/green-mountains.jpg" />
+  <img class="float-right ..." src="/img/green-mountains.jpg" />
+  <p class="clear-end ...">...ربما يمكننا العيش بدون مكتبات،</p>
+</article>
+```
+
+</Figure>
+
+### Disabling clears
+
+Use the `clear-none` utility to reset any clears that are applied to an element:
+
+<Figure>
+
+<Example resizable>
+  {
+    <>
+      <img
+        className="float-left mr-6 aspect-6/5 w-2/5 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
+        src="https://images.unsplash.com/photo-1434394354979-a235cd36269d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&h=1000&q=90"
+      />
+      <img
+        className="float-right ml-6 aspect-16/9 w-1/4 rounded-lg object-cover outline -outline-offset-1 outline-black/10"
+        src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=formathttps://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&h=1000&q=90"
+      />
+      <p className="text-justify">
+        Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but
+        what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding
+        drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve
+        better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is
+        about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld;
+        maybe that's how y'get your kicks. You and your good-time buddies.
+      </p>
+    </>
+  }
+</Example>
+
+```html
+<!-- [!code classes:clear-none] -->
+<article>
+  <img class="float-left ..." src="/img/green-mountains.jpg" />
+  <img class="float-right ..." src="/img/snow-mountains.jpg" />
+  <p class="clear-none ...">Maybe we can live without libraries...</p>
+</article>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign element="p" property="clear" defaultClass="clear-left" featuredClass="clear-none" />

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

@@ -0,0 +1,81 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { TargetingSpecificStates } from "@/components/content.tsx";
+
+export const title = "color-scheme";
+export const description = "Utilities for controlling the color scheme of an element.";
+
+<ApiTable
+  rows={[
+    ["scheme-normal", "color-scheme: normal;"],
+    ["scheme-dark", "color-scheme: dark;"],
+    ["scheme-light", "color-scheme: light;"],
+    ["scheme-light-dark", "color-scheme: light dark;"],
+    ["scheme-only-dark", "color-scheme: only dark;"],
+    ["scheme-only-light", "color-scheme: only light;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `scheme-light` and `scheme-light-dark` to control how element should be rendered:
+
+<Figure hint="Try switching your system color scheme to see the difference">
+
+<Example>
+  {
+    <div className="flex justify-between gap-8 text-sm max-sm:flex-col">
+      <div className="flex flex-grow flex-col items-center gap-3 text-center scheme-light">
+        <p className="font-mono font-medium text-gray-500 dark:text-gray-400">scheme-light</p>
+        <input
+          type="date"
+          className="w-full rounded-lg border border-gray-950/10 bg-[Field] px-3 py-2 text-[FieldText] dark:border-white/10"
+        />
+      </div>
+      <div className="flex flex-grow flex-col items-center gap-3 text-center scheme-dark">
+        <p className="font-mono font-medium text-gray-500 dark:text-gray-400">scheme-dark</p>
+        <input
+          type="date"
+          className="w-full rounded-lg border border-gray-950/10 bg-[Field] px-3 py-2 text-[FieldText] dark:border-white/10"
+        />
+      </div>
+      <div className="flex flex-grow flex-col items-center gap-3 text-center scheme-light-dark">
+        <p className="font-medium text-gray-500 dark:text-gray-400">scheme-light-dark</p>
+        <input
+          type="date"
+          className="w-full rounded-lg border border-gray-950/10 bg-[Field] px-3 py-2 text-[FieldText] dark:border-white/10"
+        />
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:scheme-light-dark,scheme-light,scheme-dark] -->
+<div class="scheme-light ...">
+  <input type="date" />
+</div>
+
+<div class="scheme-dark ...">
+  <input type="date" />
+</div>
+
+<div class="scheme-light-dark ...">
+  <input type="date" />
+</div>
+```
+
+</Figure>
+
+### Applying in dark mode
+
+<TargetingSpecificStates
+  element="html"
+  property="color-scheme"
+  variant="dark"
+  defaultClass="scheme-light"
+  featuredClass="scheme-dark"
+/>