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

package/components/table.html

@@ -20,6 +20,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%;

package/components/tabs.html

@@ -38,6 +38,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;
@@ -55,6 +61,10 @@
 
 <custom-element name="ui-tabs-list">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       width: fit-content;
@@ -91,6 +101,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex: 1;
@@ -150,6 +164,10 @@
 
 <custom-element name="ui-tabs-content" role="tabpanel">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       flex: 1;

package/components/textarea.html

@@ -15,6 +15,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;
     }
@@ -35,6 +41,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);
     }

package/components/toaster.html

@@ -43,6 +43,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;

package/components/toggle-group.html

@@ -37,6 +37,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;

package/components/toggle.html

@@ -16,6 +16,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;
     }

package/components/tooltip.html

@@ -38,6 +38,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;
     }
@@ -48,6 +54,10 @@
 
 <custom-element name="ui-tooltip-trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-block;
       vertical-align: middle;
@@ -59,14 +69,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);
@@ -76,6 +104,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;
     }
@@ -83,6 +114,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;

package/dist/theme.css

@@ -138,6 +138,19 @@
   }
 }
 
+/* Taps respond at once and a double tap does not zoom. Pinch zoom still works. */
+html {
+  touch-action: manipulation;
+}
+
+/* iOS Safari only sends clicks for taps on clickable elements, so tapping outside an open popover
+   or menu would not close it. Touch screens show no cursor, so this changes nothing visible. */
+@media (pointer: coarse) {
+  html {
+    cursor: pointer;
+  }
+}
+
 body {
   background: var(--background);
   color: var(--foreground);