@threadlabs/looma 0.28.12 → 0.28.14

package/vue/UiCallout.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -86,7 +86,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('div', 'ui-callout')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.tone && 'tone',
@@ -100,12 +100,14 @@ const hostState = computed(() =>
     class="ui-callout"
     role="note"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-callout
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-heading="reflectedProp('heading', 'heading', checkedProps.heading, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-callout-prop-heading="reflectedProp('heading', 'heading', checkedProps.heading, undefined, false)"
+    :data-ui-callout-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-ui-callout-state="hostState || undefined"
   >
-    <span class="icon" aria-hidden="true"><svg
+    <span class="icon" aria-hidden="true" data-hn-ui-callout><svg
         v-if="checkedProps.tone === 'info'"
         viewBox="0 0 24 24"
         fill="none"
@@ -113,10 +115,11 @@ const hostState = computed(() =>
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
+        data-hn-ui-callout
       >
-        <circle cx="12" cy="12" r="10"></circle>
-        <path d="M12 16v-4"></path>
-        <path d="M12 8h.01"></path>
+        <circle cx="12" cy="12" r="10" data-hn-ui-callout></circle>
+        <path d="M12 16v-4" data-hn-ui-callout></path>
+        <path d="M12 8h.01" data-hn-ui-callout></path>
       </svg>
       <svg
         v-if="checkedProps.tone === 'neutral' || checkedProps.tone === 'note'"
@@ -126,10 +129,15 @@ const hostState = computed(() =>
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
+        data-hn-ui-callout
       >
-        <path d="M13.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.5L13.5 2Z"></path>
-        <path d="M13 2v7h7"></path>
-        <path d="m9.5 17.5 4-4 2 2-4 4H9.5v-2Z"></path>
+        <path
+          d="M13.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.5L13.5 2Z"
+          data-hn-ui-callout
+        >
+        </path>
+        <path d="M13 2v7h7" data-hn-ui-callout></path>
+        <path d="m9.5 17.5 4-4 2 2-4 4H9.5v-2Z" data-hn-ui-callout></path>
       </svg>
       <svg
         v-if="checkedProps.tone === 'tip'"
@@ -139,11 +147,15 @@ const hostState = computed(() =>
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
+        data-hn-ui-callout
       >
-        <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5">
+        <path
+          d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"
+          data-hn-ui-callout
+        >
         </path>
-        <path d="M9 18h6"></path>
-        <path d="M10 22h4"></path>
+        <path d="M9 18h6" data-hn-ui-callout></path>
+        <path d="M10 22h4" data-hn-ui-callout></path>
       </svg>
       <svg
         v-if="checkedProps.tone === 'important'"
@@ -153,11 +165,15 @@ const hostState = computed(() =>
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
+        data-hn-ui-callout
       >
-        <path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z">
+        <path
+          d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
+          data-hn-ui-callout
+        >
         </path>
-        <path d="M12 15h.01"></path>
-        <path d="M12 7v4"></path>
+        <path d="M12 15h.01" data-hn-ui-callout></path>
+        <path d="M12 7v4" data-hn-ui-callout></path>
       </svg>
       <svg
         v-if="checkedProps.tone === 'warning'"
@@ -167,10 +183,15 @@ const hostState = computed(() =>
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
+        data-hn-ui-callout
       >
-        <path d="m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path>
-        <path d="M12 9v4"></path>
-        <path d="M12 17h.01"></path>
+        <path
+          d="m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"
+          data-hn-ui-callout
+        >
+        </path>
+        <path d="M12 9v4" data-hn-ui-callout></path>
+        <path d="M12 17h.01" data-hn-ui-callout></path>
       </svg>
       <svg
         v-if="checkedProps.tone === 'success'"
@@ -180,9 +201,10 @@ const hostState = computed(() =>
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
+        data-hn-ui-callout
       >
-        <circle cx="12" cy="12" r="10"></circle>
-        <path d="m9 12 2 2 4-4"></path>
+        <circle cx="12" cy="12" r="10" data-hn-ui-callout></circle>
+        <path d="m9 12 2 2 4-4" data-hn-ui-callout></path>
       </svg>
       <svg
         v-if="checkedProps.tone === 'danger' || checkedProps.tone === 'caution'"
@@ -192,13 +214,16 @@ const hostState = computed(() =>
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
+        data-hn-ui-callout
       >
-        <circle cx="12" cy="12" r="10"></circle>
-        <path d="m15 9-6 6"></path>
-        <path d="m9 9 6 6"></path>
+        <circle cx="12" cy="12" r="10" data-hn-ui-callout></circle>
+        <path d="m15 9-6 6" data-hn-ui-callout></path>
+        <path d="m9 9 6 6" data-hn-ui-callout></path>
       </svg></span>
-    <div class="content">
-      <strong v-if="checkedProps.heading" class="heading">{{ checkedProps.heading }}</strong>
+    <div class="content" data-hn-ui-callout>
+      <strong v-if="checkedProps.heading" class="heading" data-hn-ui-callout>{{
+        checkedProps.heading
+      }}</strong>
       <slot />
     </div>
   </div>
@@ -257,8 +282,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-callout) {
-  :scope:where(:scope) {
+@scope (.ui-callout) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-callout])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-callout-icon-column: var(--ui-callout-icon-column);
     --_ui-callout-icon: var(--ui-callout-icon);
@@ -320,7 +345,7 @@ const hostState = computed(() =>
     font-weight: var(--ui-font-normal);
     line-height: var(--ui-line-height-md);
   }
-  .icon {
+  :global(.icon:where([data-hn-ui-callout])) {
     display: grid;
     place-items: center;
     inline-size: var(--_ui-callout-icon-column, 1.125rem);
@@ -328,22 +353,22 @@ const hostState = computed(() =>
     color: var(--_ui-callout-icon, var(--_callout-icon));
   }
 
-  .icon svg {
+  :global(.icon svg:where([data-hn-ui-callout])) {
     inline-size: var(--_ui-callout-icon-size, 1.125rem);
     block-size: var(--_ui-callout-icon-size, 1.125rem);
   }
 
-  .content {
+  :global(.content:where([data-hn-ui-callout])) {
     min-inline-size: 0;
   }
 
-  .heading {
+  :global(.heading:where([data-hn-ui-callout])) {
     display: block;
     font-weight: var(--ui-font-semibold);
   }
 
-  :scope:where(:scope):is([data-ui-callout-state~="tone=neutral"]),
-  :scope:where(:scope):is([data-ui-callout-state~="tone=note"]) {
+  :global(:scope[data-ui-callout-state~="tone=neutral"]:where([data-hn-ui-callout])),
+  :global(:scope[data-ui-callout-state~="tone=note"]:where([data-hn-ui-callout])) {
     --_ui-selection-context-surface: initial;
     --_ui-selection-context-border: initial;
     --_ui-selection-context-text: initial;
@@ -352,43 +377,43 @@ const hostState = computed(() =>
     --_callout-icon: var(--ui-text-secondary);
   }
 
-  :scope:where(:scope):is([data-ui-callout-state~="tone=tip"]) {
+  :global(:scope[data-ui-callout-state~="tone=tip"]:where([data-hn-ui-callout])) {
     --_callout-surface: var(--ui-success-soft);
     --_callout-border: var(--ui-success-solid);
     --_callout-icon: var(--ui-success-solid);
   }
 
-  :scope:where(:scope):is([data-ui-callout-state~="tone=important"]) {
+  :global(:scope[data-ui-callout-state~="tone=important"]:where([data-hn-ui-callout])) {
     --_callout-surface: var(--ui-accent-soft);
     --_callout-border: var(--ui-accent-solid);
     --_callout-icon: var(--ui-accent-solid);
   }
 
-  :scope:where(:scope):is([data-ui-callout-state~="tone=warning"]) {
+  :global(:scope[data-ui-callout-state~="tone=warning"]:where([data-hn-ui-callout])) {
     --_callout-surface: var(--ui-warning-soft);
     --_callout-border: var(--ui-warning-solid);
     --_callout-icon: var(--ui-warning-solid);
   }
 
-  :scope:where(:scope):is([data-ui-callout-state~="tone=success"]) {
+  :global(:scope[data-ui-callout-state~="tone=success"]:where([data-hn-ui-callout])) {
     --_callout-surface: var(--ui-success-soft);
     --_callout-border: var(--ui-success-solid);
     --_callout-icon: var(--ui-success-solid);
   }
 
-  :scope:where(:scope):is([data-ui-callout-state~="tone=danger"]),
-  :scope:where(:scope):is([data-ui-callout-state~="tone=caution"]) {
+  :global(:scope[data-ui-callout-state~="tone=danger"]:where([data-hn-ui-callout])),
+  :global(:scope[data-ui-callout-state~="tone=caution"]:where([data-hn-ui-callout])) {
     --_callout-surface: var(--ui-danger-soft);
     --_callout-border: var(--ui-danger-solid);
     --_callout-icon: var(--ui-danger-solid);
   }
-  .content :slotted(a) {
+  :global(.content :where(:not([data-hn-ui-callout])):is(a)) {
     color: var(--ui-accent-active);
     text-decoration: underline;
     text-decoration-thickness: 0.06em;
     text-underline-offset: 0.18em;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-callout])) {
     display: none;
   }
 }

package/vue/UiCard.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -139,7 +139,7 @@ checkHydratedRoot(
   'ui-card',
 )
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.padding && 'padding',
@@ -161,12 +161,14 @@ const hostState = computed(() =>
     v-if="checkedProps.as === 'section'"
     class="ui-card"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-card
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-card-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-card-prop-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
+    :data-ui-card-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-card-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-card-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -176,12 +178,14 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'article'"
     class="ui-card"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-card
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-card-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-card-prop-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
+    :data-ui-card-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-card-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-card-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -191,12 +195,14 @@ const hostState = computed(() =>
     v-else-if="checkedProps.as === 'aside'"
     class="ui-card"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-card
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-card-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-card-prop-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
+    :data-ui-card-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-card-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-card-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -206,12 +212,14 @@ const hostState = computed(() =>
     v-else
     class="ui-card"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-card
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
-    :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
-    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-card-prop-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-ui-card-prop-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
+    :data-ui-card-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-card-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-card-prop-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-card-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -227,8 +235,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-card) {
-  :scope:where(:scope) {
+@scope (.ui-card) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-card])) {
     --_ui-card-surface: var(--ui-surface-raised);
     --_ui-selection-context-surface: initial;
     --_ui-selection-context-border: initial;
@@ -245,54 +253,54 @@ const hostState = computed(() =>
     color: var(--ui-text-primary);
   }
 
-  :scope:where(:scope):is([data-ui-card-state~="padding=xs"]) {
+  :global(:scope[data-ui-card-state~="padding=xs"]:where([data-hn-ui-card])) {
     gap: var(--ui-space-1);
     padding: var(--ui-space-2);
   }
-  :scope:where(:scope):is([data-ui-card-state~="padding=sm"]) {
+  :global(:scope[data-ui-card-state~="padding=sm"]:where([data-hn-ui-card])) {
     gap: var(--ui-space-2);
     padding: var(--ui-space-3);
   }
 
-  :scope:where(:scope):is([data-ui-card-state~="padding=lg"]) {
+  :global(:scope[data-ui-card-state~="padding=lg"]:where([data-hn-ui-card])) {
     padding: var(--ui-space-6);
   }
 
-  :scope:where(:scope):is([data-ui-card-state~="variant=subtle"]) {
+  :global(:scope[data-ui-card-state~="variant=subtle"]:where([data-hn-ui-card])) {
     border-color: transparent;
     --_ui-card-surface: var(--ui-surface-muted);
   }
 
-  :scope:where(:scope):is([data-ui-card-state~="variant=elevated"]) {
+  :global(:scope[data-ui-card-state~="variant=elevated"]:where([data-hn-ui-card])) {
     border-color: var(--ui-border-subtle);
     box-shadow: var(--ui-shadow-lg);
   }
 
-  :scope:where(:scope):is([data-ui-card-state~="tone=accent"]) {
+  :global(:scope[data-ui-card-state~="tone=accent"]:where([data-hn-ui-card])) {
     border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-border-default));
     --_ui-card-surface: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));
   }
 
-  :scope:where(:scope):is([data-ui-card-state~="tone=info"]) {
+  :global(:scope[data-ui-card-state~="tone=info"]:where([data-hn-ui-card])) {
     border-color: color-mix(in srgb, var(--ui-info) 25%, var(--ui-border-default));
     --_ui-card-surface: color-mix(in srgb, var(--ui-info) 6%, var(--ui-surface-default));
   }
 
-  :scope:where(:scope):is([data-ui-card-state~="tone=success"]) {
+  :global(:scope[data-ui-card-state~="tone=success"]:where([data-hn-ui-card])) {
     border-color: color-mix(in srgb, var(--ui-success) 25%, var(--ui-border-default));
     --_ui-card-surface: color-mix(in srgb, var(--ui-success) 6%, var(--ui-surface-default));
   }
 
-  :scope:where(:scope):is([data-ui-card-state~="tone=warning"]) {
+  :global(:scope[data-ui-card-state~="tone=warning"]:where([data-hn-ui-card])) {
     border-color: color-mix(in srgb, var(--ui-warning) 25%, var(--ui-border-default));
     --_ui-card-surface: color-mix(in srgb, var(--ui-warning) 6%, var(--ui-surface-default));
   }
 
-  :scope:where(:scope):is([data-ui-card-state~="variant=subtle"]:is([data-ui-card-state~="tone=accent"], [data-ui-card-state~="tone=info"], [data-ui-card-state~="tone=success"], [data-ui-card-state~="tone=warning"])) {
+  :global(:scope[data-ui-card-state~="variant=subtle"]:is([data-ui-card-state~="tone=accent"], [data-ui-card-state~="tone=info"], [data-ui-card-state~="tone=success"], [data-ui-card-state~="tone=warning"]):where([data-hn-ui-card])) {
     border-color: transparent;
   }
 
-  :scope:where(:scope):is([data-ui-card-state~="tone=danger"]) {
+  :global(:scope[data-ui-card-state~="tone=danger"]:where([data-hn-ui-card])) {
     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. */
@@ -300,11 +308,11 @@ const hostState = computed(() =>
     border-end-start-radius: 0;
     --_ui-card-surface: var(--ui-danger-soft);
   }
-  :scope:where(:scope):is([data-ui-card-state~="tone=accent"]),
-  :scope:where(:scope):is([data-ui-card-state~="tone=info"]),
-  :scope:where(:scope):is([data-ui-card-state~="tone=success"]),
-  :scope:where(:scope):is([data-ui-card-state~="tone=warning"]),
-  :scope:where(:scope):is([data-ui-card-state~="tone=danger"]) {
+  :global(:scope[data-ui-card-state~="tone=accent"]:where([data-hn-ui-card])),
+  :global(:scope[data-ui-card-state~="tone=info"]:where([data-hn-ui-card])),
+  :global(:scope[data-ui-card-state~="tone=success"]:where([data-hn-ui-card])),
+  :global(:scope[data-ui-card-state~="tone=warning"]:where([data-hn-ui-card])),
+  :global(:scope[data-ui-card-state~="tone=danger"]:where([data-hn-ui-card])) {
     --_ui-selection-context-surface: light-dark(
       oklch(from var(--_ui-card-surface) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
       oklch(from var(--_ui-card-surface) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
@@ -316,19 +324,19 @@ const hostState = computed(() =>
     --_ui-selection-context-text: var(--ui-text-primary);
   }
 
-  :scope:where(:scope):is([data-ui-card-state~="size=sm"]) {
+  :global(:scope[data-ui-card-state~="size=sm"]:where([data-hn-ui-card])) {
     inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
     max-inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
   }
-  :scope:where(:scope):is([data-ui-card-state~="size=md"]) {
+  :global(:scope[data-ui-card-state~="size=md"]:where([data-hn-ui-card])) {
     inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
     max-inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
   }
-  :scope:where(:scope):is([data-ui-card-state~="size=lg"]) {
+  :global(:scope[data-ui-card-state~="size=lg"]:where([data-hn-ui-card])) {
     inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
     max-inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-card])) {
     display: none;
   }
 }