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

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);
@@ -97,6 +107,10 @@
 
 <custom-element name="ui-accordion-trigger" slot="trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex: 1;
@@ -110,6 +124,10 @@
 
 <custom-element name="ui-accordion-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       padding-bottom: calc(var(--spacing) * 4);
@@ -181,6 +199,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 +212,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 +225,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 +251,10 @@
 
 <custom-element name="ui-alert-dialog-trigger" slot="trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host,
     span {
       display: contents;
@@ -232,6 +266,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 +281,10 @@
 
 <custom-element name="ui-alert-dialog-title">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -258,6 +300,10 @@
 
 <custom-element name="ui-alert-dialog-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -273,6 +319,10 @@
 
 <custom-element name="ui-alert-dialog-footer" slot="footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-wrap: wrap;
@@ -293,6 +343,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
     }
@@ -307,6 +361,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
     }
@@ -323,6 +381,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 +425,10 @@
 
 <custom-element name="ui-alert-title">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       min-height: calc(var(--spacing) * 4);
@@ -374,6 +442,10 @@
 
 <custom-element name="ui-alert-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       justify-items: start;
@@ -391,6 +463,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 +493,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 +543,10 @@
 
 <custom-element name="ui-attachment-media" slot="media">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       place-content: center;
@@ -485,6 +573,10 @@
 
 <custom-element name="ui-attachment-actions" slot="actions">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       gap: calc(var(--spacing) * 1);
@@ -514,6 +606,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 +649,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: contents;
     }
@@ -568,6 +670,10 @@
 
 <custom-element name="ui-avatar-fallback">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: contents;
     }
@@ -588,6 +694,10 @@
 
 <custom-element name="ui-avatar-group" role="group">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -605,6 +715,10 @@
 
 <custom-element name="ui-avatar-group-count">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       flex-shrink: 0;
@@ -631,6 +745,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 +805,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 +821,10 @@
 
 <custom-element name="ui-breadcrumb-list">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -717,6 +847,10 @@
 
 <custom-element name="ui-breadcrumb-item" role="listitem">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       align-items: center;
@@ -733,6 +867,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     a {
       color: inherit;
       text-decoration: none;
@@ -753,6 +891,10 @@
 
 <custom-element name="ui-breadcrumb-page">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     span {
       font-weight: var(--font-weight-normal);
       color: var(--foreground);
@@ -768,6 +910,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       align-items: center;
@@ -784,6 +930,10 @@
 
 <custom-element name="ui-breadcrumb-ellipsis">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       align-items: center;
@@ -818,6 +968,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 +1023,10 @@
 
 <custom-element name="ui-bubble-reactions" slot="reactions">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-wrap: wrap;
@@ -883,6 +1043,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 +1078,10 @@
 
 <custom-element name="ui-button-group-text">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -948,6 +1118,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       position: relative;
       z-index: 1;
@@ -1026,6 +1200,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;
@@ -1231,6 +1411,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 +1508,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 +1532,10 @@
 
 <custom-element name="ui-card-header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       grid-auto-rows: min-content;
@@ -1361,6 +1557,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -1377,6 +1577,10 @@
 
 <custom-element name="ui-card-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       font-size: var(--text-sm);
@@ -1389,6 +1593,10 @@
 
 <custom-element name="ui-card-action">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       grid-column: 2;
@@ -1402,6 +1610,10 @@
 
 <custom-element name="ui-card-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       padding: 0 calc(var(--spacing) * 6);
@@ -1413,6 +1625,10 @@
 
 <custom-element name="ui-card-footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -1499,6 +1715,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 +1776,10 @@
 
 <custom-element name="ui-carousel-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       min-width: 0;
@@ -1586,6 +1812,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       box-sizing: border-box;
@@ -1601,6 +1831,10 @@
 
 <custom-element name="ui-carousel-previous">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
     }
@@ -1611,6 +1845,10 @@
 
 <custom-element name="ui-carousel-next">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
     }
@@ -1705,6 +1943,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 +2043,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 +2140,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 +2205,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 +2240,10 @@
 
 <custom-element name="ui-collapsible-trigger" slot="trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -1998,6 +2264,10 @@
 
 <custom-element name="ui-collapsible-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -2101,6 +2371,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 +2410,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,6 +2437,7 @@
       box-shadow: var(--shadow-md);
       inset: auto;
       position-anchor: --combobox;
+      height: fit-content;
       position-area: bottom span-right;
       position-try-fallbacks: flip-block;
     }
@@ -2309,6 +2592,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 +2629,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 +2732,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 +2748,10 @@
 
 <custom-element name="ui-context-menu-trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -2475,6 +2780,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       position: fixed;
       box-sizing: border-box;
@@ -2569,12 +2878,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 +2900,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 +2912,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 +2937,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 +3010,7 @@
   <dialog
     ref="dialog"
     part="dialog"
+    tabindex="-1"
     _aria-label="#dialog.label"
     _aria-description="#dialog.description"
     onclose="closed()"
@@ -2696,6 +3027,10 @@
 
 <custom-element name="ui-dialog-trigger" slot="trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host,
     span {
       display: contents;
@@ -2711,6 +3046,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host,
     span {
       display: contents;
@@ -2722,6 +3061,10 @@
 
 <custom-element name="ui-dialog-header" slot="header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       gap: calc(var(--spacing) * 2);
@@ -2733,6 +3076,10 @@
 
 <custom-element name="ui-dialog-title">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -2749,6 +3096,10 @@
 
 <custom-element name="ui-dialog-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -2764,6 +3115,10 @@
 
 <custom-element name="ui-dialog-footer" slot="footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-wrap: wrap;
@@ -2785,6 +3140,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 +3220,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 +3272,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 +3312,7 @@
   <dialog
     ref="dialog"
     part="dialog"
+    tabindex="-1"
     _aria-label="#drawer.label"
     _aria-description="#drawer.description"
     onclose="closed()"
@@ -2946,6 +3326,10 @@
 
 <custom-element name="ui-drawer-trigger" slot="trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host,
     span {
       display: contents;
@@ -2957,6 +3341,10 @@
 
 <custom-element name="ui-drawer-close">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host,
     span {
       display: contents;
@@ -2968,6 +3356,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 +3371,10 @@
 
 <custom-element name="ui-drawer-title">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -2994,6 +3390,10 @@
 
 <custom-element name="ui-drawer-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -3009,6 +3409,10 @@
 
 <custom-element name="ui-drawer-footer" slot="footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       gap: calc(var(--spacing) * 2);
@@ -3039,6 +3443,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 +3459,10 @@
 
 <custom-element name="ui-dropdown-menu-trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-block;
       vertical-align: middle;
@@ -3082,6 +3496,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       box-sizing: border-box;
       min-width: calc(var(--spacing) * 32);
@@ -3093,6 +3511,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;
     }
@@ -3143,6 +3564,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -3210,6 +3635,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -3265,6 +3694,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -3305,6 +3738,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -3346,6 +3783,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 +3800,10 @@
 
 <custom-element name="ui-menu-group" role="group">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -3369,6 +3814,10 @@
 
 <custom-element name="ui-menu-separator" role="separator">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       height: 1px;
@@ -3380,6 +3829,10 @@
 
 <custom-element name="ui-menu-shortcut">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       margin-inline-start: auto;
       font-size: var(--text-xs);
@@ -3393,6 +3846,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 +3872,10 @@
 
 <custom-element name="ui-empty-header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -3427,6 +3890,10 @@
 
 <custom-element name="ui-empty-media">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-shrink: 0;
@@ -3456,6 +3923,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -3472,6 +3943,10 @@
 
 <custom-element name="ui-empty-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       font-size: var(--text-sm);
@@ -3484,6 +3959,10 @@
 
 <custom-element name="ui-empty-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -3508,6 +3987,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 +4026,10 @@
 
 <custom-element name="ui-field-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex: 1;
@@ -3555,6 +4044,10 @@
 
 <custom-element name="ui-field-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       font-size: var(--text-sm);
@@ -3568,6 +4061,10 @@
 
 <custom-element name="ui-field-group">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -3587,6 +4084,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -3603,6 +4104,10 @@
 
 <custom-element name="ui-field-legend" slot="legend">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       font-size: var(--text-base);
@@ -3649,6 +4154,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 +4170,10 @@
 
 <custom-element name="ui-hover-card-trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-block;
     }
@@ -3677,6 +4192,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       box-sizing: border-box;
       width: calc(var(--spacing) * 64);
@@ -3688,6 +4207,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;
       position-try-fallbacks: flip-block, flip-inline;
     }
@@ -3724,6 +4246,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 +4279,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 +4296,10 @@
 
 <custom-element name="ui-input-group-addon">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       order: -1;
@@ -3866,6 +4404,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 +4430,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 +4502,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 +4527,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 +4585,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 +4619,10 @@
 
 <custom-element name="ui-item-group" role="list">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -4062,6 +4634,10 @@
 
 <custom-element name="ui-item-media">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-shrink: 0;
@@ -4099,6 +4675,10 @@
 
 <custom-element name="ui-item-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex: 1;
@@ -4113,6 +4693,10 @@
 
 <custom-element name="ui-item-title">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -4127,6 +4711,10 @@
 
 <custom-element name="ui-item-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: -webkit-box;
       overflow: hidden;
@@ -4143,6 +4731,10 @@
 
 <custom-element name="ui-item-actions">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -4155,6 +4747,10 @@
 
 <custom-element name="ui-item-header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-basis: 100%;
@@ -4169,6 +4765,10 @@
 
 <custom-element name="ui-item-footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-basis: 100%;
@@ -4183,6 +4783,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 +4813,10 @@
 
 <custom-element name="ui-kbd-group">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       align-items: center;
@@ -4241,6 +4851,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 +4880,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 +4918,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 +4966,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: contents;
     }
@@ -4348,6 +4980,10 @@
 
 <custom-element name="ui-menubar-trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
     }
@@ -4392,6 +5028,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       box-sizing: border-box;
       min-width: calc(var(--spacing) * 48);
@@ -4403,6 +5043,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;
     }
@@ -4440,6 +5083,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 +5127,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 +5165,10 @@
 
 <custom-element name="ui-message-avatar" slot="avatar">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-self: flex-end;
@@ -4522,6 +5181,10 @@
 
 <custom-element name="ui-message-header" slot="header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -4537,6 +5200,10 @@
 
 <custom-element name="ui-message-footer" slot="footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -4556,6 +5223,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 +5239,10 @@
 
 <custom-element name="ui-navigation-menu-list">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -4609,6 +5286,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       position: relative;
       display: block;
@@ -4629,6 +5310,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 +5323,10 @@
 
 <custom-element name="ui-navigation-menu-trigger" delegates-focus>
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
     }
@@ -4681,6 +5369,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 +5405,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: var(--ui-navigation-link-display, inline-flex);
     }
@@ -4813,6 +5509,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 +5633,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 +5649,10 @@
 
 <custom-element name="ui-popover-trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-block;
       vertical-align: middle;
@@ -4960,6 +5672,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       box-sizing: border-box;
       width: calc(var(--spacing) * 72);
@@ -4971,11 +5687,16 @@
       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) {
       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)) {
@@ -5004,6 +5725,10 @@
 
 <custom-element name="ui-popover-header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       gap: calc(var(--spacing) * 1);
@@ -5015,6 +5740,10 @@
 
 <custom-element name="ui-popover-title">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -5031,6 +5760,10 @@
 
 <custom-element name="ui-popover-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -5054,6 +5787,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 +5862,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 +5953,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 +5987,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       flex: var(--attr-size) 1 0;
@@ -5311,6 +6066,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       position: relative;
       display: flex;
@@ -5365,6 +6124,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 +6206,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 +6237,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 +6287,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 +6360,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 +6381,10 @@
 
 <custom-element name="ui-sheet-trigger" slot="trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host,
     span {
       display: contents;
@@ -5603,6 +6396,10 @@
 
 <custom-element name="ui-sheet-close">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host,
     span {
       display: contents;
@@ -5614,6 +6411,10 @@
 
 <custom-element name="ui-sheet-header" slot="header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       gap: calc(var(--spacing) * 2);
@@ -5625,6 +6426,10 @@
 
 <custom-element name="ui-sheet-title">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -5641,6 +6446,10 @@
 
 <custom-element name="ui-sheet-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -5656,6 +6465,10 @@
 
 <custom-element name="ui-sheet-footer" slot="footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-wrap: wrap;
@@ -5706,11 +6519,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 +6540,7 @@
       position: sticky;
       top: 0;
       width: var(--ui-sidebar-width);
-      height: 100dvh;
+      height: 100svh;
       flex-shrink: 0;
       transition: width 0.2s ease;
     }
@@ -5760,6 +6579,10 @@
 
 <custom-element name="ui-sidebar" slot="sidebar">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -5778,6 +6601,10 @@
 
 <custom-element name="ui-sidebar-header" slot="header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -5791,6 +6618,10 @@
 
 <custom-element name="ui-sidebar-footer" slot="footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -5804,6 +6635,10 @@
 
 <custom-element name="ui-sidebar-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       flex: 1;
@@ -5830,6 +6665,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -5842,6 +6681,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 +6702,10 @@
 
 <custom-element name="ui-sidebar-menu">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -5877,6 +6724,10 @@
 
 <custom-element name="ui-sidebar-menu-item" role="listitem">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       position: relative;
       display: block;
@@ -5917,6 +6768,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -5958,6 +6813,10 @@
 
 <custom-element name="ui-sidebar-menu-badge">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: var(--ui-sidebar-label, block);
       position: absolute;
@@ -5989,6 +6848,10 @@
 
 <custom-element name="ui-sidebar-inset">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex: 1;
@@ -6011,6 +6874,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 +6925,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 +6953,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 +6986,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 +7013,6 @@
     _min="@min"
     _max="@max"
     _step="@step"
-    _value="@value"
     _disabled="@disabled"
     _aria-label="@label"
 >
@@ -6136,6 +7032,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 +7084,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 +7190,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 +7290,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 +7313,10 @@
 
 <custom-element name="ui-tabs-list">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       width: fit-content;
@@ -6429,6 +7353,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex: 1;
@@ -6488,6 +7416,10 @@
 
 <custom-element name="ui-tabs-content" role="tabpanel">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       flex: 1;
@@ -6518,6 +7450,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 +7476,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 +7559,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 +7686,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 +7737,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 +7847,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 +7863,10 @@
 
 <custom-element name="ui-tooltip-trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-block;
       vertical-align: middle;
@@ -6914,6 +7886,10 @@
   </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 +7899,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;
     }