@realmorg/ui 2.0.0-alpha.3 → 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

@@ -89,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)">

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;
@@ -75,7 +78,11 @@
     :host([hidden]) {
       display: none;
     }
-    button {
+    is-visible,
+    is-hidden {
+      display: contents;
+    }
+    .control {
       all: unset;
       box-sizing: border-box;
       display: inline-flex;
@@ -103,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;
     }
@@ -120,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/combobox.html

@@ -55,6 +55,12 @@
       combo.query = "";
       combo.active = Math.max(0, combo.visible.findIndex((item) => item.chosen));
       refs.list.showPopover();
+      // Once open, the list 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.
+      internals.states.delete("flipped");
+      const box = refs.list.getBoundingClientRect();
+      if (box.bottom >= innerHeight || box.top <= 0) internals.states.add("flipped");
     }
 
     function close() {
@@ -159,6 +165,13 @@
       position-area: bottom span-right;
       position-try-fallbacks: flip-block;
     }
+    [role="listbox"]:popover-open {
+      position-try-fallbacks: none;
+    }
+    :host(:state(flipped)) [role="listbox"] {
+      position-area: top span-right;
+      margin: 0 0 calc(var(--spacing) * 1);
+    }
     [role="option"] {
       display: flex;
       align-items: center;

package/components/dropdown-menu.html

@@ -56,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) {
@@ -104,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>

package/components/hover-card.html

@@ -61,11 +61,25 @@
 
 <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>
@@ -90,12 +104,21 @@
       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/menubar.html

@@ -94,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) {
@@ -131,6 +138,13 @@
       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>

package/components/popover.html

@@ -50,11 +50,25 @@
 
 <custom-element name="ui-popover-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 ??= "auto";
+
+    listen("toggle", opened);
   </script>
 
   <style>
@@ -80,6 +94,7 @@
       position-try-fallbacks: flip-block, flip-inline;
     }
     :host(:popover-open) {
+      position-try-fallbacks: flip-inline;
       display: grid;
       /* Safari stretches a grid overlay to its max-height unless the rows are packed at the start. */
       align-content: start;
@@ -91,6 +106,12 @@
     :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/tooltip.html

@@ -69,11 +69,25 @@
 
 <custom-element name="ui-tooltip-content" role="tooltip">
   <script>
-    defineProps({
+    const props = defineProps({
       placement: prop.enum(["top", "bottom", "left", "right"]).default("top"),
     });
 
+    const BLOCK_SIDES = new Set(["top", "bottom"]);
+
+    // 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>
@@ -100,6 +114,17 @@
       position-area: bottom;
       margin: calc(var(--spacing) * 1) 0 0;
     }
+    :host(:popover-open) {
+      position-try-fallbacks: none;
+    }
+    :host(:state(flipped)) {
+      position-area: bottom;
+      margin: calc(var(--spacing) * 1) 0 0;
+    }
+    :host(:state(flipped):state(attr-placement-is-bottom)) {
+      position-area: top;
+      margin: 0 0 calc(var(--spacing) * 1);
+    }
     :host(:state(attr-placement-is-left)) {
       position-area: left;
       margin: 0 calc(var(--spacing) * 1) 0 0;

package/dist/ui.html

@@ -89,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)">
@@ -1149,6 +1170,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;
@@ -1213,7 +1237,11 @@
     :host([hidden]) {
       display: none;
     }
-    button {
+    is-visible,
+    is-hidden {
+      display: contents;
+    }
+    .control {
       all: unset;
       box-sizing: border-box;
       display: inline-flex;
@@ -1241,14 +1269,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;
     }
@@ -1258,77 +1287,82 @@
       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>
 
 <custom-element name="ui-calendar" form-associated>
@@ -2337,6 +2371,12 @@
       combo.query = "";
       combo.active = Math.max(0, combo.visible.findIndex((item) => item.chosen));
       refs.list.showPopover();
+      // Once open, the list 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.
+      internals.states.delete("flipped");
+      const box = refs.list.getBoundingClientRect();
+      if (box.bottom >= innerHeight || box.top <= 0) internals.states.add("flipped");
     }
 
     function close() {
@@ -2441,6 +2481,13 @@
       position-area: bottom span-right;
       position-try-fallbacks: flip-block;
     }
+    [role="listbox"]:popover-open {
+      position-try-fallbacks: none;
+    }
+    :host(:state(flipped)) [role="listbox"] {
+      position-area: top span-right;
+      margin: 0 0 calc(var(--spacing) * 1);
+    }
     [role="option"] {
       display: flex;
       align-items: center;
@@ -3480,8 +3527,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) {
@@ -3528,6 +3582,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>
@@ -4184,11 +4256,25 @@
 
 <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>
@@ -4213,12 +4299,21 @@
       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;
     }
@@ -5012,8 +5107,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) {
@@ -5049,6 +5151,13 @@
       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>
@@ -5664,11 +5773,25 @@
 
 <custom-element name="ui-popover-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 ??= "auto";
+
+    listen("toggle", opened);
   </script>
 
   <style>
@@ -5694,6 +5817,7 @@
       position-try-fallbacks: flip-block, flip-inline;
     }
     :host(:popover-open) {
+      position-try-fallbacks: flip-inline;
       display: grid;
       /* Safari stretches a grid overlay to its max-height unless the rows are packed at the start. */
       align-content: start;
@@ -5705,6 +5829,12 @@
     :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;
     }
@@ -7878,11 +8008,25 @@
 
 <custom-element name="ui-tooltip-content" role="tooltip">
   <script>
-    defineProps({
+    const props = defineProps({
       placement: prop.enum(["top", "bottom", "left", "right"]).default("top"),
     });
 
+    const BLOCK_SIDES = new Set(["top", "bottom"]);
+
+    // 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>
@@ -7909,6 +8053,17 @@
       position-area: bottom;
       margin: calc(var(--spacing) * 1) 0 0;
     }
+    :host(:popover-open) {
+      position-try-fallbacks: none;
+    }
+    :host(:state(flipped)) {
+      position-area: bottom;
+      margin: calc(var(--spacing) * 1) 0 0;
+    }
+    :host(:state(flipped):state(attr-placement-is-bottom)) {
+      position-area: top;
+      margin: 0 0 calc(var(--spacing) * 1);
+    }
     :host(:state(attr-placement-is-left)) {
       position-area: left;
       margin: 0 calc(var(--spacing) * 1) 0 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realmorg/ui",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "About 60 accessible UI components built with REALM.",
   "type": "module",
   "license": "MIT",
@@ -22,16 +22,17 @@
   "devDependencies": {
     "@vitest/browser-playwright": "5.0.5",
     "playwright": "1.64.1",
+    "typescript": "7.0.2",
     "vite": "8.3.4",
     "vitest": "5.0.5",
-    "@realmorg/realm": "2.0.0-alpha.3",
+    "@realmorg/realm": "2.0.0-alpha.5",
     "tsconfig": "0.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
-    "@realmorg/realm": "^2.0.0-alpha.3"
+    "@realmorg/realm": "^2.0.0-alpha.5"
   },
   "scripts": {
     "build": "node scripts/bundle.mjs",