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

package/components/command.html

@@ -72,6 +72,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;
@@ -103,6 +109,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);
     }

package/components/context-menu.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 {
       display: contents;
     }
@@ -20,6 +26,10 @@
 
 <custom-element name="ui-context-menu-trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -48,6 +58,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       position: fixed;
       box-sizing: border-box;

package/components/dialog.html

@@ -74,12 +74,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;
     }
@@ -87,7 +96,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);
@@ -96,8 +108,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;
     }
@@ -116,7 +133,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 {
@@ -185,6 +206,7 @@
   <dialog
     ref="dialog"
     part="dialog"
+    tabindex="-1"
     _aria-label="#dialog.label"
     _aria-description="#dialog.description"
     onclose="closed()"
@@ -201,6 +223,10 @@
 
 <custom-element name="ui-dialog-trigger" slot="trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host,
     span {
       display: contents;
@@ -216,6 +242,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host,
     span {
       display: contents;
@@ -227,6 +257,10 @@
 
 <custom-element name="ui-dialog-header" slot="header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       gap: calc(var(--spacing) * 2);
@@ -238,6 +272,10 @@
 
 <custom-element name="ui-dialog-title">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -254,6 +292,10 @@
 
 <custom-element name="ui-dialog-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -269,6 +311,10 @@
 
 <custom-element name="ui-dialog-footer" slot="footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-wrap: wrap;

package/components/direction.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: contents;
     }

package/components/drawer.html

@@ -64,20 +64,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);
@@ -103,9 +116,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);
     }
@@ -138,6 +156,7 @@
   <dialog
     ref="dialog"
     part="dialog"
+    tabindex="-1"
     _aria-label="#drawer.label"
     _aria-description="#drawer.description"
     onclose="closed()"
@@ -151,6 +170,10 @@
 
 <custom-element name="ui-drawer-trigger" slot="trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host,
     span {
       display: contents;
@@ -162,6 +185,10 @@
 
 <custom-element name="ui-drawer-close">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host,
     span {
       display: contents;
@@ -173,6 +200,10 @@
 
 <custom-element name="ui-drawer-header" slot="header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       gap: calc(var(--spacing) * 1.5);
@@ -184,6 +215,10 @@
 
 <custom-element name="ui-drawer-title">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -199,6 +234,10 @@
 
 <custom-element name="ui-drawer-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -214,6 +253,10 @@
 
 <custom-element name="ui-drawer-footer" slot="footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       gap: calc(var(--spacing) * 2);

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;
@@ -62,6 +72,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       box-sizing: border-box;
       min-width: calc(var(--spacing) * 32);
@@ -73,6 +87,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;
     }
@@ -123,6 +140,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -190,6 +211,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -245,6 +270,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -285,6 +314,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -326,6 +359,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 +376,10 @@
 
 <custom-element name="ui-menu-group" role="group">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -349,6 +390,10 @@
 
 <custom-element name="ui-menu-separator" role="separator">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       height: 1px;
@@ -360,6 +405,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;
     }
@@ -59,6 +69,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       box-sizing: border-box;
       width: calc(var(--spacing) * 64);
@@ -70,6 +84,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;
     }

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;