@realmorg/ui 2.0.0-alpha.2 → 2.0.0-alpha.4

package/dist/ui.html

@@ -14,6 +14,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -41,6 +47,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       border-bottom: 1px solid var(--border);
@@ -79,11 +89,32 @@
       width: calc(var(--spacing) * 4);
       height: calc(var(--spacing) * 4);
       color: var(--muted-foreground);
-      transition: rotate 0.2s;
+      transition: rotate var(--default-transition-duration) var(--default-transition-timing-function);
     }
     details[open] svg {
       rotate: 180deg;
     }
+    details::details-content {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition:
+        grid-template-rows var(--default-transition-duration) var(--default-transition-timing-function),
+        content-visibility var(--default-transition-duration) allow-discrete;
+    }
+    details[open]::details-content {
+      grid-template-rows: 1fr;
+    }
+    slot:not([name]) {
+      display: block;
+      min-height: 0;
+      overflow: hidden;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      svg,
+      details::details-content {
+        transition: none;
+      }
+    }
   </style>
 
   <details _open="@open" ontoggle="toggled(this)">
@@ -97,6 +128,10 @@
 
 <custom-element name="ui-accordion-trigger" slot="trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex: 1;
@@ -110,6 +145,10 @@
 
 <custom-element name="ui-accordion-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       padding-bottom: calc(var(--spacing) * 4);
@@ -181,6 +220,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: contents;
     }
@@ -188,6 +233,10 @@
       box-sizing: border-box;
       width: 100%;
       max-width: min(calc(var(--spacing) * 128), calc(100% - calc(var(--spacing) * 8)));
+      /* See ui-dialog: an explicit height keeps it from stretching, svh from resizing on scroll. */
+      height: fit-content;
+      max-height: calc(100svh - calc(var(--spacing) * 8));
+      overflow: auto;
       padding: calc(var(--spacing) * 6);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
@@ -197,6 +246,8 @@
     }
     dialog[open] {
       display: grid;
+      /* Safari stretches a grid overlay to its max-height unless the rows are packed at the start. */
+      align-content: start;
       gap: calc(var(--spacing) * 4);
     }
     dialog::backdrop {
@@ -221,6 +272,10 @@
 
 <custom-element name="ui-alert-dialog-trigger" slot="trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host,
     span {
       display: contents;
@@ -232,6 +287,10 @@
 
 <custom-element name="ui-alert-dialog-header" slot="header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       gap: calc(var(--spacing) * 2);
@@ -243,6 +302,10 @@
 
 <custom-element name="ui-alert-dialog-title">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -258,6 +321,10 @@
 
 <custom-element name="ui-alert-dialog-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -273,6 +340,10 @@
 
 <custom-element name="ui-alert-dialog-footer" slot="footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-wrap: wrap;
@@ -293,6 +364,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
     }
@@ -307,6 +382,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
     }
@@ -323,6 +402,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       position: relative;
       display: grid;
@@ -361,6 +446,10 @@
 
 <custom-element name="ui-alert-title">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       min-height: calc(var(--spacing) * 4);
@@ -374,6 +463,10 @@
 
 <custom-element name="ui-alert-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       justify-items: start;
@@ -391,6 +484,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       position: relative;
@@ -415,6 +514,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       align-items: center;
@@ -459,6 +564,10 @@
 
 <custom-element name="ui-attachment-media" slot="media">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       place-content: center;
@@ -485,6 +594,10 @@
 
 <custom-element name="ui-attachment-actions" slot="actions">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       gap: calc(var(--spacing) * 1);
@@ -514,6 +627,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       position: relative;
       display: inline-flex;
@@ -551,6 +670,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: contents;
     }
@@ -568,6 +691,10 @@
 
 <custom-element name="ui-avatar-fallback">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: contents;
     }
@@ -588,6 +715,10 @@
 
 <custom-element name="ui-avatar-group" role="group">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -605,6 +736,10 @@
 
 <custom-element name="ui-avatar-group-count">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       flex-shrink: 0;
@@ -631,6 +766,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       align-items: center;
@@ -685,6 +826,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -695,6 +842,10 @@
 
 <custom-element name="ui-breadcrumb-list">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -717,6 +868,10 @@
 
 <custom-element name="ui-breadcrumb-item" role="listitem">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       align-items: center;
@@ -733,6 +888,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     a {
       color: inherit;
       text-decoration: none;
@@ -753,6 +912,10 @@
 
 <custom-element name="ui-breadcrumb-page">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     span {
       font-weight: var(--font-weight-normal);
       color: var(--foreground);
@@ -768,6 +931,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       align-items: center;
@@ -784,6 +951,10 @@
 
 <custom-element name="ui-breadcrumb-ellipsis">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       align-items: center;
@@ -818,6 +989,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -867,6 +1044,10 @@
 
 <custom-element name="ui-bubble-reactions" slot="reactions">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-wrap: wrap;
@@ -883,6 +1064,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       align-items: stretch;
@@ -912,6 +1099,10 @@
 
 <custom-element name="ui-button-group-text">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -948,6 +1139,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       position: relative;
       z-index: 1;
@@ -975,6 +1170,9 @@
       popovertargetaction: prop.enum(["toggle", "show", "hide"]),
       commandfor: prop.string(),
       command: prop.string(),
+      href: prop.string(),
+      target: prop.string(),
+      rel: prop.string(),
     });
 
     const NATIVE_COMMANDS = "commandForElement" in HTMLButtonElement.prototype;
@@ -1026,6 +1224,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       vertical-align: middle;
@@ -1033,7 +1237,11 @@
     :host([hidden]) {
       display: none;
     }
-    button {
+    is-visible,
+    is-hidden {
+      display: contents;
+    }
+    .control {
       all: unset;
       box-sizing: border-box;
       display: inline-flex;
@@ -1061,14 +1269,15 @@
     }
     /* Mixing toward the text colour darkens a light-mode fill and lightens a dark-mode one, so
        hover never lowers the text contrast. */
-    button:hover {
+    .control:hover {
       background: color-mix(in oklab, var(--primary) 88%, var(--foreground));
     }
-    button:focus-visible {
+    .control:focus-visible {
       border-color: var(--ring);
       box-shadow: var(--focus-ring);
     }
-    button:disabled {
+    .control:disabled,
+    :host([disabled]) a.control {
       pointer-events: none;
       opacity: 0.5;
     }
@@ -1078,77 +1287,82 @@
       flex-shrink: 0;
       pointer-events: none;
     }
-    :host(:state(attr-variant-is-destructive)) button {
+    :host(:state(attr-variant-is-destructive)) .control {
       background: var(--destructive);
       color: var(--destructive-foreground);
     }
-    :host(:state(attr-variant-is-destructive)) button:hover {
+    :host(:state(attr-variant-is-destructive)) .control:hover {
       background: color-mix(in oklab, var(--destructive) 88%, var(--foreground));
     }
-    :host(:state(attr-variant-is-outline)) button {
+    :host(:state(attr-variant-is-outline)) .control {
       border-color: var(--border);
       background: var(--background);
       color: var(--foreground);
       box-shadow: var(--shadow-xs);
     }
-    :host(:state(attr-variant-is-outline)) button:hover,
-    :host(:state(attr-variant-is-ghost)) button:hover {
+    :host(:state(attr-variant-is-outline)) .control:hover,
+    :host(:state(attr-variant-is-ghost)) .control:hover {
       background: var(--accent);
       color: var(--accent-foreground);
     }
-    :host(:state(attr-variant-is-secondary)) button {
+    :host(:state(attr-variant-is-secondary)) .control {
       background: var(--secondary);
       color: var(--secondary-foreground);
     }
-    :host(:state(attr-variant-is-secondary)) button:hover {
+    :host(:state(attr-variant-is-secondary)) .control:hover {
       background: color-mix(in oklab, var(--secondary) 80%, transparent);
     }
-    :host(:state(attr-variant-is-ghost)) button {
+    :host(:state(attr-variant-is-ghost)) .control {
       background: transparent;
       color: var(--foreground);
     }
-    :host(:state(attr-variant-is-link)) button {
+    :host(:state(attr-variant-is-link)) .control {
       background: transparent;
       color: var(--primary);
       text-underline-offset: 4px;
     }
-    :host(:state(attr-variant-is-link)) button:hover {
+    :host(:state(attr-variant-is-link)) .control:hover {
       text-decoration: underline;
     }
-    :host(:state(attr-size-is-xs)) button {
+    :host(:state(attr-size-is-xs)) .control {
       height: calc(var(--spacing) * 6);
       gap: calc(var(--spacing) * 1);
       padding: 0 calc(var(--spacing) * 2);
       font-size: var(--text-xs);
     }
-    :host(:state(attr-size-is-sm)) button {
+    :host(:state(attr-size-is-sm)) .control {
       height: calc(var(--spacing) * 8);
       gap: calc(var(--spacing) * 1.5);
       padding: 0 calc(var(--spacing) * 3);
     }
-    :host(:state(attr-size-is-lg)) button {
+    :host(:state(attr-size-is-lg)) .control {
       height: calc(var(--spacing) * 10);
       padding: 0 calc(var(--spacing) * 6);
     }
-    :host(:is(:state(attr-size-is-icon), :state(attr-size-is-icon-xs), :state(attr-size-is-icon-sm), :state(attr-size-is-icon-lg))) button {
+    :host(:is(:state(attr-size-is-icon), :state(attr-size-is-icon-xs), :state(attr-size-is-icon-sm), :state(attr-size-is-icon-lg))) .control {
       padding: 0;
       width: calc(var(--spacing) * 9);
     }
-    :host(:state(attr-size-is-icon-xs)) button {
+    :host(:state(attr-size-is-icon-xs)) .control {
       width: calc(var(--spacing) * 6);
       height: calc(var(--spacing) * 6);
     }
-    :host(:state(attr-size-is-icon-sm)) button {
+    :host(:state(attr-size-is-icon-sm)) .control {
       width: calc(var(--spacing) * 8);
       height: calc(var(--spacing) * 8);
     }
-    :host(:state(attr-size-is-icon-lg)) button {
+    :host(:state(attr-size-is-icon-lg)) .control {
       width: calc(var(--spacing) * 10);
       height: calc(var(--spacing) * 10);
     }
   </style>
 
-  <button type="button" ref="button" part="button" _aria-label="@label" _aria-description="@description" _disabled="@disabled" onclick="activate()"><slot></slot></button>
+  <is-visible when="@href">
+    <a class="control" ref="link" part="button" _href="@href" _target="@target" _rel="@rel" _aria-label="@label" _aria-description="@description"><slot></slot></a>
+  </is-visible>
+  <is-hidden when="@href">
+    <button class="control" type="button" ref="button" part="button" _aria-label="@label" _aria-description="@description" _disabled="@disabled" onclick="activate()"><slot></slot></button>
+  </is-hidden>
 </custom-element>
 
 <custom-element name="ui-calendar" form-associated>
@@ -1231,6 +1445,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-block;
       padding: calc(var(--spacing) * 3);
@@ -1322,6 +1542,12 @@
 
 <custom-element name="ui-card">
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -1340,6 +1566,10 @@
 
 <custom-element name="ui-card-header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       grid-auto-rows: min-content;
@@ -1361,6 +1591,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -1377,6 +1611,10 @@
 
 <custom-element name="ui-card-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       font-size: var(--text-sm);
@@ -1389,6 +1627,10 @@
 
 <custom-element name="ui-card-action">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       grid-column: 2;
@@ -1402,6 +1644,10 @@
 
 <custom-element name="ui-card-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       padding: 0 calc(var(--spacing) * 6);
@@ -1413,6 +1659,10 @@
 
 <custom-element name="ui-card-footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -1499,6 +1749,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       --carousel-direction: row;
       --carousel-axis: x;
@@ -1554,6 +1810,10 @@
 
 <custom-element name="ui-carousel-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       min-width: 0;
@@ -1586,6 +1846,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       box-sizing: border-box;
@@ -1601,6 +1865,10 @@
 
 <custom-element name="ui-carousel-previous">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
     }
@@ -1611,6 +1879,10 @@
 
 <custom-element name="ui-carousel-next">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
     }
@@ -1705,6 +1977,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       width: 100%;
@@ -1799,6 +2077,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host(:state(attr-checked)) label {
       color: var(--foreground);
     }
@@ -1890,6 +2174,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       position: relative;
       display: block;
@@ -1949,6 +2239,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -1978,6 +2274,10 @@
 
 <custom-element name="ui-collapsible-trigger" slot="trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -1998,6 +2298,10 @@
 
 <custom-element name="ui-collapsible-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -2067,6 +2371,12 @@
       combo.query = "";
       combo.active = Math.max(0, combo.visible.findIndex((item) => item.chosen));
       refs.list.showPopover();
+      // Once open, the list keeps the side it opened on. Re-deciding while the page scrolls makes
+      // it jump, because iOS Safari's toolbar changes the viewport height mid-scroll.
+      // Firefox holds a box that does not fit against the screen edge, so touching it counts too.
+      internals.states.delete("flipped");
+      const box = refs.list.getBoundingClientRect();
+      if (box.bottom >= innerHeight || box.top <= 0) internals.states.add("flipped");
     }
 
     function close() {
@@ -2101,6 +2411,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       min-width: calc(var(--spacing) * 48);
@@ -2134,6 +2450,12 @@
       font-size: var(--text-sm);
       outline: none;
     }
+    /* iOS Safari zooms in on a focused field whose text is under 16px. */
+    @media (pointer: coarse) {
+      input {
+        font-size: var(--text-base);
+      }
+    }
     .chevron {
       width: calc(var(--spacing) * 4);
       height: calc(var(--spacing) * 4);
@@ -2155,9 +2477,17 @@
       box-shadow: var(--shadow-md);
       inset: auto;
       position-anchor: --combobox;
+      height: fit-content;
       position-area: bottom span-right;
       position-try-fallbacks: flip-block;
     }
+    [role="listbox"]:popover-open {
+      position-try-fallbacks: none;
+    }
+    :host(:state(flipped)) [role="listbox"] {
+      position-area: top span-right;
+      margin: 0 0 calc(var(--spacing) * 1);
+    }
     [role="option"] {
       display: flex;
       align-items: center;
@@ -2309,6 +2639,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -2340,6 +2676,12 @@
       font-size: var(--text-sm);
       outline: none;
     }
+    /* iOS Safari zooms in on a focused field whose text is under 16px. */
+    @media (pointer: coarse) {
+      input {
+        font-size: var(--text-base);
+      }
+    }
     input::placeholder {
       color: var(--muted-foreground);
     }
@@ -2437,6 +2779,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: contents;
     }
@@ -2447,6 +2795,10 @@
 
 <custom-element name="ui-context-menu-trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -2475,6 +2827,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       position: fixed;
       box-sizing: border-box;
@@ -2569,12 +2925,21 @@
     observe(() => {
       const dialog = refs.dialog;
       if (!dialog || props.open === dialog.open) return;
-      if (props.open) dialog.showModal();
-      else dialog.close();
+      if (!props.open) return dialog.close();
+      dialog.showModal();
+      // Left to the browser, focus lands on the first button (often close) with a focus ring after a
+      // tap, and Firefox and WebKit ignore autofocus on slotted content.
+      (host.querySelector("[autofocus]") ?? dialog).focus();
     });
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: contents;
     }
@@ -2582,7 +2947,10 @@
       box-sizing: border-box;
       width: 100%;
       max-width: min(calc(var(--spacing) * 128), calc(100% - calc(var(--spacing) * 8)));
-      max-height: calc(100% - calc(var(--spacing) * 8));
+      /* Without an explicit height, a dialog pinned to both edges of the screen can stretch to
+         full height. svh stays the same while a phone's address bar shows and hides. */
+      height: fit-content;
+      max-height: calc(100svh - calc(var(--spacing) * 8));
       padding: calc(var(--spacing) * 6);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
@@ -2591,8 +2959,13 @@
       box-shadow: var(--shadow-lg);
       overflow: auto;
     }
+    dialog:focus {
+      outline: none;
+    }
     dialog[open] {
       display: grid;
+      /* Safari stretches a grid overlay to its max-height unless the rows are packed at the start. */
+      align-content: start;
       gap: calc(var(--spacing) * 4);
       animation: zoom 0.2s ease-out;
     }
@@ -2611,7 +2984,11 @@
       display: flex;
       flex-direction: column;
     }
+    [part="body"] {
+      display: contents;
+    }
     :host(:is(:state(attr-side-is-left), :state(attr-side-is-right))) [part="body"] {
+      display: block;
       flex: 1;
     }
     :host(:state(attr-side-is-right)) dialog {
@@ -2680,6 +3057,7 @@
   <dialog
     ref="dialog"
     part="dialog"
+    tabindex="-1"
     _aria-label="#dialog.label"
     _aria-description="#dialog.description"
     onclose="closed()"
@@ -2696,6 +3074,10 @@
 
 <custom-element name="ui-dialog-trigger" slot="trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host,
     span {
       display: contents;
@@ -2711,6 +3093,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host,
     span {
       display: contents;
@@ -2722,6 +3108,10 @@
 
 <custom-element name="ui-dialog-header" slot="header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       gap: calc(var(--spacing) * 2);
@@ -2733,6 +3123,10 @@
 
 <custom-element name="ui-dialog-title">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -2749,6 +3143,10 @@
 
 <custom-element name="ui-dialog-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -2764,6 +3162,10 @@
 
 <custom-element name="ui-dialog-footer" slot="footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-wrap: wrap;
@@ -2785,6 +3187,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: contents;
     }
@@ -2859,20 +3267,33 @@
     observe(() => {
       const dialog = refs.dialog;
       if (!dialog || props.open === dialog.open) return;
-      if (props.open) dialog.showModal();
-      else dialog.close();
+      if (!props.open) return dialog.close();
+      dialog.showModal();
+      // Left to the browser, focus lands on the first button (often close) with a focus ring after a
+      // tap, and Firefox and WebKit ignore autofocus on slotted content.
+      (host.querySelector("[autofocus]") ?? dialog).focus();
     });
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: contents;
     }
+    dialog:focus {
+      outline: none;
+    }
     dialog {
       box-sizing: border-box;
       width: 100%;
       max-width: none;
-      max-height: 80dvh;
+      height: fit-content;
+      max-height: 80svh;
       margin: auto 0 0;
       padding: calc(var(--spacing) * 4) calc(var(--spacing) * 6) calc(var(--spacing) * 6);
       border: 1px solid var(--border);
@@ -2898,9 +3319,14 @@
     }
     dialog[open] {
       display: grid;
+      /* Safari stretches a grid overlay to its max-height unless the rows are packed at the start. */
+      align-content: start;
       gap: calc(var(--spacing) * 4);
       animation: slide 0.25s ease-out;
     }
+    [part="body"] {
+      display: contents;
+    }
     dialog::backdrop {
       background: rgb(0 0 0 / 0.5);
     }
@@ -2933,6 +3359,7 @@
   <dialog
     ref="dialog"
     part="dialog"
+    tabindex="-1"
     _aria-label="#drawer.label"
     _aria-description="#drawer.description"
     onclose="closed()"
@@ -2946,6 +3373,10 @@
 
 <custom-element name="ui-drawer-trigger" slot="trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host,
     span {
       display: contents;
@@ -2957,6 +3388,10 @@
 
 <custom-element name="ui-drawer-close">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host,
     span {
       display: contents;
@@ -2968,6 +3403,10 @@
 
 <custom-element name="ui-drawer-header" slot="header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       gap: calc(var(--spacing) * 1.5);
@@ -2979,6 +3418,10 @@
 
 <custom-element name="ui-drawer-title">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -2994,6 +3437,10 @@
 
 <custom-element name="ui-drawer-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -3009,6 +3456,10 @@
 
 <custom-element name="ui-drawer-footer" slot="footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       gap: calc(var(--spacing) * 2);
@@ -3039,6 +3490,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: contents;
     }
@@ -3049,6 +3506,10 @@
 
 <custom-element name="ui-dropdown-menu-trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-block;
       vertical-align: middle;
@@ -3066,8 +3527,15 @@
 
     const ITEMS = ":is(ui-menu-item, ui-menu-checkbox-item, ui-menu-radio-item):not([disabled])";
 
+    // Once open, the menu keeps the side it opened on. Re-deciding while the page scrolls makes it
+    // jump, because iOS Safari's toolbar changes the viewport height mid-scroll.
+    // Firefox holds a box that does not fit against the screen edge, so touching it counts too.
     function opened(event) {
-      if (event.newState === "open") host.querySelector(ITEMS)?.focus();
+      if (event.newState !== "open") return;
+      internals.states.delete("flipped");
+      const box = host.getBoundingClientRect();
+      if (box.bottom >= innerHeight || box.top <= 0) internals.states.add("flipped");
+      host.querySelector(ITEMS)?.focus({ preventScroll: true });
     }
 
     function leave(event) {
@@ -3082,6 +3550,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       box-sizing: border-box;
       min-width: calc(var(--spacing) * 32);
@@ -3093,6 +3565,9 @@
       color: var(--popover-foreground);
       box-shadow: var(--shadow-md);
       inset: auto;
+      height: fit-content;
+      max-height: calc(100svh - calc(var(--spacing) * 8));
+      overflow-y: auto;
       position-area: bottom span-right;
       position-try-fallbacks: flip-block, flip-inline;
     }
@@ -3107,6 +3582,24 @@
       position-area: top span-left;
       margin: 0 0 calc(var(--spacing) * 1);
     }
+    :host(:popover-open) {
+      position-try-fallbacks: flip-inline;
+    }
+    :host(:state(flipped)) {
+      position-area: top span-right;
+      margin: 0 0 calc(var(--spacing) * 1);
+    }
+    :host(:state(flipped):state(attr-placement-is-bottom-end)) {
+      position-area: top span-left;
+    }
+    :host(:state(flipped):state(attr-placement-is-top-start)) {
+      position-area: bottom span-right;
+      margin: calc(var(--spacing) * 1) 0 0;
+    }
+    :host(:state(flipped):state(attr-placement-is-top-end)) {
+      position-area: bottom span-left;
+      margin: calc(var(--spacing) * 1) 0 0;
+    }
   </style>
 
   <div part="menu" focusgroup="menu block wrap"><slot></slot></div>
@@ -3143,6 +3636,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -3210,6 +3707,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -3265,6 +3766,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -3305,6 +3810,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -3346,6 +3855,10 @@
 
 <custom-element name="ui-menu-label">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
@@ -3359,6 +3872,10 @@
 
 <custom-element name="ui-menu-group" role="group">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -3369,6 +3886,10 @@
 
 <custom-element name="ui-menu-separator" role="separator">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       height: 1px;
@@ -3380,6 +3901,10 @@
 
 <custom-element name="ui-menu-shortcut">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       margin-inline-start: auto;
       font-size: var(--text-xs);
@@ -3393,6 +3918,12 @@
 
 <custom-element name="ui-empty">
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -3413,6 +3944,10 @@
 
 <custom-element name="ui-empty-header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -3427,6 +3962,10 @@
 
 <custom-element name="ui-empty-media">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-shrink: 0;
@@ -3456,6 +3995,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -3472,6 +4015,10 @@
 
 <custom-element name="ui-empty-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       font-size: var(--text-sm);
@@ -3484,6 +4031,10 @@
 
 <custom-element name="ui-empty-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -3508,6 +4059,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -3541,6 +4098,10 @@
 
 <custom-element name="ui-field-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex: 1;
@@ -3555,6 +4116,10 @@
 
 <custom-element name="ui-field-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       font-size: var(--text-sm);
@@ -3568,6 +4133,10 @@
 
 <custom-element name="ui-field-group">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -3587,6 +4156,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -3603,6 +4176,10 @@
 
 <custom-element name="ui-field-legend" slot="legend">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       font-size: var(--text-base);
@@ -3649,6 +4226,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: contents;
     }
@@ -3659,6 +4242,10 @@
 
 <custom-element name="ui-hover-card-trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-block;
     }
@@ -3669,14 +4256,32 @@
 
 <custom-element name="ui-hover-card-content">
   <script>
-    defineProps({
+    const props = defineProps({
       placement: prop.enum(["bottom", "top", "left", "right"]).default("bottom"),
     });
 
+    const BLOCK_SIDES = new Set(["bottom", "top"]);
+
+    // Once open, it keeps the side it opened on. Re-deciding while the page scrolls makes it jump,
+    // because iOS Safari's toolbar changes the viewport height mid-scroll.
+    // Firefox holds a box that does not fit against the screen edge, so touching it counts too.
+    function opened(event) {
+      internals.states.delete("flipped");
+      if (event.newState !== "open" || !BLOCK_SIDES.has(props.placement)) return;
+      const box = host.getBoundingClientRect();
+      if (box.bottom >= innerHeight || box.top <= 0) internals.states.add("flipped");
+    }
+
     attrs.popover ??= "manual";
+
+    listen("toggle", opened);
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       box-sizing: border-box;
       width: calc(var(--spacing) * 64);
@@ -3688,15 +4293,27 @@
       color: var(--popover-foreground);
       box-shadow: var(--shadow-md);
       inset: auto;
+      height: fit-content;
+      max-height: calc(100svh - calc(var(--spacing) * 8));
+      overflow-y: auto;
       position-area: bottom;
       position-try-fallbacks: flip-block, flip-inline;
     }
+    :host(:popover-open) {
+      position-try-fallbacks: flip-inline;
+    }
     :host(:state(attr-width)) {
       width: calc(var(--spacing) * var(--attr-width));
     }
     :host(:state(attr-placement-is-top)) {
       position-area: top;
     }
+    :host(:state(flipped)) {
+      position-area: top;
+    }
+    :host(:state(flipped):state(attr-placement-is-top)) {
+      position-area: bottom;
+    }
     :host(:state(attr-placement-is-left)) {
       position-area: left;
     }
@@ -3724,6 +4341,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -3751,6 +4374,12 @@
       font-size: var(--text-sm);
       outline: none;
     }
+    /* iOS Safari zooms in on a focused field whose text is under 16px. */
+    @media (pointer: coarse) {
+      input {
+        font-size: var(--text-base);
+      }
+    }
     input::placeholder {
       color: var(--muted-foreground);
     }
@@ -3762,6 +4391,10 @@
 
 <custom-element name="ui-input-group-addon">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       order: -1;
@@ -3866,6 +4499,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
     }
@@ -3886,6 +4525,12 @@
       text-align: center;
       outline: none;
     }
+    /* iOS Safari zooms in on a focused field whose text is under 16px. */
+    @media (pointer: coarse) {
+      input {
+        font-size: var(--text-base);
+      }
+    }
     input:first-child,
     input[data-gap] {
       margin-left: 0;
@@ -3952,6 +4597,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       min-width: 0;
@@ -3971,6 +4622,12 @@
       outline: none;
       transition: color var(--default-transition-duration), box-shadow var(--default-transition-duration);
     }
+    /* iOS Safari zooms in on a focused field whose text is under 16px. */
+    @media (pointer: coarse) {
+      input {
+        font-size: var(--text-base);
+      }
+    }
     input::placeholder {
       color: var(--muted-foreground);
     }
@@ -4023,6 +4680,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-wrap: wrap;
@@ -4051,6 +4714,10 @@
 
 <custom-element name="ui-item-group" role="list">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -4062,6 +4729,10 @@
 
 <custom-element name="ui-item-media">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-shrink: 0;
@@ -4099,6 +4770,10 @@
 
 <custom-element name="ui-item-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex: 1;
@@ -4113,6 +4788,10 @@
 
 <custom-element name="ui-item-title">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -4127,6 +4806,10 @@
 
 <custom-element name="ui-item-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: -webkit-box;
       overflow: hidden;
@@ -4143,6 +4826,10 @@
 
 <custom-element name="ui-item-actions">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -4155,6 +4842,10 @@
 
 <custom-element name="ui-item-header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-basis: 100%;
@@ -4169,6 +4860,10 @@
 
 <custom-element name="ui-item-footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-basis: 100%;
@@ -4183,6 +4878,12 @@
 
 <custom-element name="ui-kbd">
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       align-items: center;
@@ -4207,6 +4908,10 @@
 
 <custom-element name="ui-kbd-group">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       align-items: center;
@@ -4241,6 +4946,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       align-items: center;
@@ -4264,6 +4975,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -4296,6 +5013,12 @@
 
 <custom-element name="ui-menubar" role="menubar">
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -4338,6 +5061,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: contents;
     }
@@ -4348,6 +5075,10 @@
 
 <custom-element name="ui-menubar-trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
     }
@@ -4376,8 +5107,15 @@
   <script>
     const ITEMS = ":is(ui-menu-item, ui-menu-checkbox-item, ui-menu-radio-item):not([disabled])";
 
+    // Once open, it keeps the side it opened on. Re-deciding while the page scrolls makes it jump,
+    // because iOS Safari's toolbar changes the viewport height mid-scroll.
+    // Firefox holds a box that does not fit against the screen edge, so touching it counts too.
     function opened(event) {
-      if (event.newState === "open") host.querySelector(ITEMS)?.focus();
+      if (event.newState !== "open") return;
+      internals.states.delete("flipped");
+      const box = host.getBoundingClientRect();
+      if (box.bottom >= innerHeight || box.top <= 0) internals.states.add("flipped");
+      host.querySelector(ITEMS)?.focus({ preventScroll: true });
     }
 
     function leave(event) {
@@ -4392,6 +5130,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       box-sizing: border-box;
       min-width: calc(var(--spacing) * 48);
@@ -4403,9 +5145,19 @@
       color: var(--popover-foreground);
       box-shadow: var(--shadow-md);
       inset: auto;
+      height: fit-content;
+      max-height: calc(100svh - calc(var(--spacing) * 8));
+      overflow-y: auto;
       position-area: bottom span-right;
       position-try-fallbacks: flip-block, flip-inline;
     }
+    :host(:popover-open) {
+      position-try-fallbacks: flip-inline;
+    }
+    :host(:state(flipped)) {
+      position-area: top span-right;
+      margin: 0 0 calc(var(--spacing) * 2) calc(var(--spacing) * -1);
+    }
   </style>
 
   <div part="menu" focusgroup="menu block wrap"><slot></slot></div>
@@ -4440,6 +5192,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       position: relative;
       display: block;
@@ -4478,6 +5236,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       gap: calc(var(--spacing) * 2);
@@ -4510,6 +5274,10 @@
 
 <custom-element name="ui-message-avatar" slot="avatar">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-self: flex-end;
@@ -4522,6 +5290,10 @@
 
 <custom-element name="ui-message-header" slot="header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -4537,6 +5309,10 @@
 
 <custom-element name="ui-message-footer" slot="footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -4556,6 +5332,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -4566,6 +5348,10 @@
 
 <custom-element name="ui-navigation-menu-list">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -4609,6 +5395,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       position: relative;
       display: block;
@@ -4629,6 +5419,9 @@
       box-shadow: var(--shadow-md);
       inset: auto;
       position-anchor: --navigation-trigger;
+      height: fit-content;
+      max-height: calc(100svh - calc(var(--spacing) * 8));
+      overflow-y: auto;
       position-area: bottom span-right;
     }
   </style>
@@ -4639,6 +5432,10 @@
 
 <custom-element name="ui-navigation-menu-trigger" delegates-focus>
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
     }
@@ -4681,6 +5478,10 @@
 
 <custom-element name="ui-navigation-menu-content" slot="content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       gap: calc(var(--spacing) * 1);
@@ -4713,6 +5514,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: var(--ui-navigation-link-display, inline-flex);
     }
@@ -4813,6 +5618,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       justify-content: center;
@@ -4931,6 +5742,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: contents;
     }
@@ -4941,6 +5758,10 @@
 
 <custom-element name="ui-popover-trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-block;
       vertical-align: middle;
@@ -4952,14 +5773,32 @@
 
 <custom-element name="ui-popover-content">
   <script>
-    defineProps({
+    const props = defineProps({
       placement: prop.enum(["bottom", "top", "left", "right"]).default("bottom"),
     });
 
+    const BLOCK_SIDES = new Set(["bottom", "top"]);
+
+    // Once open, it keeps the side it opened on. Re-deciding while the page scrolls makes it jump,
+    // because iOS Safari's toolbar changes the viewport height mid-scroll.
+    // Firefox holds a box that does not fit against the screen edge, so touching it counts too.
+    function opened(event) {
+      internals.states.delete("flipped");
+      if (event.newState !== "open" || !BLOCK_SIDES.has(props.placement)) return;
+      const box = host.getBoundingClientRect();
+      if (box.bottom >= innerHeight || box.top <= 0) internals.states.add("flipped");
+    }
+
     attrs.popover ??= "auto";
+
+    listen("toggle", opened);
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       box-sizing: border-box;
       width: calc(var(--spacing) * 72);
@@ -4971,11 +5810,17 @@
       color: var(--popover-foreground);
       box-shadow: var(--shadow-md);
       inset: auto;
+      height: fit-content;
+      max-height: calc(100svh - calc(var(--spacing) * 8));
+      overflow-y: auto;
       position-area: bottom;
       position-try-fallbacks: flip-block, flip-inline;
     }
     :host(:popover-open) {
+      position-try-fallbacks: flip-inline;
       display: grid;
+      /* Safari stretches a grid overlay to its max-height unless the rows are packed at the start. */
+      align-content: start;
       gap: calc(var(--spacing) * 4);
     }
     :host(:state(attr-width)) {
@@ -4984,6 +5829,12 @@
     :host(:state(attr-placement-is-top)) {
       position-area: top;
     }
+    :host(:state(flipped)) {
+      position-area: top;
+    }
+    :host(:state(flipped):state(attr-placement-is-top)) {
+      position-area: bottom;
+    }
     :host(:state(attr-placement-is-left)) {
       position-area: left;
     }
@@ -5004,6 +5855,10 @@
 
 <custom-element name="ui-popover-header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       gap: calc(var(--spacing) * 1);
@@ -5015,6 +5870,10 @@
 
 <custom-element name="ui-popover-title">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -5031,6 +5890,10 @@
 
 <custom-element name="ui-popover-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -5054,6 +5917,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       width: 100%;
@@ -5123,6 +5992,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       gap: calc(var(--spacing) * 3);
@@ -5208,6 +6083,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       width: 100%;
@@ -5236,6 +6117,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       flex: var(--attr-size) 1 0;
@@ -5311,6 +6196,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       position: relative;
       display: flex;
@@ -5365,6 +6254,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       position: relative;
@@ -5441,6 +6336,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       min-width: calc(var(--spacing) * 32);
@@ -5466,6 +6367,12 @@
       outline: none;
       cursor: pointer;
     }
+    /* iOS Safari zooms in on a focused field whose text is under 16px. */
+    @media (pointer: coarse) {
+      select {
+        font-size: var(--text-base);
+      }
+    }
     :host(:state(attr-size-is-sm)) select {
       height: calc(var(--spacing) * 8);
     }
@@ -5510,6 +6417,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       flex-shrink: 0;
@@ -5577,6 +6490,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: contents;
     }
@@ -5592,6 +6511,10 @@
 
 <custom-element name="ui-sheet-trigger" slot="trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host,
     span {
       display: contents;
@@ -5603,6 +6526,10 @@
 
 <custom-element name="ui-sheet-close">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host,
     span {
       display: contents;
@@ -5614,6 +6541,10 @@
 
 <custom-element name="ui-sheet-header" slot="header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       gap: calc(var(--spacing) * 2);
@@ -5625,6 +6556,10 @@
 
 <custom-element name="ui-sheet-title">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -5641,6 +6576,10 @@
 
 <custom-element name="ui-sheet-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -5656,6 +6595,10 @@
 
 <custom-element name="ui-sheet-footer" slot="footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-wrap: wrap;
@@ -5706,11 +6649,17 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       --ui-sidebar-width: calc(var(--spacing) * 64);
       --ui-sidebar-label: block;
       display: flex;
-      min-height: 100dvh;
+      min-height: 100svh;
       background: var(--sidebar);
     }
     :host(:state(attr-collapsed)) {
@@ -5721,7 +6670,7 @@
       position: sticky;
       top: 0;
       width: var(--ui-sidebar-width);
-      height: 100dvh;
+      height: 100svh;
       flex-shrink: 0;
       transition: width 0.2s ease;
     }
@@ -5760,6 +6709,10 @@
 
 <custom-element name="ui-sidebar" slot="sidebar">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -5778,6 +6731,10 @@
 
 <custom-element name="ui-sidebar-header" slot="header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -5791,6 +6748,10 @@
 
 <custom-element name="ui-sidebar-footer" slot="footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -5804,6 +6765,10 @@
 
 <custom-element name="ui-sidebar-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       flex: 1;
@@ -5830,6 +6795,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -5842,6 +6811,10 @@
 
 <custom-element name="ui-sidebar-group-label">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: var(--ui-sidebar-label, block);
       height: calc(var(--spacing) * 8);
@@ -5859,6 +6832,10 @@
 
 <custom-element name="ui-sidebar-menu">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -5877,6 +6854,10 @@
 
 <custom-element name="ui-sidebar-menu-item" role="listitem">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       position: relative;
       display: block;
@@ -5917,6 +6898,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -5958,6 +6943,10 @@
 
 <custom-element name="ui-sidebar-menu-badge">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: var(--ui-sidebar-label, block);
       position: absolute;
@@ -5989,6 +6978,10 @@
 
 <custom-element name="ui-sidebar-inset">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex: 1;
@@ -6011,6 +7004,12 @@
 
 <custom-element name="ui-skeleton">
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       border-radius: var(--radius-md);
@@ -6056,9 +7055,21 @@
         return `${((props.value - props.min) / (props.max - props.min || 1)) * 100}%`;
       },
     });
+
+    // Writing the value Safari just set, during a finger drag, makes the thumb jump.
+    observe(() => {
+      const value = String(props.value);
+      if (refs.control && refs.control.value !== value) refs.control.value = value;
+    });
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       min-width: calc(var(--spacing) * 32);
@@ -6072,6 +7083,8 @@
       background: transparent;
       cursor: pointer;
       outline: none;
+      /* The slider owns the whole gesture, so the browser never turns a drag into a page pan. */
+      touch-action: none;
     }
     input::-webkit-slider-runnable-track {
       height: calc(var(--spacing) * 1.5);
@@ -6103,6 +7116,20 @@
     input:focus-visible::-webkit-slider-thumb {
       box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 50%, transparent);
     }
+    @media (pointer: coarse) {
+      input {
+        height: calc(var(--spacing) * 6);
+      }
+      input::-webkit-slider-thumb {
+        width: calc(var(--spacing) * 6);
+        height: calc(var(--spacing) * 6);
+        margin-top: calc(var(--spacing) * -2.25);
+      }
+      input::-moz-range-thumb {
+        width: calc(var(--spacing) * 6);
+        height: calc(var(--spacing) * 6);
+      }
+    }
     input:disabled {
       cursor: not-allowed;
       opacity: 0.5;
@@ -6116,7 +7143,6 @@
     _min="@min"
     _max="@max"
     _step="@step"
-    _value="@value"
     _disabled="@disabled"
     _aria-label="@label"
 >
@@ -6136,6 +7162,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       width: calc(var(--attr-size) * 1px);
@@ -6182,6 +7214,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host(:state(attr-checked)) label {
       color: var(--foreground);
     }
@@ -6282,6 +7320,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       width: 100%;
@@ -6376,6 +7420,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -6393,6 +7443,10 @@
 
 <custom-element name="ui-tabs-list">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       width: fit-content;
@@ -6429,6 +7483,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex: 1;
@@ -6488,6 +7546,10 @@
 
 <custom-element name="ui-tabs-content" role="tabpanel">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       flex: 1;
@@ -6518,6 +7580,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -6538,6 +7606,12 @@
       field-sizing: content;
       resize: vertical;
     }
+    /* iOS Safari zooms in on a focused field whose text is under 16px. */
+    @media (pointer: coarse) {
+      textarea {
+        font-size: var(--text-base);
+      }
+    }
     textarea::placeholder {
       color: var(--muted-foreground);
     }
@@ -6615,6 +7689,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     ol {
       position: fixed;
       inset: auto calc(var(--spacing) * 4) calc(var(--spacing) * 4) auto;
@@ -6736,6 +7816,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       align-items: center;
@@ -6781,6 +7867,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
     }
@@ -6885,6 +7977,12 @@
   </script>
 
   <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: contents;
     }
@@ -6895,6 +7993,10 @@
 
 <custom-element name="ui-tooltip-trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-block;
       vertical-align: middle;
@@ -6906,14 +8008,32 @@
 
 <custom-element name="ui-tooltip-content" role="tooltip">
   <script>
-    defineProps({
+    const props = defineProps({
       placement: prop.enum(["top", "bottom", "left", "right"]).default("top"),
     });
 
+    const BLOCK_SIDES = new Set(["top", "bottom"]);
+
+    // Once open, it keeps the side it opened on. Re-deciding while the page scrolls makes it jump,
+    // because iOS Safari's toolbar changes the viewport height mid-scroll.
+    // Firefox holds a box that does not fit against the screen edge, so touching it counts too.
+    function opened(event) {
+      internals.states.delete("flipped");
+      if (event.newState !== "open" || !BLOCK_SIDES.has(props.placement)) return;
+      const box = host.getBoundingClientRect();
+      if (box.bottom >= innerHeight || box.top <= 0) internals.states.add("flipped");
+    }
+
     attrs.popover ??= "manual";
+
+    listen("toggle", opened);
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       margin: 0 0 calc(var(--spacing) * 1);
       padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
@@ -6923,6 +8043,9 @@
       color: var(--background);
       font-size: var(--text-xs);
       inset: auto;
+      height: fit-content;
+      max-height: calc(100svh - calc(var(--spacing) * 8));
+      overflow-y: auto;
       position-area: top;
       position-try-fallbacks: flip-block;
     }
@@ -6930,6 +8053,17 @@
       position-area: bottom;
       margin: calc(var(--spacing) * 1) 0 0;
     }
+    :host(:popover-open) {
+      position-try-fallbacks: none;
+    }
+    :host(:state(flipped)) {
+      position-area: bottom;
+      margin: calc(var(--spacing) * 1) 0 0;
+    }
+    :host(:state(flipped):state(attr-placement-is-bottom)) {
+      position-area: top;
+      margin: 0 0 calc(var(--spacing) * 1);
+    }
     :host(:state(attr-placement-is-left)) {
       position-area: left;
       margin: 0 calc(var(--spacing) * 1) 0 0;