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

package/components/dropdown-menu.html

@@ -19,6 +19,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;
     }
@@ -29,6 +35,10 @@
 
 <custom-element name="ui-dropdown-menu-trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-block;
       vertical-align: middle;
@@ -46,8 +56,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) {
@@ -62,6 +79,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       box-sizing: border-box;
       min-width: calc(var(--spacing) * 32);
@@ -73,6 +94,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;
     }
@@ -87,6 +111,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>
@@ -123,6 +165,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -190,6 +236,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -245,6 +295,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -285,6 +339,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -326,6 +384,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);
@@ -339,6 +401,10 @@
 
 <custom-element name="ui-menu-group" role="group">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -349,6 +415,10 @@
 
 <custom-element name="ui-menu-separator" role="separator">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       height: 1px;
@@ -360,6 +430,10 @@
 
 <custom-element name="ui-menu-shortcut">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       margin-inline-start: auto;
       font-size: var(--text-xs);

package/components/empty.html

@@ -1,5 +1,11 @@
 <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;
@@ -20,6 +26,10 @@
 
 <custom-element name="ui-empty-header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -34,6 +44,10 @@
 
 <custom-element name="ui-empty-media">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-shrink: 0;
@@ -63,6 +77,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -79,6 +97,10 @@
 
 <custom-element name="ui-empty-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       font-size: var(--text-sm);
@@ -91,6 +113,10 @@
 
 <custom-element name="ui-empty-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;

package/components/field.html

@@ -8,6 +8,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;
@@ -41,6 +47,10 @@
 
 <custom-element name="ui-field-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex: 1;
@@ -55,6 +65,10 @@
 
 <custom-element name="ui-field-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       font-size: var(--text-sm);
@@ -68,6 +82,10 @@
 
 <custom-element name="ui-field-group">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -87,6 +105,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -103,6 +125,10 @@
 
 <custom-element name="ui-field-legend" slot="legend">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       font-size: var(--text-base);

package/components/hover-card.html

@@ -31,6 +31,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;
     }
@@ -41,6 +47,10 @@
 
 <custom-element name="ui-hover-card-trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-block;
     }
@@ -51,14 +61,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);
@@ -70,15 +98,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;
     }

package/components/input-group.html

@@ -11,6 +11,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;
@@ -38,6 +44,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);
     }
@@ -49,6 +61,10 @@
 
 <custom-element name="ui-input-group-addon">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       order: -1;

package/components/input-otp.html

@@ -77,6 +77,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;
     }
@@ -97,6 +103,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;

package/components/input.html

@@ -23,6 +23,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;
@@ -42,6 +48,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);
     }

package/components/item.html

@@ -11,6 +11,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;
@@ -39,6 +45,10 @@
 
 <custom-element name="ui-item-group" role="list">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;
@@ -50,6 +60,10 @@
 
 <custom-element name="ui-item-media">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-shrink: 0;
@@ -87,6 +101,10 @@
 
 <custom-element name="ui-item-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex: 1;
@@ -101,6 +119,10 @@
 
 <custom-element name="ui-item-title">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -115,6 +137,10 @@
 
 <custom-element name="ui-item-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: -webkit-box;
       overflow: hidden;
@@ -131,6 +157,10 @@
 
 <custom-element name="ui-item-actions">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -143,6 +173,10 @@
 
 <custom-element name="ui-item-header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-basis: 100%;
@@ -157,6 +191,10 @@
 
 <custom-element name="ui-item-footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-basis: 100%;

package/components/kbd.html

@@ -1,5 +1,11 @@
 <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;
@@ -24,6 +30,10 @@
 
 <custom-element name="ui-kbd-group">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       align-items: center;

package/components/label.html

@@ -22,6 +22,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/marker.html

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

package/components/menubar.html

@@ -1,5 +1,11 @@
 <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;
@@ -42,6 +48,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: contents;
     }
@@ -52,6 +62,10 @@
 
 <custom-element name="ui-menubar-trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
     }
@@ -80,8 +94,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) {
@@ -96,6 +117,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       box-sizing: border-box;
       min-width: calc(var(--spacing) * 48);
@@ -107,9 +132,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>