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

package/components/accordion.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);

package/components/alert-dialog.html

@@ -61,6 +61,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;
     }
@@ -68,6 +74,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);
@@ -77,6 +87,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 {
@@ -101,6 +113,10 @@
 
 <custom-element name="ui-alert-dialog-trigger" slot="trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host,
     span {
       display: contents;
@@ -112,6 +128,10 @@
 
 <custom-element name="ui-alert-dialog-header" slot="header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       gap: calc(var(--spacing) * 2);
@@ -123,6 +143,10 @@
 
 <custom-element name="ui-alert-dialog-title">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -138,6 +162,10 @@
 
 <custom-element name="ui-alert-dialog-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -153,6 +181,10 @@
 
 <custom-element name="ui-alert-dialog-footer" slot="footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-wrap: wrap;
@@ -173,6 +205,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
     }
@@ -187,6 +223,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
     }

package/components/alert.html

@@ -6,6 +6,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;
@@ -44,6 +50,10 @@
 
 <custom-element name="ui-alert-title">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       min-height: calc(var(--spacing) * 4);
@@ -57,6 +67,10 @@
 
 <custom-element name="ui-alert-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       justify-items: start;

package/components/aspect-ratio.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: block;
       position: relative;

package/components/attachment.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: inline-flex;
       align-items: center;
@@ -48,6 +54,10 @@
 
 <custom-element name="ui-attachment-media" slot="media">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       place-content: center;
@@ -74,6 +84,10 @@
 
 <custom-element name="ui-attachment-actions" slot="actions">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       gap: calc(var(--spacing) * 1);

package/components/avatar.html

@@ -18,6 +18,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;
@@ -55,6 +61,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: contents;
     }
@@ -72,6 +82,10 @@
 
 <custom-element name="ui-avatar-fallback">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: contents;
     }
@@ -92,6 +106,10 @@
 
 <custom-element name="ui-avatar-group" role="group">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -109,6 +127,10 @@
 
 <custom-element name="ui-avatar-group-count">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       flex-shrink: 0;

package/components/badge.html

@@ -7,6 +7,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/breadcrumb.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: block;
     }
@@ -14,6 +20,10 @@
 
 <custom-element name="ui-breadcrumb-list">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -36,6 +46,10 @@
 
 <custom-element name="ui-breadcrumb-item" role="listitem">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       align-items: center;
@@ -52,6 +66,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     a {
       color: inherit;
       text-decoration: none;
@@ -72,6 +90,10 @@
 
 <custom-element name="ui-breadcrumb-page">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     span {
       font-weight: var(--font-weight-normal);
       color: var(--foreground);
@@ -87,6 +109,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       align-items: center;
@@ -103,6 +129,10 @@
 
 <custom-element name="ui-breadcrumb-ellipsis">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
       align-items: center;

package/components/bubble.html

@@ -7,6 +7,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;
@@ -56,6 +62,10 @@
 
 <custom-element name="ui-bubble-reactions" slot="reactions">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-wrap: wrap;

package/components/button-group.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: inline-flex;
       align-items: stretch;
@@ -33,6 +39,10 @@
 
 <custom-element name="ui-button-group-text">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -69,6 +79,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       position: relative;
       z-index: 1;

package/components/button.html

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

package/components/calendar.html

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

package/components/card.html

@@ -1,5 +1,11 @@
 <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;
@@ -18,6 +24,10 @@
 
 <custom-element name="ui-card-header">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: grid;
       grid-auto-rows: min-content;
@@ -39,6 +49,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
     }
@@ -55,6 +69,10 @@
 
 <custom-element name="ui-card-description">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       font-size: var(--text-sm);
@@ -67,6 +85,10 @@
 
 <custom-element name="ui-card-action">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       grid-column: 2;
@@ -80,6 +102,10 @@
 
 <custom-element name="ui-card-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       padding: 0 calc(var(--spacing) * 6);
@@ -91,6 +117,10 @@
 
 <custom-element name="ui-card-footer">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;

package/components/carousel.html

@@ -65,6 +65,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;
@@ -120,6 +126,10 @@
 
 <custom-element name="ui-carousel-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       min-width: 0;
@@ -152,6 +162,10 @@
   </script>
 
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: block;
       box-sizing: border-box;
@@ -167,6 +181,10 @@
 
 <custom-element name="ui-carousel-previous">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
     }
@@ -177,6 +195,10 @@
 
 <custom-element name="ui-carousel-next">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: inline-flex;
     }

package/components/chart.html

@@ -84,6 +84,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/checkbox.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(:state(attr-checked)) label {
       color: var(--foreground);
     }

package/components/code-block.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 {
       position: relative;
       display: block;

package/components/collapsible.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;
     }
@@ -43,6 +49,10 @@
 
 <custom-element name="ui-collapsible-trigger" slot="trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       align-items: center;
@@ -63,6 +73,10 @@
 
 <custom-element name="ui-collapsible-content">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex-direction: column;

package/components/combobox.html

@@ -89,6 +89,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);
@@ -122,6 +128,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);
@@ -143,6 +155,7 @@
       box-shadow: var(--shadow-md);
       inset: auto;
       position-anchor: --combobox;
+      height: fit-content;
       position-area: bottom span-right;
       position-try-fallbacks: flip-block;
     }