@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

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

@@ -0,0 +1,114 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { ResponsiveDesign } 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 = "mask-mode";
+export const description = "Utilities for controlling an element's mask mode.";
+
+<svg className="sr-only">
+  <defs>
+    <pattern id="checkerboard" x="0.5" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
+      <rect x="0" y="0" width="5" height="5" fill="#fff" />
+      <rect x="5" y="0" width="5" height="5" fill="#808080" />
+      <rect x="0" y="5" width="5" height="5" fill="#808080" />
+      <rect x="5" y="5" width="5" height="5" fill="#fff" />
+    </pattern>
+  </defs>
+</svg>
+
+<svg className="hidden">
+  <symbol id="gradient-color-stop" viewBox="0 0 32 34">
+    <path
+      fill="url(#checkerboard)"
+      stroke="#000"
+      strokeOpacity=".05"
+      d="M5 .5h22A3.5 3.5 0 0 1 30.5 4v19.6a3.5 3.5 0 0 1-1.853 3.088L16 33.433 3.353 26.688A3.5 3.5 0 0 1 1.5 23.6V4A3.5 3.5 0 0 1 5 .5Z"
+    />
+    <path
+      fill="currentColor"
+      d="M1 4a4 4 0 0 1 4-4h22a4 4 0 0 1 4 4v19.6a4 4 0 0 1-2.118 3.53L16 34 3.118 27.13A4 4 0 0 1 1 23.6V4Z"
+    />
+  </symbol>
+</svg>
+
+<ApiTable
+  rows={[
+    ["mask-alpha", "mask-mode: alpha;"],
+    ["mask-luminance", "mask-mode: luminance;"],
+    ["mask-match", "mask-mode: match-source;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use the `mask-alpha`, `mask-luminance` and `mask-match` utilities to control the mode of an element's mask:
+
+<Figure>
+
+<Example>
+  {
+    <div className="mx-5 grid gap-10 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+      <div>
+        <div className="relative h-[3.625rem]">
+          <div className="absolute top-0 left-[50%] -ml-3 flex h-12 flex-col items-center">
+            <svg viewBox="0 0 32 34" className="w-7 flex-none text-black drop-shadow-sm dark:stroke-white/10">
+              <use href="#gradient-color-stop" />
+            </svg>
+            <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
+          </div>
+          <div className="absolute top-0 right-px -mr-3 flex h-12 flex-col items-center">
+            <svg viewBox="0 0 32 34" className="w-7 flex-none text-transparent drop-shadow-sm dark:stroke-white/10">
+              <use href="#gradient-color-stop" />
+            </svg>
+            <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
+          </div>
+        </div>
+        <div className="relative">
+          <div className="relative z-10 h-24 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-r-from-black mask-r-from-50% mask-r-to-transparent bg-cover bg-center mask-alpha"></div>
+          <Stripes className="absolute inset-0 rounded-lg" border />
+        </div>
+        <p className="mt-3">mask-alpha</p>
+      </div>
+      <div>
+        <div className="relative h-[3.625rem]">
+          <div className="absolute top-0 left-[50%] -ml-3 flex h-12 flex-col items-center">
+            <svg viewBox="0 0 32 34" className="w-7 flex-none text-white drop-shadow-sm dark:stroke-white/10">
+              <use href="#gradient-color-stop" />
+            </svg>
+            <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
+          </div>
+          <div className="absolute top-0 right-px -mr-3 flex h-12 flex-col items-center">
+            <svg viewBox="0 0 32 34" className="w-7 flex-none text-black drop-shadow-sm dark:stroke-white/10">
+              <use href="#gradient-color-stop" />
+            </svg>
+            <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
+          </div>
+        </div>
+        <div className="relative">
+          <div className="relative z-10 h-24 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-r-from-white mask-r-from-50% mask-r-to-black bg-cover bg-center mask-luminance"></div>
+          <Stripes className="absolute inset-0 rounded-lg" border />
+        </div>
+        <p className="mt-3">mask-luminance</p>
+      </div>
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:mask-alpha,mask-luminance] -->
+<div class="mask-alpha mask-r-from-black mask-r-from-50% mask-r-to-transparent bg-[url(/img/mountains.jpg)] ..."></div>
+<div class="mask-luminance mask-r-from-white mask-r-from-50% mask-r-to-black bg-[url(/img/mountains.jpg)] ..."></div>
+```
+
+</Figure>
+
+When using `mask-luminance` the luminance value of the mask determines visibility, so sticking with grayscale colors will produce the most predictable results. With `mask-alpha`, the opacity of the mask determines the visibility of the masked element.
+
+### Responsive design
+
+<ResponsiveDesign property="mask-mode" defaultClass="mask-alpha" featuredClass="mask-luminance" />

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

@@ -0,0 +1,66 @@
+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 = "mask-origin";
+export const description =
+  "Utilities for controlling how an element's mask image is positioned relative to borders, padding, and content.";
+
+<ApiTable
+  rows={[
+    ["mask-origin-border", "mask-origin: border-box;"],
+    ["mask-origin-padding", "mask-origin: padding-box;"],
+    ["mask-origin-content", "mask-origin: content-box;"],
+    ["mask-origin-fill", "mask-origin: fill-box;"],
+    ["mask-origin-stroke", "mask-origin: stroke-box;"],
+    ["mask-origin-view", "mask-origin: view-box;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `mask-origin-border`, `mask-origin-padding`, and `mask-origin-content` to control where an element's mask is rendered:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col gap-y-10 text-center font-mono text-xs font-medium text-gray-500 sm:flex-row sm:justify-between dark:text-gray-400">
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3">mask-origin-border</p>
+        <div className="relative size-24 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75">
+          <div className="absolute -inset-[3px] bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-no-repeat mask-origin-border p-1.5"></div>
+        </div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3">mask-origin-padding</p>
+        <div className="relative size-24 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75">
+          <div className="absolute -inset-[3px] rounded-lg border-3 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-no-repeat mask-origin-padding p-1.5"></div>
+        </div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3">mask-origin-content</p>
+        <div className="relative size-24 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75">
+          <div className="absolute -inset-[3px] rounded-lg border-3 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-no-repeat mask-origin-content p-1.5"></div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:mask-origin-border,mask-origin-padding,mask-origin-content] -->
+<div class="mask-origin-border border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
+<div class="mask-origin-padding border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
+<div class="mask-origin-content border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="mask-origin" defaultClass="mask-origin-border" featuredClass="mask-origin-padding" />

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

@@ -0,0 +1,117 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "mask-position";
+export const description = "Utilities for controlling the position of an element's mask image.";
+
+<ApiTable
+  rows={[
+    ["mask-top-left", "mask-position: top left;"],
+    ["mask-top", "mask-position: top;"],
+    ["mask-top-right", "mask-position: top right;"],
+    ["mask-left", "mask-position: left;"],
+    ["mask-center", "mask-position: center;"],
+    ["mask-right", "mask-position: right;"],
+    ["mask-bottom-left", "mask-position: bottom left;"],
+    ["mask-bottom", "mask-position: bottom;"],
+    ["mask-bottom-right", "mask-position: bottom right;"],
+    ["mask-position-(<custom-property>)", "mask-position: var(<custom-property>);"],
+    ["mask-position-[<value>]", "mask-position: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `mask-center`, `mask-right`, and `mask-left-top` to control the position of an element's mask image:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="grid grid-cols-3 gap-y-8 p-8 text-center font-mono text-xs font-medium text-gray-500 max-sm:items-end max-sm:justify-between max-sm:px-2 dark:text-gray-400">
+      <div className="flex flex-col items-center">
+        <p className="mb-3">mask-top-left</p>
+        <Stripes className="aspect-[1.333] w-32 rounded-lg max-sm:w-24" border>
+          <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-70% mask-radial-to-70% bg-cover bg-center mask-size-[50%_66%] mask-top-left mask-no-repeat"></div>
+        </Stripes>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3">mask-top</p>
+        <Stripes className="aspect-[1.333] w-32 rounded-lg max-sm:w-24" border>
+          <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-70% mask-radial-to-70% bg-cover bg-center mask-size-[50%_66%] mask-top mask-no-repeat"></div>
+        </Stripes>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3">mask-top-right</p>
+        <Stripes className="aspect-[1.333] w-32 rounded-lg max-sm:w-24" border>
+          <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-70% mask-radial-to-70% bg-cover bg-center mask-size-[50%_66%] mask-top-right mask-no-repeat"></div>
+        </Stripes>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3">mask-left</p>
+        <Stripes className="aspect-[1.333] w-32 rounded-lg max-sm:w-24" border>
+          <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-70% mask-radial-to-70% bg-cover bg-center mask-size-[50%_66%] mask-left mask-no-repeat"></div>
+        </Stripes>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3">mask-center</p>
+        <Stripes className="aspect-[1.333] w-32 rounded-lg max-sm:w-24" border>
+          <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-70% mask-radial-to-70% bg-cover bg-center mask-size-[50%_66%] mask-center mask-no-repeat"></div>
+        </Stripes>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3">mask-right</p>
+        <Stripes className="aspect-[1.333] w-32 rounded-lg max-sm:w-24" border>
+          <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-70% mask-radial-to-70% bg-cover bg-center mask-size-[50%_66%] mask-right mask-no-repeat"></div>
+        </Stripes>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3">mask-bottom-left</p>
+        <Stripes className="aspect-[1.333] w-32 rounded-lg max-sm:w-24" border>
+          <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-70% mask-radial-to-70% bg-cover bg-center mask-size-[50%_66%] mask-bottom-left mask-no-repeat"></div>
+        </Stripes>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3">mask-bottom</p>
+        <Stripes className="aspect-[1.333] w-32 rounded-lg max-sm:w-24" border>
+          <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-70% mask-radial-to-70% bg-cover bg-center mask-size-[50%_66%] mask-bottom mask-no-repeat"></div>
+        </Stripes>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3">mask-bottom-right</p>
+        <Stripes className="aspect-[1.333] w-32 rounded-lg max-sm:w-24" border>
+          <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-70% mask-radial-to-70% bg-cover bg-center mask-size-[50%_66%] mask-bottom-right mask-no-repeat"></div>
+        </Stripes>
+      </div>
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:mask-top-left,mask-top,mask-top-right,mask-left,mask-center,mask-right,mask-bottom-left,mask-bottom,mask-bottom-right] -->
+<div class="mask-top-left mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
+<div class="mask-top mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
+<div class="mask-top-right mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
+<div class="mask-left mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
+<div class="mask-center mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
+<div class="mask-right mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
+<div class="mask-bottom-left mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
+<div class="mask-bottom mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
+<div class="mask-bottom-right mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ..."></div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="mask-position" value="center_top_1rem" name="mask position" variable="mask-position" />
+
+### Responsive design
+
+<ResponsiveDesign property="mask-position" defaultClass="mask-center" featuredClass="mask-top" />

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

@@ -0,0 +1,169 @@
+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 = "mask-repeat";
+export const description = "Utilities for controlling the repetition of an element's mask image.";
+
+<ApiTable
+  rows={[
+    ["mask-repeat", "mask-repeat: repeat;"],
+    ["mask-no-repeat", "mask-repeat: no-repeat;"],
+    ["mask-repeat-x", "mask-repeat: repeat-x;"],
+    ["mask-repeat-y", "mask-repeat: repeat-y;"],
+    ["mask-repeat-space", "mask-repeat: space;"],
+    ["mask-repeat-round", "mask-repeat: round;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use the `mask-repeat` utility to repeat the mask image both vertically and horizontally:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col py-8">
+      <Stripes className="h-40 w-full rounded-lg" border>
+        <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-side bg-cover bg-center mask-size-[50px_50px] mask-center mask-repeat"></div>
+      </Stripes>
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:mask-repeat] -->
+<div class="mask-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>
+```
+
+</Figure>
+
+### Repeating horizontally
+
+Use the `mask-repeat-x` utility to only repeat the mask image horizontally:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col py-8">
+      <Stripes className="h-40 w-full rounded-lg" border>
+        <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-side bg-cover bg-center mask-size-[50px_50px] mask-center mask-repeat-x"></div>
+      </Stripes>
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:mask-repeat-x] -->
+<div class="mask-repeat-x mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>
+```
+
+</Figure>
+
+### Repeating vertically
+
+Use the `mask-repeat-y` utility to only repeat the mask image vertically:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col py-8">
+      <Stripes className="h-40 w-full rounded-lg" border>
+        <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-side bg-cover bg-center mask-size-[50px_50px] mask-center mask-repeat-y"></div>
+      </Stripes>
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:mask-repeat-y] -->
+<div class="mask-repeat-y mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>
+```
+
+</Figure>
+
+### Preventing clipping
+
+Use the `mask-repeat-space` utility to repeat the mask image without clipping:
+
+<Figure>
+
+<Example resizable>
+  {
+    <div className="flex flex-col py-8">
+      <Stripes className="h-40 w-full rounded-lg" border>
+        <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-side bg-cover bg-center mask-size-[50px_50px] mask-repeat-space"></div>
+      </Stripes>
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:mask-repeat-space] -->
+<div class="mask-repeat-space mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>
+```
+
+</Figure>
+
+### Preventing clipping and gaps
+
+Use the `mask-repeat-round` utility to repeat the mask image without clipping, stretching if needed to avoid gaps:
+
+<Figure>
+
+<Example resizable>
+  {
+    <div className="flex flex-col py-8">
+      <Stripes className="h-40 w-full rounded-lg" border>
+        <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-side bg-cover bg-center mask-size-[50px_50px] mask-repeat-round"></div>
+      </Stripes>
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:mask-repeat-round] -->
+<div class="mask-repeat-round mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>
+```
+
+</Figure>
+
+### Disabling repeating
+
+Use the `mask-no-repeat` utility to prevent a mask image from repeating:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col py-8">
+      <Stripes className="h-40 w-full rounded-lg" border>
+        <div className="h-full rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-from-100% mask-radial-closest-side bg-cover bg-center mask-size-[50px_50px] mask-center mask-no-repeat"></div>
+      </Stripes>
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:mask-no-repeat] -->
+<div class="mask-no-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="mask-repeat" defaultClass="mask-repeat" featuredClass="mask-repeat-x" />

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

@@ -0,0 +1,104 @@
+import maskImg from "@/docs/img/mask.png";
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "mask-size";
+export const description = "Utilities for controlling the size of an element's mask image.";
+
+<ApiTable
+  rows={[
+    ["mask-auto", "mask-size: auto;"],
+    ["mask-cover", "mask-size: cover;"],
+    ["mask-contain", "mask-size: contain;"],
+    ["mask-size-(<custom-property>)", "mask-size: var(<custom-property>);"],
+    ["mask-size-[<value>]", "mask-size: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Filling the container
+
+Use the `mask-cover` utility to scale the mask image until it fills the mask layer, cropping the image if needed:
+
+<Figure>
+
+<Example>
+  {
+    <Stripes border className="mx-auto h-48 w-96 overflow-hidden rounded-lg sm:w-96">
+      <div
+        className="h-full w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] bg-cover bg-center bg-no-repeat mask-cover mask-center"
+        style={{ maskImage: `url(${maskImg.src})` }}
+      ></div>
+    </Stripes>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:mask-cover] -->
+<div class="mask-cover mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>
+```
+
+</Figure>
+
+### Filling without cropping
+
+Use the `mask-contain` utility to scale the mask image to the outer edges without cropping or stretching:
+
+<Figure>
+
+<Example>
+  {
+    <Stripes border className="mx-auto h-48 w-96 overflow-hidden rounded-lg sm:w-96">
+      <div
+        className="h-full w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] bg-cover bg-center bg-no-repeat mask-contain mask-center mask-no-repeat"
+        style={{ maskImage: `url(${maskImg.src})` }}
+      ></div>
+    </Stripes>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:mask-contain] -->
+<div class="mask-contain mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>
+```
+
+</Figure>
+
+### Using the default size
+
+Use the `mask-auto` utility to display the mask image at its default size:
+
+<Figure>
+
+<Example>
+  {
+    <Stripes border className="mx-auto h-48 w-96 overflow-hidden rounded-lg sm:w-96">
+      <div
+        className="h-full w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] bg-cover bg-center bg-no-repeat mask-auto mask-center mask-no-repeat"
+        style={{ maskImage: `url(${maskImg.src})` }}
+      ></div>
+    </Stripes>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:mask-auto] -->
+<div class="mask-auto mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="mask-size" value="auto_100px" name="mask image size" variable="mask-size" />
+
+### Responsive design
+
+<ResponsiveDesign property="mask-size" defaultClass="mask-auto" featuredClass="mask-contain" />