@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiSpinner.vue

@@ -1,7 +1,8 @@
-<!-- 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 { computed, getCurrentInstance, watchSyncEffect } from 'vue'
+import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
+import { attribute, checkHydratedRoot, concat, nativeAttrs, useReflectedProp } from './host'
 import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -51,39 +52,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 hydrationInstance = getCurrentInstance()
+const reflectedProp = useReflectedProp()
 
 let guardedPrevious: any = null
 const guarded = computed(() => {
@@ -221,22 +190,7 @@ const guardedBinding3 = computed(() => {
         concat(checkedProps.value.label !== ''),
       ))
 })
-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-spinner> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-spinner> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('span', 'ui-spinner')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -245,43 +199,11 @@ const hostState = computed(() =>
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
   ].filter(Boolean).join(' ')
 )
-
-function text(value: unknown): string {
-  if (Array.isArray(value)) return value.map(text).join(' ')
-  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
-}
-
-function attribute(value: unknown): any {
-  if (
-    value === null || value === undefined || value === false
-    || (typeof value === 'object' && !Array.isArray(value))
-  ) return undefined
-  return value === true ? '' : text(value)
-}
-
-// A nonempty scalar call cannot produce the invalid-result sentinel.
-type ConcatResult<T extends unknown[]> = T extends
-  [
-    string | number | boolean | null | undefined,
-    ...(string | number | boolean | null | undefined)[],
-  ] ? string | undefined
-  : string | symbol | undefined
-function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
-  if (values.some(value => value === Symbol.for('html-next.invalid-result'))) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  if (values.some(value => value === undefined)) return undefined as ConcatResult<T>
-  if (values.length === 0 || values.some(value => typeof value === 'object' && value !== null)) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  return values.map(value => value === null ? '' : String(value)).join('') as ConcatResult<T>
-}
 </script>
 
 <template>
   <span
-    data-component="ui-spinner"
-    class="ring"
+    class="ui-spinner ring"
     v-bind="nativeAttrs($attrs)"
     :role="guarded"
     :aria-label="guardedBinding"
@@ -299,45 +221,6 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 
 <style scoped>
 /* A rounded SVG arc grows and recedes over a quiet full-circle track. */
-[data-component~="ui-spinner"] {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  inline-size: 1em;
-  block-size: 1em;
-  color: currentColor;
-  font-size: var(--ui-font-size-lg);
-  line-height: 1;
-}
-
-[data-component~="ui-spinner"][data-ui-spinner-state~="size=sm"] {
-  font-size: var(--ui-font-size-md);
-}
-
-svg {
-  display: block;
-  inline-size: 100%;
-  block-size: 100%;
-  animation: ui-spinner-rotate 2s linear infinite;
-}
-
-circle {
-  stroke-width: 3;
-  stroke-linecap: round;
-}
-
-.track {
-  stroke: color-mix(in srgb, currentColor 16%, transparent);
-}
-
-.arc {
-  stroke: currentColor;
-  stroke-dasharray: 90, 150;
-  stroke-dashoffset: 0;
-  animation: ui-spinner-dash 1.5s ease-in-out infinite;
-}
 
 @keyframes ui-spinner-rotate {
   100% {
@@ -360,15 +243,56 @@ circle {
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  svg,
+/* A component that sets its display still honours the hidden attribute on its root. */
+
+@scope (.ui-spinner) {
+  :scope:where(:scope) {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    inline-size: 1em;
+    block-size: 1em;
+    color: currentColor;
+    font-size: var(--ui-font-size-lg);
+    line-height: 1;
+  }
+
+  :scope:where(:scope):is([data-ui-spinner-state~="size=sm"]) {
+    font-size: var(--ui-font-size-md);
+  }
+
+  svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    animation: ui-spinner-rotate 2s linear infinite;
+  }
+
+  circle {
+    stroke-width: 3;
+    stroke-linecap: round;
+  }
+
+  .track {
+    stroke: color-mix(in srgb, currentColor 16%, transparent);
+  }
+
   .arc {
-    animation: none;
+    stroke: currentColor;
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: 0;
+    animation: ui-spinner-dash 1.5s ease-in-out infinite;
   }
-}
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-spinner"][hidden] {
-  display: none;
+  @media (prefers-reduced-motion: reduce) {
+    svg, .arc {
+      animation: none;
+    }
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiStack.vue

@@ -1,7 +1,8 @@
-<!-- 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 { computed, getCurrentInstance, watchSyncEffect } from 'vue'
+import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
+import { checkHydratedRoot, nativeAttrs, useReflectedProp } from './host'
 import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -113,53 +114,9 @@ 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 hydrationInstance = getCurrentInstance()
+const reflectedProp = useReflectedProp()
 
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('div'))
-) {
-  throw Object.assign(new Error('HR005: Server markup for <ui-stack> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-stack> has an incompatible root.',
-    }),
-  })
-}
+checkHydratedRoot('div', 'ui-stack')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -180,9 +137,9 @@ const hostState = computed(() =>
 
 <template>
   <div
-    data-component="ui-stack"
+    class="ui-stack"
     v-bind="nativeAttrs($attrs)"
-    :style="{ '--ui-stack-height': checkedProps.height ?? undefined }"
+    :style="{ '--ui-stack-height': checkedProps.height?.toString() }"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
@@ -207,65 +164,67 @@ const hostState = computed(() =>
   inherits: false;
 }
 
-[data-component~="ui-stack"] {
-  --_layout-gap: var(--ui-space-4);
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: var(--ui-stack-gap, var(--_layout-gap));
-  min-inline-size: 0;
-  max-inline-size: 100%;
-  margin: 0;
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-[data-component~="ui-stack"][data-ui-stack-state~="fill"] {
-  flex: 1;
-  min-block-size: 0;
-}
-[data-component~="ui-stack"][data-ui-stack-state~="height"] {
-  block-size: calc(var(--ui-stack-height, 0) * 1px);
-  min-block-size: 0;
-}
+@scope (.ui-stack) {
+  :scope:where(:scope) {
+    --_layout-gap: var(--ui-space-4);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--ui-stack-gap, var(--_layout-gap));
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    margin: 0;
+  }
 
-[data-component~="ui-stack"][data-ui-stack-state~="gap=none"] {
-  --_layout-gap: 0px;
-}
-[data-component~="ui-stack"][data-ui-stack-state~="gap=xs"] {
-  --_layout-gap: var(--ui-space-2);
-}
-[data-component~="ui-stack"][data-ui-stack-state~="gap=s"] {
-  --_layout-gap: var(--ui-space-3);
-}
-[data-component~="ui-stack"][data-ui-stack-state~="gap=m"] {
-  --_layout-gap: var(--ui-space-4);
-}
-[data-component~="ui-stack"][data-ui-stack-state~="gap=l"] {
-  --_layout-gap: var(--ui-space-5);
-}
-[data-component~="ui-stack"][data-ui-stack-state~="gap=xl"] {
-  --_layout-gap: var(--ui-space-6);
-}
-[data-component~="ui-stack"][data-ui-stack-state~="align=start"] {
-  align-items: flex-start;
-}
-[data-component~="ui-stack"][data-ui-stack-state~="align=center"] {
-  align-items: center;
-}
-[data-component~="ui-stack"][data-ui-stack-state~="align=end"] {
-  align-items: flex-end;
-}
-[data-component~="ui-stack"][data-ui-stack-state~="justify=center"] {
-  justify-content: center;
-}
-[data-component~="ui-stack"][data-ui-stack-state~="justify=end"] {
-  justify-content: flex-end;
-}
-[data-component~="ui-stack"][data-ui-stack-state~="justify=between"] {
-  justify-content: space-between;
-}
+  :scope:where(:scope):is([data-ui-stack-state~="fill"]) {
+    flex: 1;
+    min-block-size: 0;
+  }
+  :scope:where(:scope):is([data-ui-stack-state~="height"]) {
+    block-size: calc(var(--ui-stack-height, 0) * 1px);
+    min-block-size: 0;
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-stack"][hidden] {
-  display: none;
+  :scope:where(:scope):is([data-ui-stack-state~="gap=none"]) {
+    --_layout-gap: 0px;
+  }
+  :scope:where(:scope):is([data-ui-stack-state~="gap=xs"]) {
+    --_layout-gap: var(--ui-space-2);
+  }
+  :scope:where(:scope):is([data-ui-stack-state~="gap=s"]) {
+    --_layout-gap: var(--ui-space-3);
+  }
+  :scope:where(:scope):is([data-ui-stack-state~="gap=m"]) {
+    --_layout-gap: var(--ui-space-4);
+  }
+  :scope:where(:scope):is([data-ui-stack-state~="gap=l"]) {
+    --_layout-gap: var(--ui-space-5);
+  }
+  :scope:where(:scope):is([data-ui-stack-state~="gap=xl"]) {
+    --_layout-gap: var(--ui-space-6);
+  }
+  :scope:where(:scope):is([data-ui-stack-state~="align=start"]) {
+    align-items: flex-start;
+  }
+  :scope:where(:scope):is([data-ui-stack-state~="align=center"]) {
+    align-items: center;
+  }
+  :scope:where(:scope):is([data-ui-stack-state~="align=end"]) {
+    align-items: flex-end;
+  }
+  :scope:where(:scope):is([data-ui-stack-state~="justify=center"]) {
+    justify-content: center;
+  }
+  :scope:where(:scope):is([data-ui-stack-state~="justify=end"]) {
+    justify-content: flex-end;
+  }
+  :scope:where(:scope):is([data-ui-stack-state~="justify=between"]) {
+    justify-content: space-between;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiStatusMessage.d.ts

@@ -32,7 +32,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>> & Readonly<{}>, {
-    kind: "loading" | "error" | "empty" | null;
+    kind: "error" | "loading" | "empty" | null;
     heading: string | null;
     layout: "fill" | "inline" | "panel" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/UiStatusMessage.vue

@@ -1,7 +1,8 @@
-<!-- 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 { computed, getCurrentInstance, watchSyncEffect } from 'vue'
+import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
+import { attribute, checkHydratedRoot, concat, nativeAttrs, useReflectedProp } from './host'
 import { checkedProp, vPropValidity } from './props'
 import UiSpinner from './UiSpinner.vue'
 
@@ -75,39 +76,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 hydrationInstance = getCurrentInstance()
+const reflectedProp = useReflectedProp()
 
 let guardedPrevious: any = null
 const guarded = computed(() => {
@@ -131,22 +100,7 @@ const guarded = computed(() => {
       concat(checkedProps.value.kind === 'error'),
     ))
 })
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('div'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-status-message> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-status-message> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-status-message')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -157,42 +111,11 @@ const hostState = computed(() =>
     checkedProps.value.layout != null && `layout=${encodeURIComponent(checkedProps.value.layout)}`,
   ].filter(Boolean).join(' ')
 )
-
-function text(value: unknown): string {
-  if (Array.isArray(value)) return value.map(text).join(' ')
-  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
-}
-
-function attribute(value: unknown): any {
-  if (
-    value === null || value === undefined || value === false
-    || (typeof value === 'object' && !Array.isArray(value))
-  ) return undefined
-  return value === true ? '' : text(value)
-}
-
-// A nonempty scalar call cannot produce the invalid-result sentinel.
-type ConcatResult<T extends unknown[]> = T extends
-  [
-    string | number | boolean | null | undefined,
-    ...(string | number | boolean | null | undefined)[],
-  ] ? string | undefined
-  : string | symbol | undefined
-function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
-  if (values.some(value => value === Symbol.for('html-next.invalid-result'))) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  if (values.some(value => value === undefined)) return undefined as ConcatResult<T>
-  if (values.length === 0 || values.some(value => typeof value === 'object' && value !== null)) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  return values.map(value => value === null ? '' : String(value)).join('') as ConcatResult<T>
-}
 </script>
 
 <template>
   <div
-    data-component="ui-status-message"
+    class="ui-status-message"
     v-bind="nativeAttrs($attrs)"
     :role="guarded"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
@@ -201,7 +124,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     :data-layout="reflectedProp('layout', 'layout', checkedProps.layout, undefined, false)"
     :data-ui-status-message-state="hostState || undefined"
   >
-    <UiSpinner size="sm" :hidden="checkedProps.kind !== 'loading'" />
+    <UiSpinner class="ui-spinner" size="sm" :hidden="checkedProps.kind !== 'loading'" />
     <span class="copy"><strong class="heading" :hidden="!checkedProps.heading">{{
         checkedProps.heading
       }}</strong>
@@ -213,65 +136,68 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 <style scoped>
 /* The one way a view says it is loading, has nothing yet, or failed, with an optional next step.
        Every view says it the same way, in the same place, at the same size. */
-[data-component~="ui-status-message"] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--ui-space-2) var(--ui-space-4);
-  padding-block: var(--ui-space-4);
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-md);
-  line-height: var(--ui-line-height);
-}
 
-[data-component~="ui-status-message"][data-ui-status-message-state~="kind=error"] {
-  color: var(--ui-danger);
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-[data-component~="ui-status-message"][data-ui-status-message-state~="layout=panel"] {
-  padding: var(--ui-space-6);
-  border: var(--ui-border-width) dashed var(--ui-border-strong);
-  border-radius: var(--ui-radius-lg);
-}
+@scope (.ui-status-message) to (.ui-spinner) {
+  :scope:where(:scope) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ui-space-2) var(--ui-space-4);
+    padding-block: var(--ui-space-4);
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-md);
+    line-height: var(--ui-line-height);
+  }
 
-[data-component~="ui-status-message"][data-ui-status-message-state~="layout=fill"] {
-  flex: 1;
-  flex-direction: column;
-  justify-content: center;
-  min-block-size: 50vh;
-  text-align: center;
-}
+  :scope:where(:scope):is([data-ui-status-message-state~="kind=error"]) {
+    color: var(--ui-danger);
+  }
 
-.copy {
-  display: flex;
-  flex: 1 1 12rem;
-  flex-direction: column;
-  gap: var(--ui-space-1);
-  min-inline-size: 0;
-}
+  :scope:where(:scope):is([data-ui-status-message-state~="layout=panel"]) {
+    padding: var(--ui-space-6);
+    border: var(--ui-border-width) dashed var(--ui-border-strong);
+    border-radius: var(--ui-radius-lg);
+  }
 
-[data-component~="ui-status-message"][data-ui-status-message-state~="layout=fill"] .copy {
-  flex: none;
-  align-items: center;
-}
+  :scope:where(:scope):is([data-ui-status-message-state~="layout=fill"]) {
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+    min-block-size: 50vh;
+    text-align: center;
+  }
 
-.heading {
-  color: var(--ui-text-primary);
-  font-weight: var(--ui-font-semibold);
-}
+  .copy {
+    display: flex;
+    flex: 1 1 12rem;
+    flex-direction: column;
+    gap: var(--ui-space-1);
+    min-inline-size: 0;
+  }
 
-.action {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: var(--ui-space-2);
-}
+  :scope[data-ui-status-message-state~="layout=fill"] .copy {
+    flex: none;
+    align-items: center;
+  }
 
-.action:empty {
-  display: none;
-}
+  .heading {
+    color: var(--ui-text-primary);
+    font-weight: var(--ui-font-semibold);
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-status-message"][hidden] {
-  display: none;
+  .action {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--ui-space-2);
+  }
+
+  .action:empty {
+    display: none;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>