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

package/components/sidebar.html

@@ -39,11 +39,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)) {
@@ -54,7 +60,7 @@
       position: sticky;
       top: 0;
       width: var(--ui-sidebar-width);
-      height: 100dvh;
+      height: 100svh;
       flex-shrink: 0;
       transition: width 0.2s ease;
     }
@@ -93,6 +99,10 @@
 
 <custom-element name="ui-sidebar" slot="sidebar">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -111,6 +121,10 @@
 
 <custom-element name="ui-sidebar-header" slot="header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -124,6 +138,10 @@
 
 <custom-element name="ui-sidebar-footer" slot="footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -137,6 +155,10 @@
 
 <custom-element name="ui-sidebar-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       flex: 1;
@@ -163,6 +185,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -175,6 +201,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);
@@ -192,6 +222,10 @@
 
 <custom-element name="ui-sidebar-menu">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -210,6 +244,10 @@
 
 <custom-element name="ui-sidebar-menu-item" role="listitem">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       position: relative;
       display: block;
@@ -250,6 +288,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -291,6 +333,10 @@
 
 <custom-element name="ui-sidebar-menu-badge">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: var(--ui-sidebar-label, block);
       position: absolute;
@@ -322,6 +368,10 @@
 
 <custom-element name="ui-sidebar-inset">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex: 1;

package/components/skeleton.html

@@ -1,5 +1,11 @@
 <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);

package/components/slider.html

@@ -14,9 +14,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);
@@ -30,6 +42,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);
@@ -61,6 +75,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;
@@ -74,7 +102,6 @@
     _min="@min"
     _max="@max"
     _step="@step"
-    _value="@value"
     _disabled="@disabled"
     _aria-label="@label"
 >

package/components/spinner.html

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

package/components/switch.html

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

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;
@@ -67,6 +77,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);
@@ -76,6 +90,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;
     }

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);