@olives/devos 2.1.0

package/.agents/skills/modern-web-guidance/guides/user-experience/position-aware-tooltips.md

@@ -0,0 +1,154 @@
+When building tooltips or popovers with CSS Anchor Positioning, the browser can automatically "flip" the element to a fallback position if it would otherwise overflow the viewport. When this happens, you may want to adjust the style of the positioned content, for instance to reposition an arrow that points from the positioned content to the anchor.
+
+**Anchored Container Queries** solve this by allowing you to query the active positioning state of an element and apply styles accordingly.
+
+## The problem
+
+Imagine a tooltip that appears above its anchor by default. It has a "down" arrow at the bottom. If the user scrolls and the tooltip flips to appear *below* the anchor, the arrow is now pointing the wrong way and is on the wrong side of the tooltip.
+
+## The solution: Anchored Container Queries
+
+By setting `container-type: anchored` on your positioned element, you turn it into a query container that knows about its own anchor-positioned state. You can then use the `@container anchored()` query to update its descendants or pseudo-elements.
+
+### 1. Create the tooltip and trigger
+
+Use the Popover API to create a tooltip. This creates an implicit anchor connection that can be used for positioning.
+
+```html
+<button popovertarget="tooltip" id="anchor" aria-describedby="tooltip">anchor</button>
+<div id="tooltip" popover role="tooltip"></div>
+```
+
+Reset the popover inset and margin styles for use with anchor positioning, but only if anchor positioning is supported.
+
+```css
+@supports (anchor-name: --my-anchor) {
+  [popover] {
+    inset: auto;
+    margin: unset;
+  }
+}
+```
+
+### 2. Set up the container
+
+Apply `container-type: anchored` to the element being positioned. This element must also have `position-try-fallbacks` defined to enable the flipping behavior.
+
+```css
+#tooltip {
+  position: fixed;
+  position-area: block-start;
+  position-try-fallbacks: flip-block;
+
+  /* Enable anchored container queries */
+  container-type: anchored;
+}
+```
+
+### 3. Style based on the fallback
+
+Use `@container anchored(fallback: <value>)` to apply styles when a specific fallback is active.
+
+Like all container queries, `@container` can only style **descendants** of the container. A common strategy to create the arrows is with the `::before` and `::after` pseudo-elements, which are treated as descendants and can be styled directly. However, to style the tooltip itself (as seen in step 4), we will add a child element to the tooltip, and create the arrow in its `::before` pseudo-element.
+
+```html
+<div id="tooltip" popover role="tooltip">
+  <div class="tooltip-content">Tooltip</div>
+</div>
+```
+
+```css
+.tooltip-content::before {
+  /* Default "down" arrow for the 'top' position */
+  content: "▼";
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 1rem;
+}
+
+/* Update to an "up" arrow when the 'flip-block' fallback (bottom) is active */
+@container anchored(fallback: flip-block) {
+  .tooltip-content::before {
+    content: "▲";
+    inset-block-start: 0;
+    inset-block-end: auto;
+  }
+}
+```
+
+## 4. Styling the container itself
+
+If you need to change properties on the container itself (like `margin` or `background-color`) when it flips, you should use an **inner wrapper element**.
+
+1. Apply `container-type: anchored` to the outer positioned element.
+2. Target the inner element inside the `@container` block.
+
+
+```css
+@container anchored(fallback: flip-block) {
+  .tooltip-content {
+    border-radius: 0 0 .5rem .5rem;
+    margin-block-start: 0.25rem;
+  }
+}
+```
+
+## Best practices
+
+- **Prefer logical fallbacks**: Use keywords like `flip-block` and `flip-inline` in `position-try-fallbacks` for simpler queries that handle RTL and different writing modes automatically.
+- **Use pseudo-elements for arrows**: Tooltip arrows are purely decorative and are perfect candidates for `::before` or `::after`, which can be styled via anchored container queries without extra DOM.
+
+
+## Fallback strategies
+
+Anchor position container queries has limited availability.
+Supported by: Chrome 143 (Dec 2025) and Edge 143 (Dec 2025).
+Unsupported in: Firefox and Safari.
+
+Positioning the arrow based on the applied fallback is a progressive enhancement, and there is not another way of reacting to the fallback position. To hide the arrow in browsers that don't support anchor position container queries, test for CSS support with `@supports (container-type: anchored)`.
+
+```css
+@supports (container-type: anchored) {
+  .tooltip-content::before {
+    content: "▼";
+  }
+}
+```
+
+### Polyfilling the Popover Attribute
+
+Baseline status for Popover: Newly available. It's been Baseline since 2025-01-27.
+Supported by: Chrome 116 (Aug 2023), Edge 116 (Aug 2023), Firefox 125 (Apr 2024), Safari 17 (Sep 2023), and Safari iOS 18.3 (Jan 2025).
+
+To support the `popover` attribute in older browsers, use the `@oddbird/popover-polyfill`.
+
+MANDATORY: Feature detect popover support by checking for the `popover` property on the `HTMLElement` prototype. Conditionally initialize the polyfill only if native support is missing.
+
+**Option 1: Using a package manager**
+Install the package (`npm install @oddbird/popover-polyfill`).
+
+```javascript
+// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
+if (!('popover' in HTMLElement.prototype)) {
+  import('@oddbird/popover-polyfill/fn').then(({ apply }) => {
+    apply();
+  });
+}
+```
+
+**Option 2: Manual installation without npm**
+If you are not using a package manager, dynamically import the polyfill directly from a CDN (such as unpkg) inside a `<script type="module">`.
+
+```html
+<script type="module">
+  // MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
+  // Conditionally load the popover-polyfill from a CDN only in browsers lacking native support.
+  if (!('popover' in HTMLElement.prototype)) {
+    import('https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover-fn.js').then(({ apply }) => {
+      apply();
+    });
+  }
+</script>
+```
+
+Browsers without support for the Popover API also do not support anchor positioning, so the tooltip will appear in the center of the screen.

package/.agents/skills/modern-web-guidance/guides/user-experience/precise-text-alignment.md

@@ -0,0 +1,99 @@
+# Precise Text Alignment
+
+## The Problem
+
+Browsers automatically add extra whitespace above and below text characters to accommodate line-height and font-specific metrics like ascenders and descenders. This "ghost space" makes it impossible to achieve pixel-perfect vertical alignment using standard CSS.
+
+Common issues include:
+- **Misaligned Icons**: Text appears visually lower or higher than an adjacent icon even when using `align-items: center`.
+- **Inaccurate Padding**: A button with `padding: 12px` visually appears to have more space on top or bottom because of the font's internal leading.
+- **Flush Alignment**: You cannot align the top of a capital letter exactly with the top of a container or an adjacent image without using "magic number" negative margins.
+
+## The Solution
+
+The `text-box-trim` and `text-box-edge` properties (shorthand `text-box`) allow you to trim this internal leading based on specific font metrics. By trimming the text box to the **cap-height** (top of capital letters) and the **alphabetic baseline** (bottom of most letters), you can ensure that the element's bounding box matches its visual content.
+
+### Implementation Strategy
+
+1. **MANDATORY**: Apply `text-box-trim: trim-both` (or the `text-box` shorthand) to the element containing the text.
+2. **MANDATORY**: Specify which metrics to use for trimming with `text-box-edge`. For most UI alignment, use `cap alphabetic`.
+3. **DO** use this to achieve visual vertical centering in flex or grid containers.
+4. **DO** use it to ensure that your CSS `padding` values match the visual gap between the text and the container edge.
+5. **DO NOT** use it on long-form body text where traditional line-spacing is necessary for readability. It is best suited for headings, buttons, and UI labels.
+
+## Implementation Guide
+
+### Use case 1: Trim internal leading for badges
+
+Different fonts have different amounts of built-in spacing above and below the text. This can provide challenges in matching a design, or in visually centering text in a badge. When you want a container's padding to exactly hug the text, use `text-box: trim-both cap alphabetic`. This is especially useful for dense UI components like badges or tags. This allows the padding to start right at the text edge on all sides.
+
+```css
+.badge {
+  padding: 10px;
+  background: hotpink;
+  border-radius: 10px;
+  /* 
+    Trims the top to the cap-height and 
+    the bottom to the alphabetic baseline.
+  */
+  text-box: trim-both cap alphabetic;
+}
+```
+
+### Use case 2: Center text with icons
+
+When using Flexbox to align text and icons, the "ghost space" often makes the text look slightly off-center. Trimming the box ensures the layout engine uses the actual visible letter height for alignment.
+
+```css
+.button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px; 
+}
+/* 
+  text-box does NOT inherit, and must be applied directly to the text element.
+*/
+.button-text{
+  /* 
+    The flex container now centers against the 
+    visible letters, not the invisible font box.
+  */
+  text-box: trim-both cap alphabetic;
+}
+```
+
+### Use case 3: Align text flush with top edges
+
+To align a heading perfectly with the top of an adjacent image or decorative element, use `trim-start cap alphabetic`. Even though the end will not be trimmed, the end edge must be defined.
+
+```css
+.hero {
+  display: flex;
+  align-items: flex-start;
+}
+
+h1 {
+  /* MANDATORY: The bottom edge must also be defined, even though only the top is trimmed. */
+  text-box: trim-start cap alphabetic;
+}
+```
+
+## Best Practices
+
+- **DO** use the `text-box` shorthand for conciseness: `text-box: <trim-direction> <edges>`.
+- **DO** always specify both edges, even if only one edge is being trimmed (unless using the default `text` edge).
+- **DO** combine with `line-height` for controlled spacing. Trimming removes the leading before the first and last line of text, but `line-height` still affects the distance between lines in multi-line text.
+- **DO NOT** apply to every element. Use it only where precision alignment is a requirement.
+
+### Fallback strategies
+
+text-box has limited availability.
+Supported by: Chrome 133 (Feb 2025), Edge 133 (Feb 2025), and Safari 18.2 (Dec 2024).
+Unsupported in: Firefox.
+
+`text-box` is a progressive enhancement. In browsers that do not support it, the text will simply render with its default leading. Your layout will still be functional, though slightly less precise. No special fallback code is required as the properties are safely ignored by older browsers.
+
+## Other Considerations
+
+1. **Font Metrics**: Different fonts have different internal metrics. `cap alphabetic` is a reliable default, but some fonts or use cases may require `ex` (x-height) for better lowercase alignment.
+2. **Multi-line Text**: Trimming applies to the first and last line of the block. Internal lines are not affected.

package/.agents/skills/modern-web-guidance/guides/user-experience/prevent-text-wrapping.md

@@ -0,0 +1,62 @@
+# Prevent text wrapping
+
+Modern CSS provides the `text-wrap` property to control how text breaks within its container. To ensure text stays on a single line and ignores container boundaries, use `text-wrap: nowrap`. This is the modern, more semantic replacement for `white-space: nowrap`.
+
+Preventing text wrapping is useful for UI elements like navigation tabs, horizontal scrolling chips, or any scenario where a line break would break the layout or visual design.
+
+## How to implement `text-wrap: nowrap`
+
+### Basic Usage
+
+To prevent any automatic line breaks, apply `text-wrap: nowrap` to the element containing the text.
+
+1. **MANDATORY**: Apply `text-wrap: nowrap` to the target element.
+2. **OPTIONAL**: Use an `overflow` property (such as `hidden`, `scroll`, or `auto`) to manage the resulting overflow.
+3. **OPTIONAL**: Use `text-overflow: ellipsis` to provide a visual cue when text is truncated. Note: This requires `overflow: hidden`.
+
+### Example code
+
+```css
+.no-wrap-text {
+  /* MANDATORY: Prevents automatic line breaks */
+  text-wrap: nowrap;
+
+  /* OPTIONAL: Handles the overflow visually */
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  /* OPTIONAL: Constrain width to force and handle overflow within this element */
+  max-width: 200px;
+}
+```
+
+### Specific Control with Longhands
+
+The `text-wrap` property is a shorthand for `text-wrap-mode` (whether text wraps) and `text-wrap-style` (how it wraps). Since `text-wrap-style` is ignored when wrapping is disabled, you should generally stick to the `text-wrap` shorthand.
+
+While the longhand `text-wrap-mode: nowrap` exists, the property name is currently considered a placeholder by the CSS Working Group and may change in the future.
+
+```css
+.granular-control {
+  /* Modern longhand equivalent to white-space: nowrap */
+  /* Preferred: text-wrap: nowrap; */
+  text-wrap-mode: nowrap;
+}
+```
+
+### Fallback strategies
+
+Baseline status for text-wrap: Newly available. It's been Baseline since 2024-10-17.
+Supported by: Chrome 130 (Oct 2024), Edge 130 (Oct 2024), Firefox 124 (Mar 2024), and Safari 17.5 (May 2024).
+
+For browsers that do not yet support `text-wrap`, use the legacy `white-space` property. Modern browsers treat `white-space` as a shorthand for setting both the `text-wrap-mode` and `white-space-collapse` properties.
+
+```css
+.no-wrap-with-fallback {
+  /* Fallback for older browsers */
+  white-space: nowrap;
+
+  /* Modern standard */
+  text-wrap: nowrap;
+}
+```

package/.agents/skills/modern-web-guidance/guides/user-experience/pull-to-reveal.md

@@ -0,0 +1,83 @@
+# Pull to Reveal
+
+"Pull to reveal" is a UI pattern where content (such as a search bar or refresh control) is hidden above the top of a scrollable area on initial load, and the user can pull down (scroll up) to reveal it. This pattern is commonly used in mobile apps and web apps for search bars, filters, and other secondary controls that should be accessible but not immediately visible.
+
+The CSS property `scroll-initial-target` offers a declarative, CSS-only way to implement this pattern. By setting `scroll-initial-target: nearest` on the main content element, the scroll container will render with the hidden content scrolled out of view. Previously, developers relied on JavaScript (`Element.scrollIntoView()`) or URL fragment identifiers (`#content-id`) to achieve this, both of which have limitations and are tricky to implement.
+
+## How to Implement
+
+To implement a pull-to-reveal pattern:
+
+1. **Ensure a scroll container:** The target element must be inside a scroll container (an element with overflow that allows scrolling, such as `overflow: auto`). This can be any ancestor element, including the root `<html>` element.
+2. **Define the hidden element:** Place the content you want to hide (e.g., a search bar) as the first descendant inside the scroll container. This element will be scrolled out of view on initial load.
+3. **Define the main content:** Place the main content element immediately after the hidden element. This is the element the user should see first.
+4. **Target the main content:** Apply `scroll-initial-target: nearest` to the main content element so the scroll container renders with it scrolled into view, hiding the element above it.
+5. **Add scroll snapping:** To ensure the hidden element is always either fully visible or fully hidden (and doesn't rest in a partially-scrolled state), add `scroll-snap-type: y mandatory` to the scroll container and `scroll-snap-align: start` to both the hidden element and the main content element.
+
+## Example Code: Pull to Reveal Search
+
+```css
+/**
+ * ANCESTOR: Define the scroll container.
+ * Scroll snapping ensures the search bar is always
+ * either fully visible or fully hidden.
+ */
+.scroll-container {
+  height: 100vh;
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
+}
+
+/**
+ * HIDDEN ELEMENT: The search bar hidden above the fold on load.
+ * It has scroll-snap-align so it snaps into place when pulled down.
+ */
+.search-bar {
+  height: 60px;
+  scroll-snap-align: start;
+}
+
+/**
+ * MAIN CONTENT + TARGET: The element the user sees first.
+ * scroll-snap-align makes it a valid snap point.
+ * scroll-initial-target tells the browser to scroll here on
+ * initial render, hiding the search bar above it.
+ */
+.main-content {
+  scroll-snap-align: start;
+  scroll-initial-target: nearest;
+}
+```
+
+## Strategic Implementation & Best Practices
+
+- **DO** use `scroll-initial-target: nearest` when you want to draw the user's attention to a specific part of a scrollable area upon load and intentionally hide peripheral UI units like a search bar at the very top.
+- **DO NOT** confuse this with accessibility focus. This property only moves the **visual** viewport; it does not move the keyboard focus. You must manually manage `element.focus()` if the target is intended to be the starting point for keyboard users.
+- **DO NOT** use this if you need a smooth "scrolling" animation on load; this property is discrete and sets the position instantly during the layout phase.
+- **DO NOT** set `scroll-initial-target` on multiple elements within the same scrollable container. If multiple elements specify `scroll-initial-target: nearest`, the browser selects the one that appears first in the DOM tree order.
+- **DO** account for the **Precedence Hierarchy**: A URL fragment (e.g., `example.com/#top`) and the container-level `scroll-start` property both take precedence over `scroll-initial-target`.
+
+## Fallback Strategy
+
+scroll-initial-target has limited availability.
+Supported by: Chrome 133 (Feb 2025) and Edge 133 (Feb 2025).
+Unsupported in: Firefox and Safari.
+
+For browsers that do not yet support the API, use a JavaScript fallback. Note that for pulling content to reveal, you want the main content to be bound to the `start` (top) of the container.
+
+```javascript
+/**
+ * Progressive Enhancement Fallback
+ */
+document.addEventListener("DOMContentLoaded", () => {
+  // Check for native CSS support
+  if (!CSS.supports("scroll-initial-target", "nearest")) {
+    const targetContent = document.querySelector('.main-content.target');
+    if (targetContent) {
+      // Use behavior: "instant" to mimic the native CSS behavior
+      // 'block: start' should match your CSS 'scroll-snap-align' (or expected top position)
+      targetContent.scrollIntoView({ behavior: 'instant', block: 'start' });
+    }
+  }
+});
+```

package/.agents/skills/modern-web-guidance/guides/user-experience/reduce-style-repetition.md

@@ -0,0 +1,87 @@
+# Reduce Style Repetition with CSS Functions
+
+Maintaining large stylesheets often leads to repetitive logic, especially when dealing with design system tokens like gradients or responsive layout patterns.
+
+The CSS `@function` at-rule allows you to encapsulate this logic into reusable, parameterized functions, making your CSS more maintainable, consistent and DRY (Don't Repeat Yourself).
+
+## The `@function` Syntax
+
+A custom function is defined using the `@function` rule followed by a dashed name and a list of parameters. The function returns a value using the `result` property. 
+
+```css
+@function --my-function(--input1 <length>, --input2: default-value) returns <length> {
+  /* Logic goes here */
+  result: var(--input1);
+}
+```
+
+### Key Concepts
+- **Parameters:** Must start with a double dash (`--`).
+- **Defaults:** You can provide default values using a colon (`:`).
+- **Result:** The `result` property determines the value the function returns. The last `result` declared in the function body wins.
+- **Scoping:** Parameters and variables defined inside the function are locally scoped.
+- **Types:** You can require parameters and the returned value to match a CSS type with bracket notation (e.g., `<color>`) and allow multiple types with the `type` function (e.g., `type(<number> | <percentage>)`).
+
+## Practical Examples
+
+### 1. Design System Tokens (Gradients)
+Ensure consistent color gradients across your app by encapsulating gradient logic. The `--angle` provides a default value to provide consistency that can be overridden.
+
+```css
+@function --fancy-gradient(--start-color <color>, --end-color <color>, --angle: 98deg) returns <image>{
+  result: linear-gradient(in oklab var(--angle), var(--start-color), var(--end-color) );
+}
+
+.card {
+  background: --fancy-gradient(#ed73d7, #5d87e9);
+}
+```
+
+### 2. Conditional Layout Logic
+You can use `@media` or other queries directly inside a function to return different values based on the environment. When using conditional logic in a function, note that the `@function` does not "return" at the first value of `result`, but rather follows the CSS cascade, and resolves to the last value that matches based on the screen size, container size, or other query.
+
+```css
+@function --grid-template(--count <number>){
+  /* MANDATORY: Put default value first. */
+  result: 1fr; /* Default: stack */
+  @media (min-width: 800px) {
+    result: repeat(var(--count), 1fr); /* Grid on larger screens */
+  }
+}
+
+main {
+  display: grid;
+  grid-template-columns: --grid-template(2);
+}
+```
+
+## Best Practices
+- **Use Dashed Names:** Always prefix your function names and parameters with `--`.
+- **Provide Defaults:** Make your functions more robust by providing sensible default values.
+- **Keep it Simple:** Use functions for logic that is actually repeated or complex. Don't over-engineer simple property-value pairs.
+- **Use Types:** Ensure your parameters and return values are the expected types.
+- **Consider Precompiled Alternatives:** For functions that do not depend on user input, media queries or other client-side variation, consider using a CSS precompiler to avoid doing unnecessary work on the client. 
+
+### Fallback strategies
+
+@function has limited availability.
+Supported by: Chrome 139 (Aug 2025) and Edge 139 (Aug 2025).
+Unsupported in: Firefox and Safari.
+
+In browsers that do not support CSS Functions, values set using CSS functions will be invalid. To support other browsers, provide a fallback value for the property first. This will be overridden in browsers with CSS function support.
+
+```css
+.card {
+  /* Provide fallback, in this case a solid color. */
+  background: #5d87e9;
+  background: --fancy-gradient(#ed73d7, #5d87e9);
+}
+
+main {
+  /* Provide fallback, in this case a simple stacked default. */
+  grid-template-columns: 1fr;
+  grid-template-columns: --grid-template(2);
+}
+```
+
+If it is a requirement to reduce style repetition while supporting other browsers, consider a CSS precompiler with functions, like Sass.

package/.agents/skills/modern-web-guidance/guides/user-experience/resilient-context-menus-and-nested-dropdowns.md

@@ -0,0 +1,102 @@
+A revealed action panel or popover button group is a useful pattern for users to access additional functionality while taking up minimal space. This overlay pattern comes with layout complexity, as the panel must remain tethered to a trigger element while adapting to viewport constraints. Traditionally, this required complex JavaScript libraries (like Popper.js or Floating UI) to calculate positions and handle collisions.
+
+CSS Anchor Positioning provides a declarative, performance-optimized way to handle these relationships entirely in CSS, allowing browsers to manage the positioning and overflow logic natively.
+
+> [!NOTE]
+> This guide demonstrates anchor-positioning and popover mechanics — it does not prescribe a specific accessible UI pattern. The trigger and panel below are shown as a plain **button-revealing-a-button-group**. If you need a true ARIA menu (`role="menu"` with arrow-key navigation), a combobox, a disclosure widget, or any other named pattern, layer that pattern's full semantics and keyboard contract on top of the positioning techniques shown here.
+
+### 1. Define the Button and Panel Relationship
+
+The first step is to create a trigger button that opens the overlay container using the Popover API.
+
+**MANDATORY Accessibility Distinction:** This pattern explicitly models a **button group revealed inside a popover** rather than a true ARIA menu. Do not apply `role="menu"` or `role="menuitem"` unless you fully implement the corresponding keyboard navigation contract (such as handling spatial arrow-key navigation between items). For the same reason, do not add `aria-haspopup` to the trigger — its value (`menu`, `listbox`, `tree`, `grid`, or the legacy `true`) is a promise that the target exposes a matching role, which this pattern does not.
+
+```html
+<button popovertarget="action-panel">
+  Open Actions
+</button>
+<!-- Use the Popover API (`popover="auto"`) for the overlay to ensure it is placed in the top layer and handled accessibly by the browser. -->
+<div id="action-panel" popover="auto" class="panel">
+  <button class="action-item" type="button">Edit</button>
+</div>
+```
+
+This creates an *implicit* anchor association between the button and the panel, so that the panel can be positioned relative to the button.
+
+### 2. Positioning with `position-area`
+
+Instead of manual `top`/`left` offsets, use `position-area` to place the target on a 3x3 grid relative to the anchor.
+
+```css
+.panel {
+  /* 
+     Position the panel below the anchor (block-end), 
+     aligned to the start of the anchor and spanning to its end (span-inline-end).
+  */
+  position-area: block-end span-inline-end;
+  
+  /* Reset insets to allow the grid to take control */
+  inset: auto;
+}
+```
+
+Prefer logical keywords (`span-inline-end`, `block-start`) over physical ones (`left`, `top`) to support RTL and different writing modes automatically.
+
+**MANDATORY**: Do not mix physical and logical keywords in `position-area`.
+
+### 3. Implement Edge-Resilience (Fallbacks)
+
+To prevent the panel from being cut off at the edge of the screen, define "try tactics" that the browser should attempt if the default position overflows.
+
+```css
+.panel {
+  /* 
+     If the panel overflows the bottom, flip it to the top (flip-block).
+     If it overflows the inline edges, flip it horizontally (flip-inline).
+  */
+  position-try-fallbacks: flip-block, flip-inline;
+}
+```
+
+## Fallback strategies
+
+Baseline status for Popover: Newly available. It's been Baseline since 2025-01-27.
+Supported by: Chrome 116 (Aug 2023), Edge 116 (Aug 2023), Firefox 125 (Apr 2024), Safari 17 (Sep 2023), and Safari iOS 18.3 (Jan 2025).
+
+Popover must conditionally be polyfilled with the `@oddbird/popover-polyfill` polyfill.
+
+```html
+<script type="module">
+  if(!HTMLElement.prototype.hasOwnProperty("popover")){
+    await import("https://unpkg.com/@oddbird/popover-polyfill@latest");
+  }
+</script>
+```
+
+Anchor positioning is not natively supported by any major browser yet.
+
+To support browsers without anchor positioning, you must set a reasonable position. By default popovers are centered in the middle of the screen, which may work for your use case.
+
+For some use cases, you may be able to use the `@oddbird/css-anchor-positioning` polyfill, which adds support for some anchor positioning use cases. It does not support implicit anchors, so you MUST add anchor names to the trigger. Additionally, `position-area` is not supported on popovers by the polyfill, so you MUST use `anchor()` on the desired insets. 
+
+```html
+<!-- MANDATORY: Conditionally install the anchor positioning polyfill -->
+<script type="module">
+  if (!("anchorName" in document.documentElement.style)) {
+    await import("https://unpkg.com/@oddbird/css-anchor-positioning");
+  }
+</script>
+```
+
+```css
+.panel {
+  /* Mandatory: use explicit anchor name */
+  position-anchor: --kebab-anchor;
+  /* Mandatory: use insets rather that position-area for positioning */
+  bottom: auto;
+  right: auto;
+  top: anchor(bottom);
+  left: anchor(left);
+  margin: 0;
+}
+```