@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

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

@@ -0,0 +1,214 @@
+import dedent from "dedent";
+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";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "max-width";
+export const description = "Utilities for setting the maximum width of an element.";
+
+<ApiTable
+  rows={[
+    ["max-w-<number>", "max-width: calc(var(--spacing) * <number>);"],
+    ["max-w-<fraction>", "max-width: calc(<fraction> * 100%);"],
+    ["max-w-3xs", "max-width: var(--container-3xs); /* 16rem (256px) */"],
+    ["max-w-2xs", "max-width: var(--container-2xs); /* 18rem (288px) */"],
+    ["max-w-xs", "max-width: var(--container-xs); /* 20rem (320px) */"],
+    ["max-w-sm", "max-width: var(--container-sm); /* 24rem (384px) */"],
+    ["max-w-md", "max-width: var(--container-md); /* 28rem (448px) */"],
+    ["max-w-lg", "max-width: var(--container-lg); /* 32rem (512px) */"],
+    ["max-w-xl", "max-width: var(--container-xl); /* 36rem (576px) */"],
+    ["max-w-2xl", "max-width: var(--container-2xl); /* 42rem (672px) */"],
+    ["max-w-3xl", "max-width: var(--container-3xl); /* 48rem (768px) */"],
+    ["max-w-4xl", "max-width: var(--container-4xl); /* 56rem (896px) */"],
+    ["max-w-5xl", "max-width: var(--container-5xl); /* 64rem (1024px) */"],
+    ["max-w-6xl", "max-width: var(--container-6xl); /* 72rem (1152px) */"],
+    ["max-w-7xl", "max-width: var(--container-7xl); /* 80rem (1280px) */"],
+    ["max-w-none", "max-width: none;"],
+    ["max-w-px", "max-width: 1px;"],
+    ["max-w-full", "max-width: 100%;"],
+    ["max-w-dvw", "max-width: 100dvw;"],
+    ["max-w-dvh", "max-width: 100dvh;"],
+    ["max-w-lvw", "max-width: 100lvw;"],
+    ["max-w-lvh", "max-width: 100lvh;"],
+    ["max-w-svw", "max-width: 100svw;"],
+    ["max-w-svh", "max-width: 100svh;"],
+    ["max-w-screen", "max-width: 100vw;"],
+    ["max-w-min", "max-width: min-content;"],
+    ["max-w-max", "max-width: max-content;"],
+    ["max-w-fit", "max-width: fit-content;"],
+    [
+      "container",
+      dedent`
+        width: 100%;
+        @media (width >= 40rem) { max-width: 40rem; }
+        @media (width >= 48rem) { max-width: 48rem; }
+        @media (width >= 64rem) { max-width: 64rem; }
+        @media (width >= 80rem) { max-width: 80rem; }
+        @media (width >= 96rem) { max-width: 96rem; }
+      `,
+    ],
+    ["max-w-(<custom-property>)", "max-width: var(<custom-property>);"],
+    ["max-w-[<value>]", "max-width: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `max-w-<number>` utilities like `max-w-24` and `max-w-64` to set an element to a fixed maximum width based on the spacing scale:
+
+<Figure hint="Resize the example to see the expected behavior">
+
+<Example resizable>
+  {
+    <div className="align-start grid gap-4 text-center font-mono text-xs font-bold text-white">
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative max-w-96 rounded-lg bg-blue-500 px-4 py-2">max-w-96</div>
+      </div>
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative max-w-80 rounded-lg bg-blue-500 px-4 py-2">max-w-80</div>
+      </div>
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative max-w-64 rounded-lg bg-blue-500 px-4 py-2">max-w-64</div>
+      </div>
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative max-w-48 rounded-lg bg-blue-500 px-4 py-2">max-w-48</div>
+      </div>
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative max-w-40 rounded-lg bg-blue-500 px-4 py-2">max-w-40</div>
+      </div>
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative max-w-32 rounded-lg bg-blue-500 px-4 py-2">max-w-32</div>
+      </div>
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative max-w-24 rounded-lg bg-blue-500 px-4 py-2">max-w-24</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:max-w-96,max-w-80,max-w-64,max-w-48,max-w-40,max-w-32,max-w-24] -->
+<div class="w-full max-w-96 ...">max-w-96</div>
+<div class="w-full max-w-80 ...">max-w-80</div>
+<div class="w-full max-w-64 ...">max-w-64</div>
+<div class="w-full max-w-48 ...">max-w-48</div>
+<div class="w-full max-w-40 ...">max-w-40</div>
+<div class="w-full max-w-32 ...">max-w-32</div>
+<div class="w-full max-w-24 ...">max-w-24</div>
+```
+
+</Figure>
+
+### Using a percentage
+
+Use `max-w-full` or `max-w-<fraction>` utilities like `max-w-1/2` and `max-w-2/5` to give an element a percentage-based maximum width:
+
+<Figure hint="Resize the example to see the expected behavior">
+
+<Example resizable>
+  {
+    <div className="align-start grid gap-4 text-center font-mono text-xs font-bold text-white">
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative max-w-9/10 truncate rounded-lg bg-indigo-500 px-4 py-2 text-nowrap">max-w-9/10</div>
+      </div>
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative max-w-3/4 truncate rounded-lg bg-indigo-500 px-4 py-2 text-nowrap">max-w-3/4</div>
+      </div>
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative max-w-1/2 truncate rounded-lg bg-indigo-500 px-4 py-2 text-nowrap">max-w-1/2</div>
+      </div>
+      <div className="relative grid w-full rounded-lg">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative max-w-1/3 truncate rounded-lg bg-indigo-500 px-4 py-2 text-nowrap">max-w-1/3</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:max-w-3/4,max-w-9/10,max-w-1/2,max-w-1/3] -->
+<div class="w-full max-w-9/10 ...">max-w-9/10</div>
+<div class="w-full max-w-3/4 ...">max-w-3/4</div>
+<div class="w-full max-w-1/2 ...">max-w-1/2</div>
+<div class="w-full max-w-1/3 ...">max-w-1/3</div>
+```
+
+</Figure>
+
+### Using the container scale
+
+Use utilities like `max-w-sm` and `max-w-xl` to set an element to a fixed maximum width based on the container scale:
+
+<Figure hint="Resize the example to see the expected behavior">
+
+<Example resizable>
+  {
+    <div className="dark:highlight-white/5 relative mx-auto flex max-w-md items-center gap-6 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:bg-gray-800">
+      <img
+        className="absolute -left-6 h-28 w-28 rounded-full"
+        src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+      />
+      <div className="min-w-0 py-5 pr-5 pl-28">
+        <div className="truncate text-sm font-medium text-gray-900 sm:text-base dark:text-gray-200">Andrew Alfred</div>
+        <div className="truncate text-sm leading-tight text-gray-500 sm:text-base dark:text-gray-400">
+          Assistant to the Traveling Secretary
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:max-w-md] -->
+<div class="max-w-md ...">
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+### Using breakpoints container
+
+Use the `container` utility to set the maximum width of an element to match the `min-width` of the current breakpoint. This is useful if you'd prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport:
+
+```html
+<!-- [!code classes:container] -->
+<div class="container">
+  <!-- ... -->
+</div>
+```
+
+Note that unlike containers you might have used in other frameworks, Tailwind's container does not center itself automatically and does not have any built-in horizontal padding. Use `mx-auto` and the `px-<number>` utilities to add these:
+
+```html
+<!-- [!code classes:mx-auto,px-4] -->
+<div class="container mx-auto px-4">
+  <!-- ... -->
+</div>
+```
+
+### Using a custom value
+
+<UsingACustomValue utility="max-w" value="220px" name="maximum width" variable="max-width" />
+
+### Responsive design
+
+<ResponsiveDesign property="max-width" defaultClass="max-w-sm" featuredClass="max-w-lg" />
+
+## Customizing your theme
+
+<CustomizingYourSpacingScale utility="max-w" />

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

@@ -0,0 +1,146 @@
+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";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "min-block-size";
+export const description = "Utilities for setting the minimum block size of an element.";
+
+<ApiTable
+  rows={[
+    ["min-block-<number>", "min-block-size: calc(var(--spacing) * <number>);"],
+    ["min-block-<fraction>", "min-block-size: calc(<fraction> * 100%);"],
+    ["min-block-px", "min-block-size: 1px;"],
+    ["min-block-full", "min-block-size: 100%;"],
+    ["min-block-screen", "min-block-size: 100vh;"],
+    ["min-block-dvh", "min-block-size: 100dvh;"],
+    ["min-block-dvw", "min-block-size: 100dvw;"],
+    ["min-block-lvh", "min-block-size: 100lvh;"],
+    ["min-block-lvw", "min-block-size: 100lvw;"],
+    ["min-block-svw", "min-block-size: 100svw;"],
+    ["min-block-svh", "min-block-size: 100svh;"],
+    ["min-block-auto", "min-block-size: auto;"],
+    ["min-block-min", "min-block-size: min-content;"],
+    ["min-block-max", "min-block-size: max-content;"],
+    ["min-block-fit", "min-block-size: fit-content;"],
+    ["min-block-lh", "min-block-size: 1lh;"],
+    ["min-block-(<custom-property>)", "min-block-size: var(<custom-property>);"],
+    ["min-block-[<value>]", "min-block-size: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `min-block-<number>` utilities like `min-block-24` and `min-block-64` to set an element to a fixed minimum block size based on the spacing scale:
+
+<Figure>
+
+<Example>
+  {
+    <div className="mx-auto flex justify-center">
+      <div className="relative flex items-end space-x-4 font-mono text-xs font-bold text-white">
+        <Stripes border className="absolute -inset-x-[5%] w-[110%] rounded-lg block-20" />
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-96">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">min-block-96</div>
+        </div>
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-80">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">min-block-80</div>
+        </div>
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-64">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">min-block-64</div>
+        </div>
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-48">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">min-block-48</div>
+        </div>
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-40">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">min-block-40</div>
+        </div>
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-blue-500 block-32">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">min-block-32</div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:min-block-80,min-block-64,min-block-48,min-block-40,min-block-32,min-block-24] -->
+<div class="block-20 ...">
+  <div class="min-block-80 ...">min-block-80</div>
+  <div class="min-block-64 ...">min-block-64</div>
+  <div class="min-block-48 ...">min-block-48</div>
+  <div class="min-block-40 ...">min-block-40</div>
+  <div class="min-block-32 ...">min-block-32</div>
+</div>
+```
+
+</Figure>
+
+### Using a percentage
+
+Use `min-block-full` or `min-block-<fraction>` utilities like `min-block-1/2`, and `min-block-2/5` to give an element a percentage-based minimum block size:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex items-end justify-center space-x-4 font-mono text-xs font-bold text-white block-96">
+      <div className="relative flex items-end block-full">
+        <Stripes border className="absolute inset-0 rounded-lg block-full" />
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 min-block-full">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">min-block-full</div>
+        </div>
+      </div>
+      <div className="relative flex items-end block-full">
+        <Stripes border className="absolute inset-0 rounded-lg block-full" />
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 min-block-9/10">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">min-block-9/10</div>
+        </div>
+      </div>
+      <div className="relative flex items-end block-full">
+        <Stripes border className="absolute inset-0 rounded-lg block-full" />
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 min-block-3/4">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">min-block-3/4</div>
+        </div>
+      </div>
+      <div className="relative flex items-end block-full">
+        <Stripes border className="absolute inset-0 rounded-lg block-full" />
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 min-block-1/2">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">min-block-1/2</div>
+        </div>
+      </div>
+      <div className="relative flex items-end block-full">
+        <Stripes border className="absolute inset-0 rounded-lg block-full" />
+        <div className="relative flex w-8 items-end justify-center rounded-lg bg-sky-500 min-block-1/3">
+          <div className="mb-1 transform-[rotate(-90deg)_translate(50%)] text-left text-nowrap">min-block-1/3</div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:min-block-9/10,min-block-3/4,min-block-1/2,min-block-1/3,min-block-full] -->
+<div class="min-block-full ...">min-block-full</div>
+<div class="min-block-9/10 ...">min-block-9/10</div>
+<div class="min-block-3/4 ...">min-block-3/4</div>
+<div class="min-block-1/2 ...">min-block-1/2</div>
+<div class="min-block-1/3 ...">min-block-1/3</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="min-block" value="220px" name="minimum block size" variable="min-block-size" />
+
+### Responsive design
+
+<ResponsiveDesign property="min-block-size" defaultClass="block-24 min-block-0" featuredClass="min-block-full" />
+
+## Customizing your theme
+
+<CustomizingYourSpacingScale utility="min-block" />

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

@@ -0,0 +1,150 @@
+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";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "min-height";
+export const description = "Utilities for setting the minimum height of an element.";
+
+<ApiTable
+  rows={[
+    ["min-h-<number>", "min-height: calc(var(--spacing) * <number>);"],
+    ["min-h-<fraction>", "min-height: calc(<fraction> * 100%);"],
+    ["min-h-px", "min-height: 1px;"],
+    ["min-h-full", "min-height: 100%;"],
+    ["min-h-screen", "min-height: 100vh;"],
+    ["min-h-dvh", "min-height: 100dvh;"],
+    ["min-h-dvw", "min-height: 100dvw;"],
+    ["min-h-lvh", "min-height: 100lvh;"],
+    ["min-h-lvw", "min-height: 100lvw;"],
+    ["min-h-svw", "min-height: 100svw;"],
+    ["min-h-svh", "min-height: 100svh;"],
+    ["min-h-auto", "min-height: auto;"],
+    ["min-h-min", "min-height: min-content;"],
+    ["min-h-max", "min-height: max-content;"],
+    ["min-h-fit", "min-height: fit-content;"],
+    ["min-h-lh", "min-height: 1lh;"],
+    ["min-h-(<custom-property>)", "min-height: var(<custom-property>);"],
+    ["min-h-[<value>]", "min-height: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `min-h-<number>` utilities like `min-h-24` and `min-h-64` to set an element to a fixed minimum height based on the spacing scale:
+
+<Figure>
+
+<Example>
+  {
+    <div className="mx-auto flex justify-center">
+      <div className="relative flex items-end space-x-4 font-mono text-xs font-bold text-white">
+        <Stripes border className="absolute -inset-x-[5%] h-20 w-[110%] rounded-lg" />
+        <div className="relative flex h-96 w-8 items-end justify-center rounded-lg bg-blue-500">
+          <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-96</div>
+        </div>
+        <div className="relative flex h-80 w-8 items-end justify-center rounded-lg bg-blue-500">
+          <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-80</div>
+        </div>
+        <div className="relative flex h-64 w-8 items-end justify-center rounded-lg bg-blue-500">
+          <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-64</div>
+        </div>
+        <div className="relative flex h-48 w-8 items-end justify-center rounded-lg bg-blue-500">
+          <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-48</div>
+        </div>
+        <div className="relative flex h-40 w-8 items-end justify-center rounded-lg bg-blue-500">
+          <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-40</div>
+        </div>
+        <div className="relative flex h-32 w-8 items-end justify-center rounded-lg bg-blue-500">
+          <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-32</div>
+        </div>
+        <div className="relative flex h-24 w-8 items-end justify-center rounded-lg bg-blue-500">
+          <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-24</div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:min-h-80,min-h-64,min-h-48,min-h-40,min-h-32,min-h-24,min-h-full] -->
+<div class="h-20 ...">
+  <div class="min-h-80 ...">min-h-80</div>
+  <div class="min-h-64 ...">min-h-64</div>
+  <div class="min-h-48 ...">min-h-48</div>
+  <div class="min-h-40 ...">min-h-40</div>
+  <div class="min-h-32 ...">min-h-32</div>
+  <div class="min-h-24 ...">min-h-24</div>
+</div>
+```
+
+</Figure>
+
+### Using a percentage
+
+Use `min-h-full` or `min-h-<fraction>` utilities like `min-h-1/2`, and `min-h-2/5` to give an element a percentage-based minimum height:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex h-96 items-end justify-center space-x-4 font-mono text-xs font-bold text-white">
+      <div className="relative flex h-full items-end">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative flex min-h-full w-8 items-end justify-center rounded-lg bg-sky-500">
+          <div className="mb-10 -rotate-90 text-left text-nowrap">min-h-full</div>
+        </div>
+      </div>
+      <div className="relative flex h-full items-end">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative flex min-h-9/10 w-8 items-end justify-center rounded-lg bg-sky-500">
+          <div className="mb-10 -rotate-90 text-left text-nowrap">min-h-9/10</div>
+        </div>
+      </div>
+      <div className="relative flex h-full items-end">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative flex min-h-3/4 w-8 items-end justify-center rounded-lg bg-sky-500">
+          <div className="mb-10 -rotate-90 text-left text-nowrap">min-h-3/4</div>
+        </div>
+      </div>
+      <div className="relative flex h-full items-end">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative flex min-h-1/2 w-8 items-end justify-center rounded-lg bg-sky-500">
+          <div className="mb-10 -rotate-90 text-left text-nowrap">min-h-1/2</div>
+        </div>
+      </div>
+      <div className="relative flex h-full items-end">
+        <Stripes border className="absolute inset-0 h-full rounded-lg" />
+        <div className="relative flex min-h-1/3 w-8 items-end justify-center rounded-lg bg-sky-500">
+          <div className="mb-10 -rotate-90 text-left text-nowrap">min-h-1/3</div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:min-h-9/10,min-h-3/4,min-h-1/2,min-h-1/3,min-h-full] -->
+<div class="min-h-full ...">min-h-full</div>
+<div class="min-h-9/10 ...">min-h-9/10</div>
+<div class="min-h-3/4 ...">min-h-3/4</div>
+<div class="min-h-1/2 ...">min-h-1/2</div>
+<div class="min-h-1/3 ...">min-h-1/3</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="min-h" value="220px" name="minimum height" variable="min-height" />
+
+### Responsive design
+
+<ResponsiveDesign property="min-height" defaultClass="h-24 min-h-0" featuredClass="min-h-full" />
+
+## Customizing your theme
+
+<CustomizingYourSpacingScale utility="min-h" />

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

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