@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiSearchShell.vue

@@ -1,8 +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 { computed, getCurrentInstance, provide, ref, useTemplateRef, 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'
 
@@ -87,38 +93,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]
@@ -137,22 +112,7 @@ const root = ref<HTMLElement | null>(null)
 const dialogElement = useTemplateRef<HTMLElement>('dialogElement')
 const internalOpen = ref(false)
 provide('html-next:ui-search-shell:internalOpen', internalOpen)
-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-search-shell> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-search-shell> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-search-shell')
 
 const isCloseDetail = (
   detail: unknown,
@@ -204,7 +164,7 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
 
 <template>
   <div
-    data-component="ui-search-shell"
+    class="ui-search-shell"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-dismissible="reflectedProp('dismissible', 'dismissible', checkedProps.dismissible, undefined, false)"
@@ -267,168 +227,171 @@ useComponentHost(() => import('../components/ui-search-shell/ui-search-shell.js'
   inherits: false;
 }
 
-[data-component~="ui-search-shell"] {
-  /* Hooks do not inherit, so the parts below read them from the root. */
-  --_ui-search-shell-z-index: var(--ui-search-shell-z-index);
-  --_ui-search-shell-padding-top: var(--ui-search-shell-padding-top);
-  --_ui-search-shell-viewport-gap: var(--ui-search-shell-viewport-gap);
-  --_ui-search-shell-max-width: var(--ui-search-shell-max-width);
-  --_ui-search-shell-max-height: var(--ui-search-shell-max-height);
-  --_ui-search-shell-surface: var(--ui-search-shell-surface);
-  --_ui-search-shell-border: var(--ui-search-shell-border);
-  --_ui-search-shell-radius: var(--ui-search-shell-radius);
-  --_ui-search-shell-shadow: var(--ui-search-shell-shadow);
-  --_ui-search-shell-focus-color: var(--ui-search-shell-focus-color);
-
-  display: contents;
-}
+/* Laid out like the dialog's action row: actions right-aligned, spaced as buttons, no fill. */
 
-dialog {
-  position: fixed;
-  inset: 0;
-  z-index: var(--_ui-search-shell-z-index, 400);
-  box-sizing: border-box;
-  inline-size: 100%;
-  max-inline-size: none;
-  block-size: 100%;
-  max-block-size: none;
-  margin: 0;
-  padding: var(--_ui-search-shell-padding-top, 10vh)
-    var(--_ui-search-shell-viewport-gap, var(--ui-space-4))
-    var(--_ui-search-shell-viewport-gap, var(--ui-space-4));
-  overflow: auto;
-  border: 0;
-  background: var(--ui-overlay-backdrop);
-  color: var(--ui-text-primary);
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-dialog:modal::backdrop {
-  background: var(--ui-overlay-backdrop);
-}
+@scope (.ui-search-shell) {
+  :scope:where(:scope) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-search-shell-z-index: var(--ui-search-shell-z-index);
+    --_ui-search-shell-padding-top: var(--ui-search-shell-padding-top);
+    --_ui-search-shell-viewport-gap: var(--ui-search-shell-viewport-gap);
+    --_ui-search-shell-max-width: var(--ui-search-shell-max-width);
+    --_ui-search-shell-max-height: var(--ui-search-shell-max-height);
+    --_ui-search-shell-surface: var(--ui-search-shell-surface);
+    --_ui-search-shell-border: var(--ui-search-shell-border);
+    --_ui-search-shell-radius: var(--ui-search-shell-radius);
+    --_ui-search-shell-shadow: var(--ui-search-shell-shadow);
+    --_ui-search-shell-focus-color: var(--ui-search-shell-focus-color);
 
-dialog:modal {
-  background: transparent;
-}
+    display: contents;
+  }
 
-dialog[data-ui-backdrop-hidden]::backdrop {
-  background: transparent;
-}
+  dialog {
+    position: fixed;
+    inset: 0;
+    z-index: var(--_ui-search-shell-z-index, 400);
+    box-sizing: border-box;
+    inline-size: 100%;
+    max-inline-size: none;
+    block-size: 100%;
+    max-block-size: none;
+    margin: 0;
+    padding: var(--_ui-search-shell-padding-top, 10vh)
+      var(--_ui-search-shell-viewport-gap, var(--ui-space-4))
+      var(--_ui-search-shell-viewport-gap, var(--ui-space-4));
+    overflow: auto;
+    border: 0;
+    background: var(--ui-overlay-backdrop);
+    color: var(--ui-text-primary);
+  }
 
-.panel {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  inline-size: min(100%, var(--_ui-search-shell-max-width, 40rem));
-  max-block-size: var(--_ui-search-shell-max-height, 80vh);
-  margin-inline: auto;
-  overflow: hidden;
-  background: var(
-    --_ui-search-shell-surface,
-    var(--ui-overlay-surface, var(--ui-surface-elevated))
-  );
-  border: var(--ui-border-width) solid
-    var(--_ui-search-shell-border, var(--ui-overlay-border, var(--ui-border-strong)));
-  border-radius: var(--_ui-search-shell-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
-  box-shadow: var(
-    --_ui-search-shell-shadow,
-    var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)))
-  );
-}
+  dialog:modal::backdrop {
+    background: var(--ui-overlay-backdrop);
+  }
 
-.search {
-  padding: var(--ui-space-3);
-}
+  dialog:modal {
+    background: transparent;
+  }
 
-:slotted(input[slot="search"]) {
-  box-sizing: border-box;
-  inline-size: 100%;
-  min-block-size: var(--ui-control-min-block-size);
-  padding: var(--ui-space-2) var(--ui-space-3);
-  border: var(--ui-border-width) solid var(--ui-control-border);
-  border-radius: var(--ui-field-radius, var(--ui-radius-md));
-  background: var(--ui-control-surface);
-  color: var(--ui-text-primary);
-  font: inherit;
-  box-shadow: var(--ui-shadow-xs);
-}
+  dialog[data-ui-backdrop-hidden]::backdrop {
+    background: transparent;
+  }
 
-:slotted(input[slot="search"]:focus-visible) {
-  border-color: var(--_ui-search-shell-focus-color, var(--ui-control-focus));
-  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-  outline-offset: var(--ui-focus-width);
-}
+  .panel {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    inline-size: min(100%, var(--_ui-search-shell-max-width, 40rem));
+    max-block-size: var(--_ui-search-shell-max-height, 80vh);
+    margin-inline: auto;
+    overflow: hidden;
+    background: var(
+      --_ui-search-shell-surface,
+      var(--ui-overlay-surface, var(--ui-surface-elevated))
+    );
+    border: var(--ui-border-width) solid
+      var(--_ui-search-shell-border, var(--ui-overlay-border, var(--ui-border-strong)));
+    border-radius: var(
+      --_ui-search-shell-radius,
+      var(--ui-overlay-radius, var(--ui-radius-dialog))
+    );
+    box-shadow: var(
+      --_ui-search-shell-shadow,
+      var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)))
+    );
+  }
 
-.status,
-.actions {
-  flex-shrink: 0;
-  padding: var(--ui-space-2) var(--ui-space-4);
-  color: var(--ui-text-secondary);
-  font-size: var(--ui-font-size-sm);
-}
+  .search {
+    padding: var(--ui-space-3);
+  }
 
-.status {
-  padding-block-start: 0;
-}
+  :slotted(input[slot="search"]) {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--ui-control-min-block-size);
+    padding: var(--ui-space-2) var(--ui-space-3);
+    border: var(--ui-border-width) solid var(--ui-control-border);
+    border-radius: var(--ui-field-radius, var(--ui-radius-md));
+    background: var(--ui-control-surface);
+    color: var(--ui-text-primary);
+    font: inherit;
+    box-shadow: var(--ui-shadow-xs);
+  }
 
-/* Laid out like the dialog's action row: actions right-aligned, spaced as buttons, no fill. */
-.actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--ui-space-2);
-  padding: var(--ui-space-3) var(--ui-space-4);
-}
+  :slotted(input[slot="search"]:focus-visible) {
+    border-color: var(--_ui-search-shell-focus-color, var(--ui-control-focus));
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-focus-width);
+  }
 
-.status:empty,
-.actions:empty {
-  display: none;
-}
+  .status, .actions {
+    flex-shrink: 0;
+    padding: var(--ui-space-2) var(--ui-space-4);
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-sm);
+  }
 
-.body {
-  flex: 1;
-  min-block-size: 0;
-  overflow: auto;
-  padding: var(--ui-space-2);
-  /* Each edge that hides content fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
-  --_ui-scroll-fade-direction: to bottom;
-  --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
-  mask-image: linear-gradient(
-    var(--_ui-scroll-fade-direction),
-    transparent,
-    #000 var(--_ui-scroll-fade-start),
-    #000 calc(100% - var(--_ui-scroll-fade-end)),
-    transparent
-  );
-  animation:
-    ui-scroll-fade-start linear,
-    ui-scroll-fade-start-hold linear,
-    ui-scroll-fade-end-hold linear,
-    ui-scroll-fade-end linear;
-  animation-timeline: scroll(self block);
-  animation-range:
-    0 var(--_ui-scroll-fade-size),
-    var(--_ui-scroll-fade-size) calc(100% + 1px),
-    -1px calc(100% - var(--_ui-scroll-fade-size)),
-    calc(100% - var(--_ui-scroll-fade-size)) 100%;
-}
+  .status {
+    padding-block-start: 0;
+  }
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--ui-space-2);
+    padding: var(--ui-space-3) var(--ui-space-4);
+  }
 
-@media (max-width: 47.9375rem) {
-  dialog {
-    padding: 0;
+  .status:empty, .actions:empty {
+    display: none;
   }
 
-  .panel {
-    inline-size: 100%;
-    min-block-size: 100dvh;
-    max-block-size: none;
-    border: 0;
-    border-radius: 0;
+  .body {
+    flex: 1;
+    min-block-size: 0;
+    overflow: auto;
+    padding: var(--ui-space-2);
+    /* Each edge that hides content fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
+    --_ui-scroll-fade-direction: to bottom;
+    --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+    mask-image: linear-gradient(
+      var(--_ui-scroll-fade-direction),
+      transparent,
+      #000 var(--_ui-scroll-fade-start),
+      #000 calc(100% - var(--_ui-scroll-fade-end)),
+      transparent
+    );
+    animation:
+      ui-scroll-fade-start linear,
+      ui-scroll-fade-start-hold linear,
+      ui-scroll-fade-end-hold linear,
+      ui-scroll-fade-end linear;
+    animation-timeline: scroll(self block);
+    animation-range:
+      0 var(--_ui-scroll-fade-size),
+      var(--_ui-scroll-fade-size) calc(100% + 1px),
+      -1px calc(100% - var(--_ui-scroll-fade-size)),
+      calc(100% - var(--_ui-scroll-fade-size)) 100%;
   }
-}
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-search-shell"][hidden] {
-  display: none;
+  @media (max-width: 47.9375rem) {
+    dialog {
+      padding: 0;
+    }
+
+    .panel {
+      inline-size: 100%;
+      min-block-size: 100dvh;
+      max-block-size: none;
+      border: 0;
+      border-radius: 0;
+    }
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiSection.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 })
@@ -72,56 +73,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 !== ('section'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-section> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-section> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('section', 'ui-section')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -137,7 +91,7 @@ const hostState = computed(() =>
 
 <template>
   <section
-    data-component="ui-section"
+    class="ui-section"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-heading="reflectedProp('heading', 'heading', checkedProps.heading, undefined, false)"
@@ -157,104 +111,106 @@ const hostState = computed(() =>
 <style scoped>
 /* A part of a view: a heading, an optional line under it, actions for the whole section at its
        end, and the content. Sections space themselves out through the Stack around them. */
-[data-component~="ui-section"] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-space-4);
-  min-inline-size: 0;
-}
-
-[data-component~="ui-section"][data-ui-section-state~="variant=card"] {
-  --_ui-selection-context-surface: initial;
-  --_ui-selection-context-border: initial;
-  --_ui-selection-context-text: initial;
-  padding: var(--ui-space-5);
-  border: var(--ui-border-width) solid var(--ui-border-strong);
-  border-radius: var(--ui-radius-lg);
-  background: var(--ui-surface-raised);
-}
-
-[data-component~="ui-section"][data-ui-section-state~="variant=divided"] {
-  padding-block-start: var(--ui-space-6);
-  border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
-}
-
-[data-component~="ui-section"][data-ui-section-state~="variant=card"][data-ui-section-state~="tone=danger"] {
-  --_ui-selection-context-surface: light-dark(
-    oklch(from var(--ui-danger-soft) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
-    oklch(from var(--ui-danger-soft) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
-  );
-  --_ui-selection-context-border: light-dark(
-    oklch(from var(--ui-danger-soft) calc(l - 0.085) calc(max(c, min(0.045, c * 3))) h),
-    oklch(from var(--ui-danger-soft) calc(l + 0.085) calc(max(c, min(0.045, c * 3))) h)
-  );
-  --_ui-selection-context-text: var(--ui-text-primary);
-  border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
-  border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
-  /* An accent edge keeps the corners on its side straight. */
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-  background: var(--ui-danger-soft);
-}
-
-.head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--ui-space-2) var(--ui-space-4);
-}
-
-.copy {
-  display: flex;
-  flex: 1 1 16rem;
-  flex-direction: column;
-  gap: var(--ui-space-1);
-  min-inline-size: 0;
-}
-
-.heading {
-  margin: 0;
-  color: var(--ui-text-primary);
-  font-size: var(--ui-font-size-lg);
-  font-weight: var(--ui-font-semibold);
-  line-height: var(--ui-line-height-tight);
-}
-
-[data-component~="ui-section"][data-ui-section-state~="tone=danger"] .heading {
-  color: var(--ui-danger);
-}
-
-.description {
-  color: var(--ui-text-secondary);
-  font-size: var(--ui-font-size-sm);
-  line-height: var(--ui-line-height);
-}
-
-.actions {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: var(--ui-space-2);
-}
-
-.body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-space-4);
-  min-inline-size: 0;
-}
-
-.description:empty,
-.actions:empty {
-  display: none;
-}
-
-.head:has(.heading[hidden]):has(.description:empty):has(.actions:empty) {
-  display: none;
-}
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-section"][hidden] {
-  display: none;
+
+@scope (.ui-section) {
+  :scope:where(:scope) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+    min-inline-size: 0;
+  }
+
+  :scope:where(:scope):is([data-ui-section-state~="variant=card"]) {
+    --_ui-selection-context-surface: initial;
+    --_ui-selection-context-border: initial;
+    --_ui-selection-context-text: initial;
+    padding: var(--ui-space-5);
+    border: var(--ui-border-width) solid var(--ui-border-strong);
+    border-radius: var(--ui-radius-lg);
+    background: var(--ui-surface-raised);
+  }
+
+  :scope:where(:scope):is([data-ui-section-state~="variant=divided"]) {
+    padding-block-start: var(--ui-space-6);
+    border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
+  }
+
+  :scope:where(:scope):is([data-ui-section-state~="variant=card"][data-ui-section-state~="tone=danger"]) {
+    --_ui-selection-context-surface: light-dark(
+      oklch(from var(--ui-danger-soft) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
+      oklch(from var(--ui-danger-soft) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
+    );
+    --_ui-selection-context-border: light-dark(
+      oklch(from var(--ui-danger-soft) calc(l - 0.085) calc(max(c, min(0.045, c * 3))) h),
+      oklch(from var(--ui-danger-soft) calc(l + 0.085) calc(max(c, min(0.045, c * 3))) h)
+    );
+    --_ui-selection-context-text: var(--ui-text-primary);
+    border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
+    border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
+    /* An accent edge keeps the corners on its side straight. */
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    background: var(--ui-danger-soft);
+  }
+
+  .head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--ui-space-2) var(--ui-space-4);
+  }
+
+  .copy {
+    display: flex;
+    flex: 1 1 16rem;
+    flex-direction: column;
+    gap: var(--ui-space-1);
+    min-inline-size: 0;
+  }
+
+  .heading {
+    margin: 0;
+    color: var(--ui-text-primary);
+    font-size: var(--ui-font-size-lg);
+    font-weight: var(--ui-font-semibold);
+    line-height: var(--ui-line-height-tight);
+  }
+
+  :scope[data-ui-section-state~="tone=danger"] .heading {
+    color: var(--ui-danger);
+  }
+
+  .description {
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-sm);
+    line-height: var(--ui-line-height);
+  }
+
+  .actions {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--ui-space-2);
+  }
+
+  .body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+    min-inline-size: 0;
+  }
+
+  .description:empty, .actions:empty {
+    display: none;
+  }
+
+  .head:has(.heading[hidden]):has(.description:empty):has(.actions:empty) {
+    display: none;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiSelect.d.ts

@@ -57,10 +57,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     value: string | null;
+    required: boolean | null;
     invalid: boolean | null;
     size: "sm" | "md" | "lg" | null;
     disabled: boolean | null;
-    required: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;