@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/min-width.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-width";
+export const description = "Utilities for setting the minimum width of an element.";
+
+<ApiTable
+  rows={[
+    ["min-w-<number>", "min-width: calc(var(--spacing) * <number>);"],
+    ["min-w-<fraction>", "min-width: calc(<fraction> * 100%);"],
+    ["min-w-3xs", "min-width: var(--container-3xs); /* 16rem (256px) */"],
+    ["min-w-2xs", "min-width: var(--container-2xs); /* 18rem (288px) */"],
+    ["min-w-xs", "min-width: var(--container-xs); /* 20rem (320px) */"],
+    ["min-w-sm", "min-width: var(--container-sm); /* 24rem (384px) */"],
+    ["min-w-md", "min-width: var(--container-md); /* 28rem (448px) */"],
+    ["min-w-lg", "min-width: var(--container-lg); /* 32rem (512px) */"],
+    ["min-w-xl", "min-width: var(--container-xl); /* 36rem (576px) */"],
+    ["min-w-2xl", "min-width: var(--container-2xl); /* 42rem (672px) */"],
+    ["min-w-3xl", "min-width: var(--container-3xl); /* 48rem (768px) */"],
+    ["min-w-4xl", "min-width: var(--container-4xl); /* 56rem (896px) */"],
+    ["min-w-5xl", "min-width: var(--container-5xl); /* 64rem (1024px) */"],
+    ["min-w-6xl", "min-width: var(--container-6xl); /* 72rem (1152px) */"],
+    ["min-w-7xl", "min-width: var(--container-7xl); /* 80rem (1280px) */"],
+    ["min-w-auto", "min-width: auto;"],
+    ["min-w-px", "min-width: 1px;"],
+    ["min-w-full", "min-width: 100%;"],
+    ["min-w-screen", "min-width: 100vw;"],
+    ["min-w-dvw", "min-width: 100dvw;"],
+    ["min-w-dvh", "min-width: 100dvh;"],
+    ["min-w-lvw", "min-width: 100lvw;"],
+    ["min-w-lvh", "min-width: 100lvh;"],
+    ["min-w-svw", "min-width: 100svw;"],
+    ["min-w-svh", "min-width: 100svh;"],
+    ["min-w-min", "min-width: min-content;"],
+    ["min-w-max", "min-width: max-content;"],
+    ["min-w-fit", "min-width: fit-content;"],
+    ["min-w-(<custom-property>)", "min-width: var(<custom-property>);"],
+    ["min-w-[<value>]", "min-width: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `min-w-<number>` utilities like `min-w-24` and `min-w-64` to set an element to a fixed minimum width 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 min-w-80 rounded-lg bg-sky-500 px-4 py-2">min-w-80</div>
+      <div className="relative min-w-64 rounded-lg bg-sky-500 px-4 py-2">min-w-64</div>
+      <div className="relative min-w-48 rounded-lg bg-sky-500 px-4 py-2">min-w-48</div>
+      <div className="relative min-w-40 rounded-lg bg-sky-500 px-4 py-2">min-w-40</div>
+      <div className="relative min-w-32 rounded-lg bg-sky-500 px-4 py-2">min-w-32</div>
+      <div className="relative min-w-24 rounded-lg bg-sky-500 px-4 py-2">min-w-24</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:min-w-96,min-w-80,min-w-64,min-w-48,min-w-40,min-w-32,min-w-24,min-w-full] -->
+<div class="w-20 ...">
+  <div class="min-w-80 ...">min-w-80</div>
+  <div class="min-w-64 ...">min-w-64</div>
+  <div class="min-w-48 ...">min-w-48</div>
+  <div class="min-w-40 ...">min-w-40</div>
+  <div class="min-w-32 ...">min-w-32</div>
+  <div class="min-w-24 ...">min-w-24</div>
+</div>
+```
+
+</Figure>
+
+### Using a percentage
+
+Use `min-w-full` or `min-w-<fraction>` utilities like `min-w-1/2` and `min-w-2/5` to give an element a percentage-based minimum width:
+
+<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 min-w-2/3 rounded-lg bg-indigo-500 px-4 py-2">min-w-3/4</div>
+      <div className="relative w-full rounded-lg bg-indigo-300 px-4 py-2 dark:bg-indigo-800 dark:text-indigo-400">
+        w-full
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:min-w-3/4] -->
+<div class="flex ...">
+  <div class="min-w-3/4 ...">min-w-3/4</div>
+  <div class="w-full ...">w-full</div>
+</div>
+```
+
+</Figure>
+
+### Using the container scale
+
+Use utilities like `min-w-sm` and `min-w-xl` to set an element to a fixed minimum width 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 min-w-lg rounded-lg bg-blue-500 px-4 py-2 sm:block">min-w-lg</div>
+      <div className="relative hidden min-w-md rounded-lg bg-blue-500 px-4 py-2 sm:block">min-w-md</div>
+      <div className="relative hidden min-w-sm rounded-lg bg-blue-500 px-4 py-2 sm:block">min-w-sm</div>
+      <div className="relative min-w-xs rounded-lg bg-blue-500 px-4 py-2">min-w-xs</div>
+      <div className="relative min-w-2xs rounded-lg bg-blue-500 px-4 py-2">min-w-2xs</div>
+      <div className="relative min-w-3xs rounded-lg bg-blue-500 px-4 py-2">min-w-3xs</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:min-w-lg,min-w-md,min-w-sm,min-w-xs,min-w-2xs,min-w-3xs] -->
+<div class="w-40 ...">
+  <div class="min-w-lg ...">min-w-lg</div>
+  <div class="min-w-md ...">min-w-md</div>
+  <div class="min-w-sm ...">min-w-sm</div>
+  <div class="min-w-xs ...">min-w-xs</div>
+  <div class="min-w-2xs ...">min-w-2xs</div>
+  <div class="min-w-3xs ...">min-w-3xs</div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="min-w" value="220px" name="minimum width" variable="min-width" />
+
+### Responsive design
+
+<ResponsiveDesign property="min-width" defaultClass="w-24 min-w-full" featuredClass="min-w-0" />
+
+## Customizing your theme
+
+<CustomizingYourSpacingScale utility="min-w" />

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

@@ -0,0 +1,103 @@
+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 = "mix-blend-mode";
+export const description = "Utilities for controlling how an element should blend with the background.";
+
+<ApiTable
+  rows={[
+    ["mix-blend-normal", "mix-blend-mode: normal;"],
+    ["mix-blend-multiply", "mix-blend-mode: multiply;"],
+    ["mix-blend-screen", "mix-blend-mode: screen;"],
+    ["mix-blend-overlay", "mix-blend-mode: overlay;"],
+    ["mix-blend-darken", "mix-blend-mode: darken;"],
+    ["mix-blend-lighten", "mix-blend-mode: lighten;"],
+    ["mix-blend-color-dodge", "mix-blend-mode: color-dodge;"],
+    ["mix-blend-color-burn", "mix-blend-mode: color-burn;"],
+    ["mix-blend-hard-light", "mix-blend-mode: hard-light;"],
+    ["mix-blend-soft-light", "mix-blend-mode: soft-light;"],
+    ["mix-blend-difference", "mix-blend-mode: difference;"],
+    ["mix-blend-exclusion", "mix-blend-mode: exclusion;"],
+    ["mix-blend-hue", "mix-blend-mode: hue;"],
+    ["mix-blend-saturation", "mix-blend-mode: saturation;"],
+    ["mix-blend-color", "mix-blend-mode: color;"],
+    ["mix-blend-luminosity", "mix-blend-mode: luminosity;"],
+    ["mix-blend-plus-darker", "mix-blend-mode: plus-darker;"],
+    ["mix-blend-plus-lighter", "mix-blend-mode: plus-lighter;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `mix-blend-overlay` and `mix-blend-soft-light` to control how an element's content and background is blended with other content in the same stacking context:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1 py-4">
+      <div className="col-start-1 row-start-1 flex justify-center -space-x-14">
+        <div className="size-32 rounded-full bg-blue-500 mix-blend-multiply"></div>
+        <div className="size-32 rounded-full bg-pink-500 mix-blend-multiply"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:mix-blend-multiply] -->
+<div class="flex justify-center -space-x-14">
+  <div class="bg-blue-500 mix-blend-multiply ..."></div>
+  <div class="bg-pink-500 mix-blend-multiply ..."></div>
+</div>
+```
+
+</Figure>
+
+### Isolating blending
+
+Use the `isolate` utility on the parent element to create a new stacking context and prevent blending with content behind it:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes className="col-start-1 row-start-1" />
+      <div className="col-start-1 row-start-1 grid grid-cols-2 px-0 py-12 sm:px-16">
+        <div className="isolate flex justify-center -space-x-14">
+          <div className="size-24 rounded-full bg-yellow-500 mix-blend-multiply"></div>
+          <div className="size-24 rounded-full bg-green-500 mix-blend-multiply"></div>
+        </div>
+        <div className="flex justify-center -space-x-14">
+          <div className="size-24 rounded-full bg-yellow-500 mix-blend-multiply"></div>
+          <div className="size-24 rounded-full bg-green-500 mix-blend-multiply"></div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:mix-blend-multiply,isolate] -->
+<div class="isolate flex justify-center -space-x-14">
+  <div class="bg-yellow-500 mix-blend-multiply ..."></div>
+  <div class="bg-green-500 mix-blend-multiply ..."></div>
+</div>
+
+<div class="flex justify-center -space-x-14">
+  <div class="bg-yellow-500 mix-blend-multiply ..."></div>
+  <div class="bg-green-500 mix-blend-multiply ..."></div>
+</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="mix-blend-mode" defaultClass="mix-blend-multiply" featuredClass="mix-blend-overlay" />

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

@@ -0,0 +1,147 @@
+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 = "object-fit";
+export const description = "Utilities for controlling how a replaced element's content should be resized.";
+
+<ApiTable
+  rows={[
+    ["object-contain", "object-fit: contain;"],
+    ["object-cover", "object-fit: cover;"],
+    ["object-fill", "object-fit: fill;"],
+    ["object-none", "object-fit: none;"],
+    ["object-scale-down", "object-fit: scale-down;"],
+  ]}
+/>
+
+## Examples
+
+### Resizing to cover
+
+Use the `object-cover` utility to resize an element's content to cover its container:
+
+<Figure>
+
+<Example>
+  {
+    <img
+      className="mx-auto h-48 w-96 rounded-lg object-cover"
+      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"
+    />
+  }
+</Example>
+
+```html
+<!-- [!code classes:object-cover] -->
+<img class="h-48 w-96 object-cover ..." src="/img/mountains.jpg" />
+```
+
+</Figure>
+
+### Containing within
+
+Use the `object-contain` utility to resize an element's content to stay contained within its container:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative mx-auto w-96">
+      <Stripes border className="absolute inset-0 h-full rounded-lg" />
+      <img
+        className="relative h-48 w-full object-contain"
+        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"
+      />
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:object-contain] -->
+<img class="h-48 w-96 object-contain ..." src="/img/mountains.jpg" />
+```
+
+</Figure>
+
+### Stretching to fit
+
+Use the `object-fill` utility to stretch an element's content to fit its container:
+
+<Figure>
+
+<Example>
+  {
+    <img
+      className="mx-auto h-48 w-96 rounded-lg object-fill"
+      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"
+    />
+  }
+</Example>
+
+```html
+<!-- [!code classes:object-fill] -->
+<img class="h-48 w-96 object-fill ..." src="/img/mountains.jpg" />
+```
+
+</Figure>
+
+### Scaling down
+
+Use the `object-scale-down` utility to display an element's content at its original size but scale it down to fit its container if necessary:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative mx-auto w-96 rounded-lg">
+      <Stripes border className="absolute inset-0 h-full rounded-lg" />
+      <img
+        className="relative h-48 w-full object-scale-down"
+        src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=128&h=160&q=80"
+      />
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:object-scale-down] -->
+<img class="h-48 w-96 object-scale-down ..." src="/img/mountains.jpg" />
+```
+
+</Figure>
+
+### Using the original size
+
+Use the `object-none` utility to display an element's content at its original size ignoring the container size:
+
+<Figure>
+
+<Example>
+  {
+    <img
+      className="mx-auto h-48 w-96 rounded-lg object-none"
+      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"
+    />
+  }
+</Example>
+
+```html
+<!-- [!code classes:object-none] -->
+<img class="h-48 w-96 object-none ..." src="/img/mountains.jpg" />
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="object-fit">
+
+```html
+<!-- [!code classes:md:object-cover] -->
+<img class="object-contain md:object-cover" src="/img/mountains.jpg" />
+```
+
+</ResponsiveDesign>

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

@@ -0,0 +1,182 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { UsingACustomValue, ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "object-position";
+export const description =
+  "Utilities for controlling how a replaced element's content should be positioned within its container.";
+
+<ApiTable
+  rows={[
+    ["object-top-left", "object-position: top left;"],
+    ["object-top", "object-position: top;"],
+    ["object-top-right", "object-position: top right;"],
+    ["object-left", "object-position: left;"],
+    ["object-center", "object-position: center;"],
+    ["object-right", "object-position: right;"],
+    ["object-bottom-left", "object-position: bottom left;"],
+    ["object-bottom", "object-position: bottom;"],
+    ["object-bottom-right", "object-position: bottom right;"],
+    ["object-(<custom-property>)", "object-position: var(<custom-property>);"],
+    ["object-[<value>]", "object-position: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `object-left` and `object-bottom-right` to specify how a replaced element's content should be positioned within its container:
+
+<Figure hint="Hover over examples to see the full image">
+
+<Example padding={false}>
+  {
+    <div className="flex snap-x scroll-p-4 items-end overflow-x-scroll overflow-y-hidden p-8 pt-16 sm:grid sm:grid-cols-3 sm:gap-16">
+      <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
+        <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          object-top-left
+        </p>
+        <div className="group relative mx-auto size-20 rounded-lg">
+          <div className="relative z-10 h-full w-full rounded-md 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=90)] bg-[size:8rem] bg-top-left ring-1 ring-black/10 ring-inset"></div>
+          <img
+            className="absolute top-0 left-0 size-32 max-w-none overflow-hidden rounded-md opacity-0 transition duration-100 sm:group-hover:opacity-25"
+            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"
+          />
+        </div>
+      </div>
+      <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
+        <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          object-top
+        </p>
+        <div className="group relative mx-auto size-20 rounded-lg">
+          <div className="relative z-10 h-full w-full rounded-md 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=90)] bg-[size:8rem] bg-top ring-1 ring-black/10 ring-inset"></div>
+          <img
+            className="absolute top-0 -left-6 size-32 max-w-none overflow-hidden rounded-md opacity-0 transition duration-100 sm:group-hover:opacity-25"
+            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"
+          />
+        </div>
+      </div>
+      <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
+        <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          object-top-right
+        </p>
+        <div className="group relative mx-auto size-20 rounded-lg">
+          <div className="relative z-10 h-full w-full rounded-md 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=90)] bg-[size:8rem] bg-top-right ring-1 ring-black/10 ring-inset"></div>
+          <img
+            className="absolute top-0 right-0 size-32 max-w-none overflow-hidden rounded-md opacity-0 transition duration-100 sm:group-hover:opacity-25"
+            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"
+          />
+        </div>
+      </div>
+      <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
+        <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          object-left
+        </p>
+        <div className="group relative mx-auto size-20 rounded-lg">
+          <div className="relative z-10 h-full w-full rounded-md 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=90)] bg-[size:8rem] bg-left ring-1 ring-black/10 ring-inset"></div>
+          <img
+            className="absolute -top-6 left-0 size-32 max-w-none overflow-hidden rounded-md opacity-0 transition duration-100 sm:group-hover:opacity-25"
+            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"
+          />
+        </div>
+      </div>
+      <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
+        <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          object-center
+        </p>
+        <div className="group relative mx-auto size-20 rounded-lg">
+          <div className="relative z-10 h-full w-full rounded-md 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=90)] bg-[size:8rem] bg-center ring-1 ring-black/10 ring-inset"></div>
+          <img
+            className="absolute -top-6 -left-6 size-32 max-w-none overflow-hidden rounded-md opacity-0 transition duration-100 sm:group-hover:opacity-25"
+            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"
+          />
+        </div>
+      </div>
+      <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
+        <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          object-right
+        </p>
+        <div className="group relative mx-auto size-20 rounded-lg">
+          <div className="relative z-10 h-full w-full rounded-md 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=90)] bg-[size:8rem] bg-right ring-1 ring-black/10 ring-inset"></div>
+          <img
+            className="absolute -top-6 right-0 size-32 max-w-none overflow-hidden rounded-md opacity-0 transition duration-100 sm:group-hover:opacity-25"
+            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"
+          />
+        </div>
+      </div>
+      <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
+        <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          object-bottom-left
+        </p>
+        <div className="group relative mx-auto size-20 rounded-lg">
+          <div className="relative z-10 h-full w-full rounded-md 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=90)] bg-[size:8rem] bg-bottom-left ring-1 ring-black/10 ring-inset"></div>
+          <img
+            className="absolute -top-12 left-0 size-32 max-w-none overflow-hidden rounded-md opacity-0 transition duration-100 sm:group-hover:opacity-25"
+            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"
+          />
+        </div>
+      </div>
+      <div className="relative w-40 shrink-0 snap-start snap-always sm:w-auto">
+        <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          object-bottom
+        </p>
+        <div className="group relative mx-auto size-20 rounded-lg">
+          <div className="relative z-10 h-full w-full rounded-md 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=90)] bg-[size:8rem] bg-bottom ring-1 ring-black/10 ring-inset"></div>
+          <img
+            className="absolute -top-12 -left-6 size-32 max-w-none overflow-hidden rounded-md opacity-0 transition duration-100 sm:group-hover:opacity-25"
+            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"
+          />
+        </div>
+      </div>
+      <div className="relative -mx-8 w-56 shrink-0 snap-start snap-always sm:w-auto">
+        <p className="absolute inset-x-0 top-0 mb-3 -translate-y-8 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          object-bottom-right
+        </p>
+        <div className="group relative mx-auto size-20 rounded-lg">
+          <div className="relative z-10 h-full w-full rounded-md 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=90)] bg-[size:8rem] bg-bottom-right ring-1 ring-black/10 ring-inset"></div>
+          <img
+            className="absolute -top-12 right-0 size-32 max-w-none overflow-hidden rounded-md opacity-0 transition duration-100 sm:group-hover:opacity-25"
+            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"
+          />
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:object-top-left,object-top-right,object-center,object-bottom-left,object-bottom-right,object-bottom,object-left,object-right,object-top] -->
+<img class="size-24 object-top-left ..." src="/img/mountains.jpg" />
+<img class="size-24 object-top ..." src="/img/mountains.jpg" />
+<img class="size-24 object-top-right ..." src="/img/mountains.jpg" />
+<img class="size-24 object-left ..." src="/img/mountains.jpg" />
+<img class="size-24 object-center ..." src="/img/mountains.jpg" />
+<img class="size-24 object-right ..." src="/img/mountains.jpg" />
+<img class="size-24 object-bottom-left ..." src="/img/mountains.jpg" />
+<img class="size-24 object-bottom ..." src="/img/mountains.jpg" />
+<img class="size-24 object-bottom-right ..." src="/img/mountains.jpg" />
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue
+  element="img"
+  elementAttributes={{ src: "/img/mountains.jpg" }}
+  utility="object"
+  name="object position"
+  value="25%_75%"
+/>
+
+### Responsive design
+
+<ResponsiveDesign
+  element="img"
+  elementAttributes={{ src: "/img/mountains.jpg" }}
+  property="object-position"
+  defaultClass="object-center"
+  featuredClass="object-top"
+/>

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

@@ -0,0 +1,84 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { TargetingSpecificStates } from "@/components/content.tsx";
+
+export const title = "opacity";
+export const description = "Utilities for controlling the opacity of an element.";
+
+<ApiTable
+  rows={[
+    ["opacity-<number>", "opacity: <number>%;"],
+    ["opacity-(<custom-property>)", "opacity: var(<custom-property>);"],
+    ["opacity-[<value>]", "opacity: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `opacity-<number>` utilities like `opacity-25` and `opacity-100` to set the opacity of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col items-center justify-center gap-8 text-sm leading-6 font-bold text-white sm:flex-row sm:gap-16">
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">opacity-100</p>
+        <button className="rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold text-white opacity-100">
+          Button A
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">opacity-75</p>
+        <button className="rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold text-white opacity-75">
+          Button B
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">opacity-50</p>
+        <button className="rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold text-white opacity-50">
+          Button C
+        </button>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">opacity-25</p>
+        <button className="rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold text-white opacity-25">
+          Button D
+        </button>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:opacity-100,opacity-75,opacity-50,opacity-25] -->
+<button class="bg-indigo-500 opacity-100 ..."></button>
+<button class="bg-indigo-500 opacity-75 ..."></button>
+<button class="bg-indigo-500 opacity-50 ..."></button>
+<button class="bg-indigo-500 opacity-25 ..."></button>
+```
+
+</Figure>
+
+### Applying conditionally
+
+<TargetingSpecificStates
+  element="input"
+  elementAttributes={{ type: "text" }}
+  variant="disabled"
+  property="opacity"
+  defaultClass="opacity-100"
+  featuredClass="opacity-75"
+/>
+
+### Using a custom value
+
+<UsingACustomValue element="button" utility="opacity" value=".67" />
+
+### Responsive design
+
+<ResponsiveDesign element="button" property="opacity" defaultClass="opacity-50" featuredClass="opacity-100" />