@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiTooltip.vue

@@ -1,19 +1,14 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
-<script lang="ts">
-const htmlNextAuthoredCheck2Reported = new Set<string>()
-function htmlNextAuthoredCheck2(accepted: boolean, location: string, message: string): boolean {
-  if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
-    htmlNextAuthoredCheck2Reported.add(location)
-    console.warn(message)
-  }
-  return accepted
-}
-</script>
-
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { createDispatch, useComponentHost } from './host'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
@@ -202,38 +197,7 @@ void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
 })
-function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
-  const names = Object.keys(attrs)
-  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
-  return Object.fromEntries(names.map((name) => [
-    Object.hasOwn(Object.prototype, name)
-      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
-      : name,
-    attrs[name],
-  ]))
-}
-const componentInstance = getCurrentInstance()
-function reflectedProp(
-  name: string,
-  kebab: string,
-  value: unknown,
-  fallback: string | undefined,
-  bound: boolean,
-  separator?: string,
-): string | undefined {
-  const incoming = componentInstance?.vnode.props
-  if (
-    !bound
-    && (incoming === null || incoming === undefined
-      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
-  ) return fallback
-  if (value === null || value === undefined) return undefined
-  return Array.isArray(value) && separator !== undefined
-    ? value.join(separator)
-    : typeof value === 'object'
-    ? JSON.stringify(value)
-    : String(value)
-}
+const reflectedProp = useReflectedProp()
 const hydrationInstance = getCurrentInstance()
 const emit = defineEmits<{
   'update:open': [value: boolean]
@@ -260,34 +224,8 @@ const emit = defineEmits<{
 
 const root = ref<HTMLElement | null>(null)
 const internalOpen = ref(false)
-let guardedPrevious: any
-const guarded = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      internalOpen.value == null || typeof internalOpen.value === 'boolean',
-      'not $internalOpen:internalOpen',
-      './components/ui-tooltip/ui-tooltip.html: HR007: Reference internalOpen does not satisfy its declared type.',
-    ))
-  ) return guardedPrevious
-  return guardedPrevious = !internalOpen.value
-})
 provide('html-next:ui-tooltip:internalOpen', internalOpen)
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('span'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-tooltip> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-tooltip> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('span', 'ui-tooltip')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -346,10 +284,10 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
 
 <template>
   <span
-    data-component="ui-tooltip"
+    class="ui-tooltip"
     role="tooltip"
     v-bind="nativeAttrs($attrs)"
-    :hidden="guarded"
+    :hidden="!internalOpen"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
     :data-hide-delay="reflectedProp('hideDelay', 'hide-delay', checkedProps.hideDelay, undefined, false)"
@@ -409,186 +347,188 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
   inherits: false;
 }
 
-[data-component~="ui-tooltip"] {
-  /* Hooks do not inherit, so the parts below read them from the root. */
-  --_ui-tooltip-border: var(--ui-tooltip-border);
-  --_ui-tooltip-max-inline-size: var(--ui-tooltip-max-inline-size);
-  --_ui-tooltip-radius: var(--ui-tooltip-radius);
-  --_ui-tooltip-surface: var(--ui-tooltip-surface);
-  --_ui-tooltip-text: var(--ui-tooltip-text);
-  --_ui-tooltip-shadow: var(--ui-tooltip-shadow);
-  --_ui-tooltip-inverse-surface: var(--ui-tooltip-inverse-surface);
-  --_ui-tooltip-inverse-text: var(--ui-tooltip-inverse-text);
-  --_ui-tooltip-arrow-size: var(--ui-tooltip-arrow-size);
-
-  position: fixed;
-  inset: auto;
-  margin: 0;
-  display: inline-block;
-  box-sizing: border-box;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  border-radius: 0;
-  background: transparent;
-  /* The UA popover default (overflow: auto) would clip the arrow. */
-  overflow: visible;
-  opacity: 0;
-  transform: translateY(4px);
-  transition:
-    opacity var(--ui-motion-fast) var(--ui-motion-ease),
-    transform var(--ui-motion-fast) var(--ui-motion-ease),
-    display var(--ui-motion-fast) allow-discrete,
-    overlay var(--ui-motion-fast) allow-discrete;
-}
-
-.surface {
-  --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-strong)));
-  position: relative;
-  box-sizing: border-box;
-  max-inline-size: var(--_ui-tooltip-max-inline-size, 18rem);
-  border: var(--ui-border-width) solid var(--_tooltip-line);
-  border-radius: var(--_ui-tooltip-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
-  background: var(--_ui-tooltip-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-  color: var(--_ui-tooltip-text, var(--ui-text-primary));
-  padding: var(--ui-space-2) var(--ui-space-3);
-  font-family: var(--ui-font-family-sans);
-  font-size: var(--ui-font-size-sm);
-  line-height: var(--ui-line-height-tight);
-  box-shadow: var(
-    --_ui-tooltip-shadow,
-    var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)))
-  );
-}
-
 /* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
    it. The label stays first in the description, so a screen reader hears the name, then the keys. */
-.shortcut {
-  display: inline-flex;
-  align-items: center;
-  margin-inline-start: var(--ui-space-2);
-  padding-inline-start: var(--ui-space-2);
-  border-inline-start: 1px solid color-mix(in oklab, currentColor 28%, transparent);
-  color: color-mix(in oklab, currentColor 72%, transparent);
-  font-size: var(--ui-font-size-xs);
-  font-weight: var(--ui-font-normal);
-  white-space: nowrap;
-  vertical-align: baseline;
-}
-
-.shortcut:empty {
-  display: none;
-}
 
 /* A <kbd> takes the browser's monospace; the hint reads in the tooltip's own type. */
-.shortcut :slotted(kbd) {
-  font: inherit;
-}
-
-[data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface {
-  --_tooltip-line: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
-  background: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
-  color: var(--_ui-tooltip-inverse-text, var(--ui-surface-default));
-}
 
 /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
  * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
-.surface::after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  inset-inline-start: var(--ui-space-3);
-  inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
-  inline-size: var(--_ui-tooltip-arrow-size, 0.625rem);
-  block-size: var(--_ui-tooltip-arrow-size, 0.625rem);
-  box-sizing: border-box;
-  background: inherit;
-  border: 0 solid var(--_tooltip-line);
-  border-inline-end-width: var(--ui-border-width);
-  border-block-end-width: var(--ui-border-width);
-  border-end-end-radius: var(--ui-border-width);
-  transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
-}
 
-[data-component~="ui-tooltip"][data-ui-actual-placement="bottom"] .surface::after {
-  inset-block-start: calc(
-    var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2
-  );
-  inset-block-end: auto;
-  border-inline-end-width: 0;
-  border-block-end-width: 0;
-  border-inline-start-width: var(--ui-border-width);
-  border-block-start-width: var(--ui-border-width);
-  border-end-end-radius: 0;
-  border-start-start-radius: var(--ui-border-width);
-}
+@scope (.ui-tooltip) {
+  :scope:where(:scope) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-tooltip-border: var(--ui-tooltip-border);
+    --_ui-tooltip-max-inline-size: var(--ui-tooltip-max-inline-size);
+    --_ui-tooltip-radius: var(--ui-tooltip-radius);
+    --_ui-tooltip-surface: var(--ui-tooltip-surface);
+    --_ui-tooltip-text: var(--ui-tooltip-text);
+    --_ui-tooltip-shadow: var(--ui-tooltip-shadow);
+    --_ui-tooltip-inverse-surface: var(--ui-tooltip-inverse-surface);
+    --_ui-tooltip-inverse-text: var(--ui-tooltip-inverse-text);
+    --_ui-tooltip-arrow-size: var(--ui-tooltip-arrow-size);
 
-[data-component~="ui-tooltip"][data-ui-actual-align="center"] .surface::after {
-  inset-inline-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
-}
+    position: fixed;
+    inset: auto;
+    margin: 0;
+    display: inline-block;
+    box-sizing: border-box;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    border-radius: 0;
+    background: transparent;
+    /* The UA popover default (overflow: auto) would clip the arrow. */
+    overflow: visible;
+    opacity: 0;
+    transform: translateY(4px);
+    transition:
+      opacity var(--ui-motion-fast) var(--ui-motion-ease),
+      transform var(--ui-motion-fast) var(--ui-motion-ease),
+      display var(--ui-motion-fast) allow-discrete,
+      overlay var(--ui-motion-fast) allow-discrete;
+  }
 
-[data-component~="ui-tooltip"][data-ui-actual-align="end"] .surface::after {
-  inset-inline-start: auto;
-  inset-inline-end: var(--ui-space-3);
-}
+  .surface {
+    --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-strong)));
+    position: relative;
+    box-sizing: border-box;
+    max-inline-size: var(--_ui-tooltip-max-inline-size, 18rem);
+    border: var(--ui-border-width) solid var(--_tooltip-line);
+    border-radius: var(--_ui-tooltip-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
+    background: var(--_ui-tooltip-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+    color: var(--_ui-tooltip-text, var(--ui-text-primary));
+    padding: var(--ui-space-2) var(--ui-space-3);
+    font-family: var(--ui-font-family-sans);
+    font-size: var(--ui-font-size-sm);
+    line-height: var(--ui-line-height-tight);
+    box-shadow: var(
+      --_ui-tooltip-shadow,
+      var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)))
+    );
+  }
+  .shortcut {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-start: var(--ui-space-2);
+    padding-inline-start: var(--ui-space-2);
+    border-inline-start: 1px solid color-mix(in oklab, currentColor 28%, transparent);
+    color: color-mix(in oklab, currentColor 72%, transparent);
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-normal);
+    white-space: nowrap;
+    vertical-align: baseline;
+  }
 
-[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface::after,
-[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface::after {
-  inset-block-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
-  inset-block-end: auto;
-  border: 0 solid var(--_tooltip-line);
-}
+  .shortcut:empty {
+    display: none;
+  }
+  .shortcut :slotted(kbd) {
+    font: inherit;
+  }
 
-[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface::after {
-  inset-inline-start: auto;
-  inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
-  border-inline-end-width: var(--ui-border-width);
-  border-block-start-width: var(--ui-border-width);
-}
+  :scope[data-ui-tooltip-state~="inverse"] .surface {
+    --_tooltip-line: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
+    background: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
+    color: var(--_ui-tooltip-inverse-text, var(--ui-surface-default));
+  }
+  .surface::after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    inset-inline-start: var(--ui-space-3);
+    inset-block-end: calc(
+      var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2
+    );
+    inline-size: var(--_ui-tooltip-arrow-size, 0.625rem);
+    block-size: var(--_ui-tooltip-arrow-size, 0.625rem);
+    box-sizing: border-box;
+    background: inherit;
+    border: 0 solid var(--_tooltip-line);
+    border-inline-end-width: var(--ui-border-width);
+    border-block-end-width: var(--ui-border-width);
+    border-end-end-radius: var(--ui-border-width);
+    transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
+  }
 
-[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface::after {
-  inset-inline-start: calc(
-    var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2
-  );
-  inset-inline-end: auto;
-  border-inline-start-width: var(--ui-border-width);
-  border-block-end-width: var(--ui-border-width);
-}
+  :scope[data-ui-actual-placement="bottom"] .surface::after {
+    inset-block-start: calc(
+      var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2
+    );
+    inset-block-end: auto;
+    border-inline-end-width: 0;
+    border-block-end-width: 0;
+    border-inline-start-width: var(--ui-border-width);
+    border-block-start-width: var(--ui-border-width);
+    border-end-end-radius: 0;
+    border-start-start-radius: var(--ui-border-width);
+  }
 
-[data-component~="ui-tooltip"][data-ui-actual-placement="left"][data-ui-actual-align="start"]
-  .surface::after,
-[data-component~="ui-tooltip"][data-ui-actual-placement="right"][data-ui-actual-align="start"]
-  .surface::after {
-  inset-block-start: var(--ui-space-3);
-}
+  :scope[data-ui-actual-align="center"] .surface::after {
+    inset-inline-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
+  }
 
-[data-component~="ui-tooltip"][data-ui-actual-placement="left"][data-ui-actual-align="end"]
-  .surface::after,
-[data-component~="ui-tooltip"][data-ui-actual-placement="right"][data-ui-actual-align="end"]
-  .surface::after {
-  inset-block-start: auto;
-  inset-block-end: var(--ui-space-3);
-}
+  :scope[data-ui-actual-align="end"] .surface::after {
+    inset-inline-start: auto;
+    inset-inline-end: var(--ui-space-3);
+  }
 
-[data-component~="ui-tooltip"]:popover-open {
-  opacity: 1;
-  transform: translateY(0);
-}
+  :scope[data-ui-actual-placement="left"] .surface::after,
+  :scope[data-ui-actual-placement="right"] .surface::after {
+    inset-block-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
+    inset-block-end: auto;
+    border: 0 solid var(--_tooltip-line);
+  }
 
-@starting-style {
-  [data-component~="ui-tooltip"]:popover-open {
-    opacity: 0;
-    transform: translateY(4px);
+  :scope[data-ui-actual-placement="left"] .surface::after {
+    inset-inline-start: auto;
+    inset-inline-end: calc(
+      var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2
+    );
+    border-inline-end-width: var(--ui-border-width);
+    border-block-start-width: var(--ui-border-width);
   }
-}
 
-[data-component~="ui-tooltip"][hidden] {
-  display: none;
-}
+  :scope[data-ui-actual-placement="right"] .surface::after {
+    inset-inline-start: calc(
+      var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2
+    );
+    inset-inline-end: auto;
+    border-inline-start-width: var(--ui-border-width);
+    border-block-end-width: var(--ui-border-width);
+  }
+
+  :scope[data-ui-actual-placement="left"][data-ui-actual-align="start"] .surface::after,
+  :scope[data-ui-actual-placement="right"][data-ui-actual-align="start"] .surface::after {
+    inset-block-start: var(--ui-space-3);
+  }
+
+  :scope[data-ui-actual-placement="left"][data-ui-actual-align="end"] .surface::after,
+  :scope[data-ui-actual-placement="right"][data-ui-actual-align="end"] .surface::after {
+    inset-block-start: auto;
+    inset-block-end: var(--ui-space-3);
+  }
+
+  :scope:where(:scope):is(:popover-open) {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  @starting-style {
+    :scope:where(:scope):is(:popover-open) {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+  }
+
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  [data-component~="ui-tooltip"] {
-    transition: none;
+  @media (prefers-reduced-motion: reduce) {
+    :scope:where(:scope) {
+      transition: none;
+    }
   }
 }
 </style>

package/vue/UiTopBar.vue

@@ -1,41 +1,14 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { getCurrentInstance } from 'vue'
+import { checkHydratedRoot, nativeAttrs } from './host'
 
 defineOptions({ inheritAttrs: false })
 
-function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
-  const names = Object.keys(attrs)
-  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
-  return Object.fromEntries(names.map((name) => [
-    Object.hasOwn(Object.prototype, name)
-      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
-      : name,
-    attrs[name],
-  ]))
-}
-const hydrationInstance = getCurrentInstance()
-
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('header'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-top-bar> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-top-bar> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('header', 'ui-top-bar')
 </script>
 
 <template>
-  <header data-component="ui-top-bar" v-bind="nativeAttrs($attrs)">
+  <header class="ui-top-bar" v-bind="nativeAttrs($attrs)">
     <div class="leading"><slot name="leading" /></div>
     <div class="title"><slot /></div>
     <div class="search"><slot name="search" /></div>
@@ -74,56 +47,55 @@ if (
   inherits: false;
 }
 
-[data-component~="ui-top-bar"] {
-  /* Hooks do not inherit, so the parts below read them from the root. */
-  --_ui-top-bar-actions-gap: var(--ui-top-bar-actions-gap);
+/* An unused region takes no space, so it adds no gap. */
 
-  position: sticky;
-  inset-block-start: 0;
-  z-index: var(--ui-top-bar-z-index, 100);
-  min-block-size: calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));
-  display: flex;
-  align-items: center;
-  gap: var(--ui-top-bar-gap, var(--ui-space-3));
-  padding-block-start: env(safe-area-inset-top);
-  padding-inline-start: max(
-    var(--ui-top-bar-padding-inline, var(--ui-space-4)),
-    env(safe-area-inset-left)
-  );
-  padding-inline-end: max(
-    var(--ui-top-bar-padding-inline, var(--ui-space-4)),
-    env(safe-area-inset-right)
-  );
-  background: var(--ui-top-bar-surface, var(--ui-surface-elevated));
-  border-block-end: var(--ui-border-width) solid var(--ui-top-bar-border, var(--ui-border-divider));
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-.leading,
-.search,
-.actions {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
+@scope (.ui-top-bar) {
+  :scope:where(:scope) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-top-bar-actions-gap: var(--ui-top-bar-actions-gap);
 
-.actions {
-  gap: var(--_ui-top-bar-actions-gap, var(--ui-space-1));
-}
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--ui-top-bar-z-index, 100);
+    min-block-size: calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));
+    display: flex;
+    align-items: center;
+    gap: var(--ui-top-bar-gap, var(--ui-space-3));
+    padding-block-start: env(safe-area-inset-top);
+    padding-inline-start: max(
+      var(--ui-top-bar-padding-inline, var(--ui-space-4)),
+      env(safe-area-inset-left)
+    );
+    padding-inline-end: max(
+      var(--ui-top-bar-padding-inline, var(--ui-space-4)),
+      env(safe-area-inset-right)
+    );
+    background: var(--ui-top-bar-surface, var(--ui-surface-elevated));
+    border-block-end: var(--ui-border-width) solid
+      var(--ui-top-bar-border, var(--ui-border-divider));
+  }
 
-.title {
-  min-inline-size: 0;
-  flex: 1;
-}
+  .leading, .search, .actions {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
 
-/* An unused region takes no space, so it adds no gap. */
-.leading:empty,
-.search:empty,
-.actions:empty {
-  display: none;
-}
+  .actions {
+    gap: var(--_ui-top-bar-actions-gap, var(--ui-space-1));
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-top-bar"][hidden] {
-  display: none;
+  .title {
+    min-inline-size: 0;
+    flex: 1;
+  }
+  .leading:empty, .search:empty, .actions:empty {
+    display: none;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>