@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.48

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

@@ -0,0 +1,118 @@
+import { Stripes } from "@/components/stripes.tsx";
+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 = "flex-wrap";
+export const description = "Utilities for controlling how flex items wrap.";
+
+<ApiTable
+  rows={[
+    ["flex-nowrap", "flex-wrap: nowrap;"],
+    ["flex-wrap", "flex-wrap: wrap;"],
+    ["flex-wrap-reverse", "flex-wrap: wrap-reverse;"],
+  ]}
+/>
+
+## Examples
+
+### Don't wrap
+
+Use `flex-nowrap` to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 flex flex-nowrap gap-4 rounded-lg font-mono text-sm/6 font-bold text-white">
+        <div className="w-2/5 flex-none last:pr-8">
+          <div className="flex w-full items-center justify-center rounded-lg bg-sky-500 p-4">01</div>
+        </div>
+        <div className="w-2/5 flex-none last:pr-8">
+          <div className="flex w-full items-center justify-center rounded-lg bg-sky-500 p-4">02</div>
+        </div>
+        <div className="w-2/5 flex-none last:pr-8">
+          <div className="flex w-full items-center justify-center rounded-lg bg-sky-500 p-4">03</div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:flex-nowrap] -->
+<div class="flex flex-nowrap">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Wrap normally
+
+Use `flex-wrap` to allow flex items to wrap:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 flex flex-wrap gap-4 rounded-lg font-mono text-sm/6 font-bold text-white">
+        <div className="flex w-2/5 items-center justify-center rounded-lg bg-indigo-500 p-4">01</div>
+        <div className="flex w-2/5 items-center justify-center rounded-lg bg-indigo-500 p-4">02</div>
+        <div className="flex w-2/5 items-center justify-center rounded-lg bg-indigo-500 p-4">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:flex-wrap] -->
+<div class="flex flex-wrap">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Wrap reversed
+
+Use `flex-wrap-reverse` to wrap flex items in the reverse direction:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 flex flex-wrap-reverse gap-4 rounded-lg font-mono text-sm/6 font-bold text-white">
+        <div className="flex w-2/5 items-center justify-center rounded-lg bg-fuchsia-500 p-4">01</div>
+        <div className="flex w-2/5 items-center justify-center rounded-lg bg-fuchsia-500 p-4">02</div>
+        <div className="flex w-2/5 items-center justify-center rounded-lg bg-fuchsia-500 p-4">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:flex-wrap-reverse] -->
+<div class="flex flex-wrap-reverse">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="flex-wrap" defaultClass="flex flex-wrap" featuredClass="flex-wrap-reverse" />

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

@@ -0,0 +1,164 @@
+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 = "flex";
+export const description = "Utilities for controlling how flex items both grow and shrink.";
+
+<ApiTable
+  rows={[
+    ["flex-<number>", "flex: <number>;"],
+    ["flex-<fraction>", "flex: calc(<fraction> * 100%);"],
+    ["flex-auto", "flex: auto;"],
+    ["flex-initial", "flex: 0 auto;"],
+    ["flex-none", "flex: none;"],
+    ["flex-(<custom-property>)", "flex: var(<custom-property>);"],
+    ["flex-[<value>]", "flex: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `flex-<number>` utilities like `flex-1` to allow a flex item to grow and shrink as needed, ignoring its initial size:
+
+<Figure>
+
+<Example resizable>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 flex gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex h-14 w-14 flex-none items-center justify-center rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">
+          01
+        </div>
+        <div className="flex w-64 flex-1 items-center justify-center rounded-lg bg-pink-500 p-4">02</div>
+        <div className="flex w-32 flex-1 items-center justify-center rounded-lg bg-pink-500 p-4">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code word:flex-1] -->
+<div class="flex">
+  <div class="w-14 flex-none ...">01</div>
+  <div class="w-64 flex-1 ...">02</div>
+  <div class="w-32 flex-1 ...">03</div>
+</div>
+```
+
+</Figure>
+
+### Initial
+
+Use `flex-initial` to allow a flex item to shrink but not grow, taking into account its initial size:
+
+<Figure>
+
+<Example resizable>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 flex gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex h-14 w-14 flex-none items-center justify-center rounded-lg bg-blue-300 p-4 dark:bg-blue-800 dark:text-blue-500">
+          01
+        </div>
+        <div className="flex w-24 flex-initial items-center justify-center rounded-lg bg-blue-500 p-4 sm:w-64">02</div>
+        <div className="flex w-14 flex-initial items-center justify-center rounded-lg bg-blue-500 p-4 sm:w-32">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code word:flex-initial] -->
+<div class="flex">
+  <div class="w-14 flex-none ...">01</div>
+  <div class="w-64 flex-initial ...">02</div>
+  <div class="w-32 flex-initial ...">03</div>
+</div>
+```
+
+</Figure>
+
+### Auto
+
+Use `flex-auto` to allow a flex item to grow and shrink, taking into account its initial size:
+
+<Figure>
+
+<Example resizable>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 flex gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex h-14 w-14 flex-none items-center justify-center rounded-lg bg-violet-300 p-4 dark:bg-violet-800 dark:text-violet-400">
+          01
+        </div>
+        <div className="flex w-64 flex-auto items-center justify-center rounded-lg bg-violet-500 p-4">02</div>
+        <div className="flex w-32 flex-auto items-center justify-center rounded-lg bg-violet-500 p-4">03</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code word:flex-auto] -->
+<div class="flex ...">
+  <div class="w-14 flex-none ...">01</div>
+  <div class="w-64 flex-auto ...">02</div>
+  <div class="w-32 flex-auto ...">03</div>
+</div>
+```
+
+</Figure>
+
+### None
+
+Use `flex-none` to prevent a flex item from growing or shrinking:
+
+<Figure>
+
+<Example resizable>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 flex gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex-none last:pr-8 sm:last:pr-0">
+          <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-indigo-500 p-4">01</div>
+        </div>
+        <div className="flex-none last:pr-8 sm:last:pr-0">
+          <div className="flex w-32 items-center justify-center rounded-lg bg-indigo-500 p-4">02</div>
+        </div>
+        <div className="flex-1 last:pr-8 sm:last:pr-0">
+          <div className="flex items-center justify-center rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">
+            03
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code word:flex-none] -->
+<div class="flex ...">
+  <div class="w-14 flex-none ...">01</div>
+  <div class="w-32 flex-none ...">02</div>
+  <div class="flex-1 ...">03</div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="flex" name="flex shorthand property" value="3_1_auto" />
+
+### Responsive design
+
+<ResponsiveDesign property="flex" defaultClass="flex-none" featuredClass="flex-1" />

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

@@ -0,0 +1,197 @@
+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 = "float";
+export const description = "Utilities for controlling the wrapping of content around an element.";
+
+<ApiTable
+  rows={[
+    ["float-right", "float: right;"],
+    ["float-left", "float: left;"],
+    ["float-start", "float: inline-start;"],
+    ["float-end", "float: inline-end;"],
+    ["float-none", "float: none;"],
+  ]}
+/>
+
+## Examples
+
+### Floating elements to the right
+
+Use the `float-right` utility to float an element to the right of its container:
+
+<Figure>
+
+<Example resizable>
+  {
+    <>
+      <img
+        className="float-right ml-6 aspect-16/9 w-2/5 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"
+      />
+      <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:float-right] -->
+<article>
+  <img class="float-right ..." src="/img/mountains.jpg" />
+  <p>Maybe we can live without libraries, people like you and me. ...</p>
+</article>
+```
+
+</Figure>
+
+### Floating elements to the left
+
+Use the `float-left` utility to float an element to the left of its container:
+
+<Figure>
+
+<Example resizable>
+  {
+    <>
+      <img
+        className="float-left mr-6 aspect-16/9 w-2/5 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"
+      />
+      <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:float-left] -->
+<article>
+  <img class="float-left ..." src="/img/mountains.jpg" />
+  <p>Maybe we can live without libraries, people like you and me. ...</p>
+</article>
+```
+
+</Figure>
+
+### Using logical properties
+
+Use the `float-start` and `float-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="ltr">
+        <p className="mb-4 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">left-to-right</p>
+        <div>
+          <img
+            className="float-start me-6 aspect-16/9 w-2/5 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"
+          />
+          <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>
+        </div>
+      </div>
+      <div dir="rtl" className="mt-6">
+        <p className="mb-4 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">right-to-left</p>
+        <div>
+          <img
+            className="float-start me-6 aspect-16/9 w-2/5 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"
+          />
+          <p className="text-justify">
+            ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد، نحن أكبر من أن نغير العالم، ولكن ماذا عن
+            ذلك الطفل الذي يجلس ويفتح كتابًا الآن في أحد فروع المكتبة المحلية ويجد رسومات للتبول والبول على القطة في
+            القبعة والإخوة الصينيون الخمسة؟ ألا يستحق الأفضل؟ ينظر. إذا كنت تعتقد أن الأمر يتعلق بالغرامات المتأخرة
+            والكتب المفقودة، فمن الأفضل أن تفكر مرة أخرى. يتعلق الأمر بحق ذلك الطفل في قراءة كتاب دون أن يتشوه عقله! أو:
+            ربما يثيرك هذا يا سينفيلد؛ ربما هذه هي الطريقة التي تحصل بها على ركلاتك. أنت ورفاقك الطيبين.
+          </p>
+        </div>
+      </div>
+    </>
+  }
+</Example>
+
+```html
+<!-- [!code word:dir="rtl"] -->
+<!-- [!code classes:float-start] -->
+<article>
+  <img class="float-start ..." src="/img/mountains.jpg" />
+  <p>Maybe we can live without libraries, people like you and me. ...</p>
+</article>
+
+<article dir="rtl">
+  <img class="float-start ..." src="/img/mountains.jpg" />
+  <p>... ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد</p>
+</article>
+```
+
+</Figure>
+
+### Disabling a float
+
+Use the `float-none` utility to reset any floats that are applied to an element:
+
+<Figure>
+
+<Example resizable>
+  {
+    <>
+      <img
+        className="mb-4 aspect-16/9 w-2/5 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"
+      />
+      <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:float-none] -->
+<article>
+  <img class="float-none ..." src="/img/mountains.jpg" />
+  <p>Maybe we can live without libraries, people like you and me. ...</p>
+</article>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="float">
+
+```html
+<!-- [!code classes:md:float-left] -->
+<img class="float-right md:float-left" src="/img/mountains.jpg" />
+```
+
+</ResponsiveDesign>

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

@@ -0,0 +1,119 @@
+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";
+
+export const title = "font-family";
+export const description = "Utilities for controlling the font family of an element.";
+
+<ApiTable
+  rows={[
+    [
+      "font-sans",
+      "font-family: var(--font-sans); /* ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' */",
+    ],
+    ["font-serif", "font-family: var(--font-serif); /* ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif */"],
+    [
+      "font-mono",
+      "font-family: var(--font-mono); /* ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace */",
+    ],
+    ["font-(family-name:<custom-property>)", "font-family: var(<custom-property>);"],
+    ["font-[<value>]", "font-family: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `font-sans` and `font-mono` to set the font family of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col gap-8">
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-sans</span>
+        <p className="font-sans text-lg font-medium text-gray-900 dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-serif</span>
+        <p className="font-serif text-lg font-medium text-gray-900 dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-mono</span>
+        <p className="font-mono text-lg font-medium text-gray-900 dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:font-sans,font-serif,font-mono] -->
+<p class="font-sans ...">The quick brown fox ...</p>
+<p class="font-serif ...">The quick brown fox ...</p>
+<p class="font-mono ...">The quick brown fox ...</p>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="font" name="font family" value="Open_Sans" element="p" dataType="family-name" />
+
+### Responsive design
+
+<ResponsiveDesign property="font-family" defaultClass="font-sans" featuredClass="font-serif" element="p" />
+
+## Customizing your theme
+
+<CustomizingYourTheme
+  utility="font"
+  name="font family"
+  customName="display"
+  customValue='"Oswald", sans-serif'
+>
+
+You can also provide default `font-feature-settings` and `font-variation-settings` values for a font family:
+
+```css
+@theme {
+  --font-display: "Oswald", sans-serif;
+  --font-display--font-feature-settings: "cv02", "cv03", "cv04", "cv11"; /* [!code highlight] */
+  --font-display--font-variation-settings: "opsz" 32; /* [!code highlight] */
+}
+```
+
+If needed, use the [@font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) at-rule to load custom fonts:
+
+```css
+@font-face {
+  font-family: Oswald;
+  font-style: normal;
+  font-weight: 200 700;
+  font-display: swap;
+  src: url("/fonts/Oswald.woff2") format("woff2");
+}
+```
+
+If you're loading a font from a service like [Google Fonts](https://fonts.google.com/), make sure to put the `@import` at the very top of your CSS file:
+
+```css
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); /* [!code highlight] */
+@import "tailwindcss";
+
+@theme {
+  --font-roboto: "Roboto", sans-serif; /* [!code highlight] */
+}
+```
+
+Browsers require that `@import` statements come before any other rules, so URL imports need to be above imports like `@import "tailwindcss"` which are inlined in the compiled CSS.
+
+</CustomizingYourTheme>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/font-feature-settings.mdx

@@ -0,0 +1,52 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "font-feature-settings";
+export const description = "Utilities for controlling advanced typographic features.";
+
+<ApiTable
+  rows={[
+    ["font-features-[<value>]", "font-feature-settings: <value>;"],
+    ["font-features-(<custom-property>)", "font-feature-settings: var(<custom-property>);"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use the `font-features-[<value>]` utility to enable OpenType features in fonts that support them:
+
+```html
+<!-- [!code classes:font-features-["smcp"]] -->
+<p class="font-features-['smcp'] ...">This text uses small caps.</p>
+```
+
+### Enabling multiple features
+
+You can enable multiple OpenType features by separating them with commas:
+
+```html
+<!-- [!code classes:font-features-["smcp","onum"]] -->
+<p class="font-features-['smcp','onum'] ...">This text uses small caps and oldstyle numbers.</p>
+```
+
+### Using CSS variables
+
+Use the `font-features-(<custom-property>)` syntax to apply font feature settings from a CSS variable:
+
+```html
+<!-- [!code classes:font-features-(--my-features)] -->
+<p class="font-features-(--my-features) ...">
+  <!-- ... -->
+</p>
+```
+
+### Responsive design
+
+<ResponsiveDesign
+  property="font-feature-settings"
+  defaultClass="font-features-['tnum']"
+  featuredClass="font-features-['smcp']"
+  element="p"
+/>