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

package/README.md

@@ -5,10 +5,10 @@ About 60 accessible components built with [REALM](https://realm.js.org). Each on
 Load REALM, the theme and the components from the CDN. There is no build step.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
-<script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
-<import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/ui.html"></import-element>
+<link rel="stylesheet" href="https://realm.js.org/dist/realm.css">
+<link rel="stylesheet" href="https://realm.js.org/dist/ui/theme.css">
+<script type="module" src="https://realm.js.org/dist/realm.js"></script>
+<import-element from="https://realm.js.org/dist/ui/ui.html"></import-element>
 
 <ui-card>
   <ui-card-header>
@@ -28,8 +28,8 @@ Load REALM, the theme and the components from the CDN. There is no build step.
 To load only what you use, import single files instead of `ui.html`:
 
 ```html
-<import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/button.html"></import-element>
-<import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/card.html"></import-element>
+<import-element from="https://realm.js.org/dist/ui/components/button.html"></import-element>
+<import-element from="https://realm.js.org/dist/ui/components/card.html"></import-element>
 ```
 
 Each file imports its own dependencies (`sheet.html` loads `dialog.html`), and each file is fetched once.

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);
@@ -79,11 +89,32 @@
       width: calc(var(--spacing) * 4);
       height: calc(var(--spacing) * 4);
       color: var(--muted-foreground);
-      transition: rotate 0.2s;
+      transition: rotate var(--default-transition-duration) var(--default-transition-timing-function);
     }
     details[open] svg {
       rotate: 180deg;
     }
+    details::details-content {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition:
+        grid-template-rows var(--default-transition-duration) var(--default-transition-timing-function),
+        content-visibility var(--default-transition-duration) allow-discrete;
+    }
+    details[open]::details-content {
+      grid-template-rows: 1fr;
+    }
+    slot:not([name]) {
+      display: block;
+      min-height: 0;
+      overflow: hidden;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      svg,
+      details::details-content {
+        transition: none;
+      }
+    }
   </style>
 
   <details _open="@open" ontoggle="toggled(this)">
@@ -97,6 +128,10 @@
 
 <custom-element name="ui-accordion-trigger" slot="trigger">
   <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
     :host {
       display: flex;
       flex: 1;
@@ -110,6 +145,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

@@ -11,6 +11,9 @@
       popovertargetaction: prop.enum(["toggle", "show", "hide"]),
       commandfor: prop.string(),
       command: prop.string(),
+      href: prop.string(),
+      target: prop.string(),
+      rel: prop.string(),
     });
 
     const NATIVE_COMMANDS = "commandForElement" in HTMLButtonElement.prototype;
@@ -62,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 {
       display: inline-flex;
       vertical-align: middle;
@@ -69,7 +78,11 @@
     :host([hidden]) {
       display: none;
     }
-    button {
+    is-visible,
+    is-hidden {
+      display: contents;
+    }
+    .control {
       all: unset;
       box-sizing: border-box;
       display: inline-flex;
@@ -97,14 +110,15 @@
     }
     /* Mixing toward the text colour darkens a light-mode fill and lightens a dark-mode one, so
        hover never lowers the text contrast. */
-    button:hover {
+    .control:hover {
       background: color-mix(in oklab, var(--primary) 88%, var(--foreground));
     }
-    button:focus-visible {
+    .control:focus-visible {
       border-color: var(--ring);
       box-shadow: var(--focus-ring);
     }
-    button:disabled {
+    .control:disabled,
+    :host([disabled]) a.control {
       pointer-events: none;
       opacity: 0.5;
     }
@@ -114,75 +128,80 @@
       flex-shrink: 0;
       pointer-events: none;
     }
-    :host(:state(attr-variant-is-destructive)) button {
+    :host(:state(attr-variant-is-destructive)) .control {
       background: var(--destructive);
       color: var(--destructive-foreground);
     }
-    :host(:state(attr-variant-is-destructive)) button:hover {
+    :host(:state(attr-variant-is-destructive)) .control:hover {
       background: color-mix(in oklab, var(--destructive) 88%, var(--foreground));
     }
-    :host(:state(attr-variant-is-outline)) button {
+    :host(:state(attr-variant-is-outline)) .control {
       border-color: var(--border);
       background: var(--background);
       color: var(--foreground);
       box-shadow: var(--shadow-xs);
     }
-    :host(:state(attr-variant-is-outline)) button:hover,
-    :host(:state(attr-variant-is-ghost)) button:hover {
+    :host(:state(attr-variant-is-outline)) .control:hover,
+    :host(:state(attr-variant-is-ghost)) .control:hover {
       background: var(--accent);
       color: var(--accent-foreground);
     }
-    :host(:state(attr-variant-is-secondary)) button {
+    :host(:state(attr-variant-is-secondary)) .control {
       background: var(--secondary);
       color: var(--secondary-foreground);
     }
-    :host(:state(attr-variant-is-secondary)) button:hover {
+    :host(:state(attr-variant-is-secondary)) .control:hover {
       background: color-mix(in oklab, var(--secondary) 80%, transparent);
     }
-    :host(:state(attr-variant-is-ghost)) button {
+    :host(:state(attr-variant-is-ghost)) .control {
       background: transparent;
       color: var(--foreground);
     }
-    :host(:state(attr-variant-is-link)) button {
+    :host(:state(attr-variant-is-link)) .control {
       background: transparent;
       color: var(--primary);
       text-underline-offset: 4px;
     }
-    :host(:state(attr-variant-is-link)) button:hover {
+    :host(:state(attr-variant-is-link)) .control:hover {
       text-decoration: underline;
     }
-    :host(:state(attr-size-is-xs)) button {
+    :host(:state(attr-size-is-xs)) .control {
       height: calc(var(--spacing) * 6);
       gap: calc(var(--spacing) * 1);
       padding: 0 calc(var(--spacing) * 2);
       font-size: var(--text-xs);
     }
-    :host(:state(attr-size-is-sm)) button {
+    :host(:state(attr-size-is-sm)) .control {
       height: calc(var(--spacing) * 8);
       gap: calc(var(--spacing) * 1.5);
       padding: 0 calc(var(--spacing) * 3);
     }
-    :host(:state(attr-size-is-lg)) button {
+    :host(:state(attr-size-is-lg)) .control {
       height: calc(var(--spacing) * 10);
       padding: 0 calc(var(--spacing) * 6);
     }
-    :host(:is(:state(attr-size-is-icon), :state(attr-size-is-icon-xs), :state(attr-size-is-icon-sm), :state(attr-size-is-icon-lg))) button {
+    :host(:is(:state(attr-size-is-icon), :state(attr-size-is-icon-xs), :state(attr-size-is-icon-sm), :state(attr-size-is-icon-lg))) .control {
       padding: 0;
       width: calc(var(--spacing) * 9);
     }
-    :host(:state(attr-size-is-icon-xs)) button {
+    :host(:state(attr-size-is-icon-xs)) .control {
       width: calc(var(--spacing) * 6);
       height: calc(var(--spacing) * 6);
     }
-    :host(:state(attr-size-is-icon-sm)) button {
+    :host(:state(attr-size-is-icon-sm)) .control {
       width: calc(var(--spacing) * 8);
       height: calc(var(--spacing) * 8);
     }
-    :host(:state(attr-size-is-icon-lg)) button {
+    :host(:state(attr-size-is-icon-lg)) .control {
       width: calc(var(--spacing) * 10);
       height: calc(var(--spacing) * 10);
     }
   </style>
 
-  <button type="button" ref="button" part="button" _aria-label="@label" _aria-description="@description" _disabled="@disabled" onclick="activate()"><slot></slot></button>
+  <is-visible when="@href">
+    <a class="control" ref="link" part="button" _href="@href" _target="@target" _rel="@rel" _aria-label="@label" _aria-description="@description"><slot></slot></a>
+  </is-visible>
+  <is-hidden when="@href">
+    <button class="control" type="button" ref="button" part="button" _aria-label="@label" _aria-description="@description" _disabled="@disabled" onclick="activate()"><slot></slot></button>
+  </is-hidden>
 </custom-element>

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