@threadlabs/looma 0.28.5 → 0.28.7

package/vue/UiList.vue

@@ -1,8 +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, useTemplateRef, watchSyncEffect } from 'vue'
+import { computed, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { preserveRootFocus } from './host'
+import { checkHydratedRoot, nativeAttrs, preserveRootFocus, useReflectedProp } from './host'
 import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -96,57 +96,12 @@ 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 rootArmElement = useTemplateRef<HTMLElement>('@html-next/root')
 const root = rootArmElement
 preserveRootFocus(root)
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element)
-    || hydrationNode.localName !== ((checkedProps.value.as === 'ol') ? 'ol' : ('ul')))
-) {
-  throw Object.assign(new Error('HR005: Server markup for <ui-list> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-list> has an incompatible root.',
-    }),
-  })
-}
+checkHydratedRoot((checkedProps.value.as === 'ol') ? 'ol' : ('ul'), 'ui-list')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -168,7 +123,7 @@ const hostState = computed(() =>
 <template>
   <ol
     v-if="checkedProps.as === 'ol'"
-    data-component="ui-list"
+    class="ui-list"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
@@ -182,7 +137,7 @@ const hostState = computed(() =>
   </ol>
   <ul
     v-else
-    data-component="ui-list"
+    class="ui-list"
     role="list"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
@@ -211,70 +166,73 @@ const hostState = computed(() =>
 /* A list of native li elements or structured ui-list-item components. It owns the spacing between them, so a view never sets it. The
    explicit list role keeps the list announced as one: some browsers drop it from a list with no
    markers. */
-[data-component~="ui-list"] {
-  --_list-gap: var(--ui-list-gap, var(--ui-space-1));
-  --_list-min-item-width: var(--ui-list-min-item-width, 14rem);
-  display: flex;
-  flex-direction: column;
-  inline-size: 100%;
-  gap: var(--_list-gap);
-  min-inline-size: 0;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
 
-[data-component~="ui-list"][data-ui-list-state~="as=ol"],
-[data-component~="ui-list"][data-ui-list-state~="markers=disc"] {
-  padding-inline-start: var(--ui-space-5);
-}
+/* Compact passes its size to the items through private properties, which cross into each item. */
 
-[data-component~="ui-list"][data-ui-list-state~="as=ol"] {
-  list-style: decimal;
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-[data-component~="ui-list"][data-ui-list-state~="markers=disc"] {
-  list-style: disc;
-}
+@scope (.ui-list) {
+  :scope:where(:scope) {
+    --_list-gap: var(--ui-list-gap, var(--ui-space-1));
+    --_list-min-item-width: var(--ui-list-min-item-width, 14rem);
+    display: flex;
+    flex-direction: column;
+    inline-size: 100%;
+    gap: var(--_list-gap);
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
 
-[data-component~="ui-list"] > :slotted(li) {
-  box-sizing: border-box;
-  min-inline-size: 0;
-  padding: var(--_ui-list-native-padding-block, var(--ui-space-2))
-    var(--_ui-list-native-padding-inline, var(--ui-space-3));
-  border-radius: var(--ui-radius-md);
-  color: var(--ui-text-primary);
-  list-style: inherit;
-}
+  :scope:where(:scope):is([data-ui-list-state~="as=ol"]),
+  :scope:where(:scope):is([data-ui-list-state~="markers=disc"]) {
+    padding-inline-start: var(--ui-space-5);
+  }
 
-[data-component~="ui-list"] > :slotted(li.card) {
-  padding: var(--_ui-list-native-padding-block, var(--ui-space-3))
-    var(--_ui-list-native-padding-inline, var(--ui-space-4));
-  border: var(--ui-border-width) solid var(--ui-border-strong);
-  border-radius: var(--ui-radius-lg);
-  background: var(--ui-surface-raised);
-  list-style: none;
-}
+  :scope:where(:scope):is([data-ui-list-state~="as=ol"]) {
+    list-style: decimal;
+  }
 
-/* Compact passes its size to the items through private properties, which cross into each item. */
-[data-component~="ui-list"][data-ui-list-state~="density=compact"] {
-  --_list-gap: var(--ui-list-gap, var(--ui-space-2));
-  --_ui-list-item-min-size: 0;
-  --_ui-list-item-padding-block: 0;
-  --_ui-list-item-padding-inline: 0;
-  --_ui-list-item-title-weight: var(--ui-font-normal);
-  --_ui-list-native-padding-block: 0;
-  --_ui-list-native-padding-inline: 0;
-}
+  :scope:where(:scope):is([data-ui-list-state~="markers=disc"]) {
+    list-style: disc;
+  }
 
-[data-component~="ui-list"][data-ui-list-state~="layout=grid"] {
-  --_list-gap: var(--ui-list-gap, var(--ui-space-3));
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_list-min-item-width)), 1fr));
-}
+  :scope > :slotted(li) {
+    box-sizing: border-box;
+    min-inline-size: 0;
+    padding: var(--_ui-list-native-padding-block, var(--ui-space-2))
+      var(--_ui-list-native-padding-inline, var(--ui-space-3));
+    border-radius: var(--ui-radius-md);
+    color: var(--ui-text-primary);
+    list-style: inherit;
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-list"][hidden] {
-  display: none;
+  :scope > :slotted(li.card) {
+    padding: var(--_ui-list-native-padding-block, var(--ui-space-3))
+      var(--_ui-list-native-padding-inline, var(--ui-space-4));
+    border: var(--ui-border-width) solid var(--ui-border-strong);
+    border-radius: var(--ui-radius-lg);
+    background: var(--ui-surface-raised);
+    list-style: none;
+  }
+  :scope:where(:scope):is([data-ui-list-state~="density=compact"]) {
+    --_list-gap: var(--ui-list-gap, var(--ui-space-2));
+    --_ui-list-item-min-size: 0;
+    --_ui-list-item-padding-block: 0;
+    --_ui-list-item-padding-inline: 0;
+    --_ui-list-item-title-weight: var(--ui-font-normal);
+    --_ui-list-native-padding-block: 0;
+    --_ui-list-native-padding-inline: 0;
+  }
+
+  :scope:where(:scope):is([data-ui-list-state~="layout=grid"]) {
+    --_list-gap: var(--ui-list-gap, var(--ui-space-3));
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_list-min-item-width)), 1fr));
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiListItem.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 })
@@ -124,56 +125,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 hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('li'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-list-item> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-list-item> has an incompatible root.',
-      }),
-    },
-  )
-}
+const reflectedProp = useReflectedProp()
+
+checkHydratedRoot('li', 'ui-list-item')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -193,7 +147,7 @@ const hostState = computed(() =>
 
 <template>
   <li
-    data-component="ui-list-item"
+    class="ui-list-item"
     v-bind="nativeAttrs($attrs)"
     :aria-current="checkedProps.current ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
@@ -246,179 +200,178 @@ const hostState = computed(() =>
    padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
    a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
    stay their own. */
-[data-component~="ui-list-item"] {
-  /* Hooks do not inherit, so the parts below read them from the root. */
-  --_ui-list-item-icon-size: var(--ui-list-item-icon-size);
-
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: var(--ui-list-item-gap, var(--ui-space-3));
-  min-inline-size: 0;
-  min-block-size: var(--_ui-list-item-min-size, var(--ui-control-size, 2.5rem));
-  padding-block: var(
-    --ui-list-item-padding-block,
-    var(--_ui-list-item-padding-block, var(--ui-space-2))
-  );
-  padding-inline: var(
-    --ui-list-item-padding-inline,
-    var(--_ui-list-item-padding-inline, var(--ui-space-3))
-  );
-  border-radius: var(--ui-selection-radius);
-  color: var(--ui-text-primary);
-  transition:
-    background-color var(--ui-motion-fast) var(--ui-motion-ease),
-    border-color var(--ui-motion-fast) var(--ui-motion-ease);
-}
 
-[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"] {
-  padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
-  padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
-  border: var(--ui-border-width) solid var(--ui-border-strong);
-  border-radius: var(--ui-radius-lg);
-  background: var(--ui-surface-raised);
-}
+/* Framed cards already have their own edge; the stronger focus ring stays separate. */
 
-[data-component~="ui-list-item"]:where(:has(.title a[href])):hover,
-[data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"],
-[data-component~="ui-list-item"][data-ui-list-item-state~="current"] {
-  background: var(--_ui-selection-context-surface, var(--ui-selection-surface));
-  box-shadow: inset 0 0 0 var(--ui-border-width)
-    var(--_ui-selection-context-border, var(--ui-selection-border));
-}
+/* An explicitly independent leading control sits above the stretched row link. */
 
-[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"]:where(:has(.title
-  a[href])):hover {
-  border-color: var(--ui-border-strong);
-}
+/* Trailing controls take their own clicks, above the title link's stretched hit area. */
 
-[data-component~="ui-list-item"][data-ui-list-item-state~="current"] {
-  color: var(--_ui-selection-context-text, var(--ui-selection-text));
-}
+/* Keep identity and disclosure marks beside the first line, even with a long description. */
 
-/* Framed cards already have their own edge; the stronger focus ring stays separate. */
-[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"] {
-  box-shadow: none;
-}
+/* An unused region takes no space. */
 
-[data-component~="ui-list-item"]:has(.title a[href]:focus-visible) {
-  box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-.leading,
-.trailing {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  gap: var(--ui-space-2);
-}
+@scope (.ui-list-item) {
+  :scope:where(:scope) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-list-item-icon-size: var(--ui-list-item-icon-size);
+
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--ui-list-item-gap, var(--ui-space-3));
+    min-inline-size: 0;
+    min-block-size: var(--_ui-list-item-min-size, var(--ui-control-size, 2.5rem));
+    padding-block: var(
+      --ui-list-item-padding-block,
+      var(--_ui-list-item-padding-block, var(--ui-space-2))
+    );
+    padding-inline: var(
+      --ui-list-item-padding-inline,
+      var(--_ui-list-item-padding-inline, var(--ui-space-3))
+    );
+    border-radius: var(--ui-selection-radius);
+    color: var(--ui-text-primary);
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      border-color var(--ui-motion-fast) var(--ui-motion-ease);
+  }
 
-.leading {
-  color: var(--ui-text-muted);
-  font-size: var(--_ui-list-item-icon-size, var(--ui-font-size-lg));
-}
+  :scope:where(:scope):is([data-ui-list-item-state~="variant=card"]) {
+    padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
+    padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
+    border: var(--ui-border-width) solid var(--ui-border-strong);
+    border-radius: var(--ui-radius-lg);
+    background: var(--ui-surface-raised);
+  }
 
-[data-component~="ui-list-item"][data-ui-list-item-state~="current"] .leading {
-  color: var(--_ui-selection-context-text, var(--ui-selection-text));
-}
+  :scope:where(:scope):is(:where(:has(.title a[href])):hover),
+  :scope:where(:scope):is([data-ui-list-item-state~="highlighted"]),
+  :scope:where(:scope):is([data-ui-list-item-state~="current"]) {
+    background: var(--_ui-selection-context-surface, var(--ui-selection-surface));
+    box-shadow: inset 0 0 0 var(--ui-border-width)
+      var(--_ui-selection-context-border, var(--ui-selection-border));
+  }
 
-/* An explicitly independent leading control sits above the stretched row link. */
-[data-component~="ui-list-item"][data-ui-list-item-state~="leadingInteractive"] .leading {
-  position: relative;
-  z-index: 1;
-}
+  :scope:where(:scope):is([data-ui-list-item-state~="variant=card"]:where(:has(.title
+    a[href])):hover) {
+    border-color: var(--ui-border-strong);
+  }
 
-/* Trailing controls take their own clicks, above the title link's stretched hit area. */
-.trailing {
-  position: relative;
-  z-index: 1;
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-sm);
-}
+  :scope:where(:scope):is([data-ui-list-item-state~="current"]) {
+    color: var(--_ui-selection-context-text, var(--ui-selection-text));
+  }
+  :scope:where(:scope):is([data-ui-list-item-state~="variant=card"]) {
+    box-shadow: none;
+  }
 
-.content {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: var(--ui-space-0-5, 2px);
-  min-inline-size: 0;
-}
+  :scope:where(:scope):is(:has(.title a[href]:focus-visible)) {
+    box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
+  }
 
-.title,
-.description {
-  display: block;
-  min-inline-size: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  .leading, .trailing {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: var(--ui-space-2);
+  }
 
-[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .title,
-[data-component~="ui-list-item"][data-ui-list-item-state~="wrap"] .description {
-  white-space: normal;
-  overflow-wrap: anywhere;
-}
+  .leading {
+    color: var(--ui-text-muted);
+    font-size: var(--_ui-list-item-icon-size, var(--ui-font-size-lg));
+  }
 
-.title {
-  font-size: var(--ui-font-size-md);
-  font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
-  line-height: var(--ui-line-height-tight);
-}
+  :scope[data-ui-list-item-state~="current"] .leading {
+    color: var(--_ui-selection-context-text, var(--ui-selection-text));
+  }
+  :scope[data-ui-list-item-state~="leadingInteractive"] .leading {
+    position: relative;
+    z-index: 1;
+  }
+  .trailing {
+    position: relative;
+    z-index: 1;
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-sm);
+  }
 
-/* Keep identity and disclosure marks beside the first line, even with a long description. */
-[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"] {
-  align-items: flex-start;
-}
+  .content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--ui-space-0-5, 2px);
+    min-inline-size: 0;
+  }
 
-[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"] .leading,
-[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"] .trailing {
-  min-block-size: calc(var(--ui-font-size-md) * var(--ui-line-height-tight));
-}
+  .title, .description {
+    display: block;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-.description {
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-sm);
-  line-height: var(--ui-line-height-tight);
-}
+  :scope[data-ui-list-item-state~="wrap"] .title,
+  :scope[data-ui-list-item-state~="wrap"] .description {
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
 
-.title > :slotted(a) {
-  color: inherit;
-  text-decoration: none;
-}
+  .title {
+    font-size: var(--ui-font-size-md);
+    font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
+    line-height: var(--ui-line-height-tight);
+  }
+  :scope:where(:scope):is([data-ui-list-item-state~="align=title"]) {
+    align-items: flex-start;
+  }
 
-.title > :slotted(a:focus-visible) {
-  outline: none;
-  box-shadow: none;
-}
+  :scope[data-ui-list-item-state~="align=title"] .leading,
+  :scope[data-ui-list-item-state~="align=title"] .trailing {
+    min-block-size: calc(var(--ui-font-size-md) * var(--ui-line-height-tight));
+  }
 
-.title > :slotted(a[href])::after {
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  content: "";
-}
+  .description {
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-sm);
+    line-height: var(--ui-line-height-tight);
+  }
 
-/* An unused region takes no space. */
-.leading:empty,
-.description:empty,
-.trailing:empty {
-  display: none;
-}
+  .title > :slotted(a) {
+    color: inherit;
+    text-decoration: none;
+  }
 
-@media (forced-colors: active) {
-  [data-component~="ui-list-item"]:has(a:focus-visible) {
-    outline: var(--ui-focus-width) solid Highlight;
-    outline-offset: calc(-1 * var(--ui-focus-width));
+  .title > :slotted(a:focus-visible) {
+    outline: none;
+    box-shadow: none;
   }
-  :is([data-component~="ui-list-item"][data-ui-list-item-state~="current"], [data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"]):not(:has(a:focus-visible)) {
-    outline: var(--ui-border-width) solid Highlight;
-    outline-offset: calc(-1 * var(--ui-border-width));
+
+  .title > :slotted(a[href])::after {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    content: "";
+  }
+  .leading:empty, .description:empty, .trailing:empty {
+    display: none;
   }
-}
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-list-item"][hidden] {
-  display: none;
+  @media (forced-colors: active) {
+    :scope:where(:scope):is(:has(a:focus-visible)) {
+      outline: var(--ui-focus-width) solid Highlight;
+      outline-offset: calc(-1 * var(--ui-focus-width));
+    }
+    :is(:scope[data-ui-list-item-state~="current"], :scope[data-ui-list-item-state~="highlighted"]):not(:has(a:focus-visible)) {
+      outline: var(--ui-border-width) solid Highlight;
+      outline-offset: calc(-1 * var(--ui-border-width));
+    }
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiListbox.d.ts

@@ -1,7 +1,9 @@
 import type { PropType } from 'vue';
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare var __VLS_15: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     disabled: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -87,14 +89,15 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
     values: readonly string[] | null;
     name: string | null;
     value: string | null;
+    required: boolean | null;
     invalid: boolean | null;
     rows: number | null;
     disabled: boolean | null;
     multiple: boolean | null;
-    required: boolean | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
-    default?: (props: {}) => any;
-}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;