@threadlabs/looma 0.32.1 → 0.33.0

package/vue/UiBadge.vue

@@ -51,7 +51,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'variant' },
       description:
-        'Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n      inverse uses a translucent contrasting surface and toned ink for a count or label on a filled control of that tone. Neutral looks the same in solid and\n      subtle. overlay inherits the containing filled control\'s text colour on a faint translucent fill, with a quiet single-pixel boundary and no shadow. Its small circle is\n      20px. When space is constrained, the label truncates with an ellipsis while its full text remains available.',
+        'Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n      inverse uses a translucent contrasting surface and toned ink for a count or label on a filled control of that tone. Neutral looks the same in solid and\n      subtle. overlay inherits the containing filled control\'s text colour on a faint translucent fill, with a quiet single-pixel boundary and no shadow. Its\n      small circle is 20px. When space is constrained, the label truncates with an ellipsis while its full text remains available.',
       values: ['solid', 'subtle', 'outline', 'inverse', 'overlay'],
       default: 'subtle',
     },
@@ -298,15 +298,15 @@ const hostState = computed(() =>
       var(--_badge-color-surface, var(--_badge-surface))
     );
 
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--ui-space-1);
-    box-sizing: border-box;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: var(--ui-space-1) !important;
+    box-sizing: border-box !important;
     min-inline-size: 0;
     max-inline-size: 100%;
     padding: var(--ui-badge-padding-block, var(--ui-space-0-5))
-      var(--ui-badge-padding-inline, var(--ui-space-2));
+      var(--ui-badge-padding-inline, var(--ui-space-2)) !important;
     border: var(--ui-border-width) solid
       var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
     border-radius: var(--ui-radius-round);
@@ -319,28 +319,28 @@ const hostState = computed(() =>
     white-space: nowrap;
   }
   :global(.label:where([data-hn-ui-badge])) {
-    display: block;
+    display: block !important;
     min-inline-size: 0;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   :global(.label:empty:where([data-hn-ui-badge])) {
-    display: none;
+    display: none !important;
   }
   :global(.icon:where([data-hn-ui-badge])) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
     flex: none;
   }
 
   :global(.icon:empty:where([data-hn-ui-badge])) {
-    display: none;
+    display: none !important;
   }
 
   :global(.icon :where(:not([data-hn-ui-badge])):is(svg)) {
-    display: block;
+    display: block !important;
     inline-size: 1em;
     block-size: 1em;
     flex: none;
@@ -349,7 +349,7 @@ const hostState = computed(() =>
     inline-size: 1em;
     block-size: 1em;
     vertical-align: middle;
-    margin-inline-end: var(--ui-space-1);
+    margin-inline-end: var(--ui-space-1) !important;
   }
 
   :global(.label:has(svg):where([data-hn-ui-badge])) {
@@ -357,15 +357,15 @@ const hostState = computed(() =>
   }
   @supports (text-box-trim: trim-both) {
     :global(:scope:where([data-hn-ui-badge])) {
-      display: inline-block;
+      display: inline-block !important;
       min-block-size: var(--ui-badge-min-block-size, 1.5rem);
       text-align: center;
-      align-content: center;
+      align-content: center !important;
       text-box-trim: none;
     }
     :global(:scope:has(.icon:not(:empty)):where([data-hn-ui-badge])),
     :global(:scope:has(.label svg):where([data-hn-ui-badge])) {
-      display: inline-flex;
+      display: inline-flex !important;
       text-box-trim: none;
     }
     :global(.label:not(:has(svg)):where([data-hn-ui-badge])) {
@@ -377,12 +377,13 @@ const hostState = computed(() =>
   }
 
   :global(:scope[data-ui-badge-state~="size=xs"]:where([data-hn-ui-badge])) {
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     min-inline-size: 1rem;
     min-block-size: var(--ui-badge-min-block-size, 1rem);
     /* Compact text still needs room at both rounded edges. Fixed marks override this
        padding below; ordinary text badges retain their larger spacing. */
-    padding: var(--ui-badge-padding-block, 0) var(--ui-badge-padding-inline, var(--ui-space-1));
+    padding: var(--ui-badge-padding-block, 0) var(--ui-badge-padding-inline, var(--ui-space-1))
+      !important;
     font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
     line-height: var(--ui-badge-line-height, 1);
   }
@@ -595,14 +596,14 @@ const hostState = computed(() =>
   }
   :global(:scope[data-ui-badge-state~="shape=square"]:where([data-hn-ui-badge])) {
     --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
-    display: inline-flex;
-    box-sizing: border-box;
+    display: inline-flex !important;
+    box-sizing: border-box !important;
     flex: none;
     inline-size: var(--_badge-square-size);
     block-size: var(--_badge-square-size);
     min-inline-size: var(--_badge-square-size);
     min-block-size: var(--_badge-square-size);
-    padding: 0;
+    padding: 0 !important;
     border-radius: var(--ui-radius-md);
     text-box-trim: none;
   }
@@ -619,29 +620,29 @@ const hostState = computed(() =>
   }
 
   :global(:scope[data-ui-badge-state~="shape=square"] .label:where([data-hn-ui-badge])) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
   }
 
   :global(:scope[data-ui-badge-state~="shape=square"]
     .label
     :where(:not([data-hn-ui-badge])):is(svg)) {
-    margin-inline-end: 0;
+    margin-inline-end: 0 !important;
   }
 
   :global(:scope[data-ui-badge-state~="shape=square"] .label:empty:where([data-hn-ui-badge])) {
-    display: none;
+    display: none !important;
   }
   :global(:scope[data-ui-badge-state~="shape=circle"]:where([data-hn-ui-badge])) {
     --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-3) * 2));
-    display: inline-flex;
+    display: inline-flex !important;
     flex: none;
     inline-size: var(--_badge-circle-size);
     block-size: var(--_badge-circle-size);
     min-inline-size: var(--_badge-circle-size);
     min-block-size: var(--_badge-circle-size);
-    padding: 0;
+    padding: 0 !important;
     border-radius: var(--ui-radius-round);
     text-box-trim: none;
   }
@@ -659,9 +660,9 @@ const hostState = computed(() =>
   }
 
   :global(:scope[data-ui-badge-state~="shape=circle"] .label:where([data-hn-ui-badge])) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
     line-height: 1;
     text-box-trim: none;
   }
@@ -669,18 +670,18 @@ const hostState = computed(() =>
   :global(:scope[data-ui-badge-state~="shape=circle"]
     .label
     :where(:not([data-hn-ui-badge])):is(svg)) {
-    margin-inline-end: 0;
+    margin-inline-end: 0 !important;
   }
 
   :global(:scope[data-ui-badge-state~="shape=circle"] .label:empty:where([data-hn-ui-badge])) {
-    display: none;
+    display: none !important;
   }
   @supports (text-box-trim: trim-both) {
     :global(:scope[data-ui-badge-state~="shape=circle"]
       .label:not(:has(svg)):where([data-hn-ui-badge])),
     :global(:scope[data-ui-badge-state~="shape=square"]
       .label:not(:has(svg)):where([data-hn-ui-badge])) {
-      display: block;
+      display: block !important;
       text-box-trim: trim-both;
       text-box-edge: cap alphabetic;
       overflow: visible;
@@ -688,13 +689,13 @@ const hostState = computed(() =>
   }
   :global(:scope[data-ui-badge-state~="shape=dot"]:where([data-hn-ui-badge])) {
     position: relative;
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     flex: none;
     inline-size: var(--ui-badge-dot-size, var(--ui-space-2));
     block-size: var(--ui-badge-dot-size, var(--ui-space-2));
     min-inline-size: var(--ui-badge-dot-size, var(--ui-space-2));
     min-block-size: var(--ui-badge-dot-size, var(--ui-space-2));
-    padding: 0;
+    padding: 0 !important;
     border-radius: var(--ui-radius-round);
     text-box-trim: none;
   }
@@ -717,7 +718,7 @@ const hostState = computed(() =>
     background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
     padding-inline-end: calc(
       var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
-    );
+    ) !important;
     clip-path: polygon(
       0 0,
       calc(100% - var(--_badge-point)) 0,
@@ -748,10 +749,10 @@ const hostState = computed(() =>
   }
 
   :global(:scope[data-ui-badge-state~="shape=tag"]:dir(rtl):where([data-hn-ui-badge])) {
-    padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
+    padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2)) !important;
     padding-inline-start: calc(
       var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
-    );
+    ) !important;
     clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
   }
 
@@ -777,7 +778,7 @@ const hostState = computed(() =>
     }
   }
   :global(:scope[hidden]:where([data-hn-ui-badge])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiBreadcrumbItem.vue

@@ -143,34 +143,34 @@ const hostState = computed(() =>
 
 @scope (.ui-breadcrumb-item) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-breadcrumb-item])) {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-2);
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: var(--ui-space-2) !important;
     min-inline-size: 0;
-    margin: 0;
+    margin: 0 !important;
   }
 
   :global(.separator:where([data-hn-ui-breadcrumb-item])) {
-    display: inline-flex;
+    display: inline-flex !important;
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-sm);
   }
 
   :global(:scope:first-child .separator:where([data-hn-ui-breadcrumb-item])) {
-    display: none;
+    display: none !important;
   }
 
   :global(.content:where([data-hn-ui-breadcrumb-item])) {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-1);
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: var(--ui-space-1) !important;
     min-inline-size: 0;
   }
 
   :global(.content > :where(:not([data-hn-ui-breadcrumb-item])):is(a)) {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-1);
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: var(--ui-space-1) !important;
     color: var(--ui-text-secondary);
     text-decoration: none;
   }
@@ -186,7 +186,7 @@ const hostState = computed(() =>
     font-weight: var(--ui-font-medium);
   }
   :global(:scope[hidden]:where([data-hn-ui-breadcrumb-item])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiBreadcrumbs.vue

@@ -95,23 +95,23 @@ checkHydratedRoot('nav', 'ui-breadcrumbs')
 
 @scope (.ui-breadcrumbs) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-breadcrumbs])) {
-    display: block;
+    display: block !important;
     min-inline-size: 0;
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-sm);
   }
 
   :global(ol:where([data-hn-ui-breadcrumbs])) {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--ui-space-1) var(--ui-space-2);
-    margin: 0;
-    padding: 0;
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: center !important;
+    gap: var(--ui-space-1) var(--ui-space-2) !important;
+    margin: 0 !important;
+    padding: 0 !important;
     list-style: none;
   }
   :global(:scope[hidden]:where([data-hn-ui-breadcrumbs])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiButton.vue

@@ -122,7 +122,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'tone' },
       description:
-        'Which colour the button speaks in. It applies to every variant, so an outline, a ghost, and a solid in the same tone are the same action at three volumes:\n      tone="danger" variant="outline" is a destructive secondary action. neutral is the quiet one, for a button that should not claim a colour. The field variant always uses neutral field colors.',
+        'Which colour the button speaks in. It applies to every variant, so an outline, a ghost, and a solid in the same tone are the same action at three volumes:\n      tone="danger" variant="outline" is a destructive secondary action. neutral is the quiet one, for a button that should not claim a colour. The field\n      variant always uses neutral field colors.',
       values: ['accent', 'neutral', 'danger', 'success', 'warning', 'info'],
       default: 'accent',
     },
@@ -980,10 +980,10 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     --_tone-text: var(--_hue-text);
     --_on-tone: var(--_on-hue);
 
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    column-gap: var(--ui-space-2);
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    column-gap: var(--ui-space-2) !important;
     vertical-align: middle;
     color: var(--_tone-text);
   }
@@ -993,12 +993,12 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   }
 
   :global(:scope[data-ui-button-state~="align=start"]:where([data-hn-ui-button])) {
-    justify-content: flex-start;
+    justify-content: flex-start !important;
     text-align: start;
   }
 
   :global(:scope[data-ui-button-state~="stretch"]:where([data-hn-ui-button])) {
-    display: flex;
+    display: flex !important;
     inline-size: 100%;
   }
 
@@ -1017,38 +1017,40 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     /* Unset, a button wraps as its container does. */
     white-space: var(--ui-button-white-space, inherit);
     line-height: var(--ui-line-height-tight);
-    padding: var(--ui-space-2) var(--ui-space-3);
+    padding: var(--ui-control-inset-block-md, var(--ui-space-2))
+      var(--ui-action-inset-md, var(--ui-space-3)) !important;
     background-image: none;
     box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
     cursor: pointer;
     transition:
+      scale var(--ui-motion-press, var(--ui-motion-fast)) var(--ui-motion-ease),
       background-color var(--ui-motion-fast) var(--ui-motion-ease),
       border-color var(--ui-motion-fast) var(--ui-motion-ease),
       color var(--ui-motion-fast) var(--ui-motion-ease),
       box-shadow var(--ui-motion-base) var(--ui-motion-ease);
-    margin: 0;
+    margin: 0 !important;
   }
   :global(:scope:is(a):where([data-hn-ui-button])) {
     text-decoration: none;
   }
 
   :global(.spinner-wrap:where([data-hn-ui-button])) {
-    display: inline-flex;
+    display: inline-flex !important;
     flex: none;
     vertical-align: middle;
   }
   :global(:scope:not([variant="link"]):has(.badge:not(:empty)):where([data-hn-ui-button])) {
-    padding-block: var(--ui-space-0-5);
+    padding-block: var(--ui-space-0-5) !important;
   }
 
   :global(.badge:where([data-hn-ui-button])) {
-    display: inline-flex;
-    align-items: center;
+    display: inline-flex !important;
+    align-items: center !important;
     flex: none;
   }
 
   :global(.badge:empty:where([data-hn-ui-button])) {
-    display: none;
+    display: none !important;
   }
 
   @supports (text-box-trim: trim-both) {
@@ -1060,7 +1062,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
 
   :global(:scope[data-ui-button-state~="size=xs"]:where([data-hn-ui-button])) {
     min-block-size: 1.5rem;
-    padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25);
+    padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25) !important;
     font-size: var(--ui-font-size-xs);
   }
 
@@ -1070,21 +1072,23 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
 
   :global(:scope[data-ui-button-state~="size=sm"]:where([data-hn-ui-button])) {
     min-block-size: var(--ui-control-size-sm);
-    padding: var(--ui-space-1) var(--ui-space-2);
+    padding: var(--ui-control-inset-block-sm, var(--ui-space-1))
+      var(--ui-action-inset-sm, var(--ui-space-2)) !important;
     font-size: var(--ui-font-size-sm);
   }
 
   :global(:scope[data-ui-button-state~="size=lg"]:where([data-hn-ui-button])) {
     min-block-size: var(--ui-control-size-lg);
-    padding: var(--ui-space-3) var(--ui-space-4);
+    padding: var(--ui-control-inset-block-lg, var(--ui-space-3))
+      var(--ui-action-inset-lg, var(--ui-space-4)) !important;
     font-size: var(--ui-font-size-md);
   }
   :global(:scope[data-ui-button-state~="variant=card"]:where([data-hn-ui-button])) {
-    display: grid;
+    display: grid !important;
     grid-template-columns: auto minmax(0, 1fr) auto;
-    align-content: center;
-    align-items: start;
-    gap: var(--ui-space-3);
+    align-content: center !important;
+    align-items: start !important;
+    gap: var(--ui-space-3) !important;
     inline-size: 100%;
     min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-md));
     text-align: start;
@@ -1099,18 +1103,18 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     grid-template-columns: minmax(0, 1fr) auto;
   }
   :global(.card-icon:where([data-hn-ui-button])) {
-    display: flex;
-    align-items: flex-start;
+    display: flex !important;
+    align-items: flex-start !important;
   }
   :global(.card-icon:empty:where([data-hn-ui-button])) {
-    display: none;
+    display: none !important;
   }
   :global(.card-content:where([data-hn-ui-button])) {
     min-inline-size: 0;
   }
   :global(.card-action:where([data-hn-ui-button])) {
-    display: flex;
-    align-items: center;
+    display: flex !important;
+    align-items: center !important;
     align-self: center;
   }
   :global(:scope:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
@@ -1125,6 +1129,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     border-color: var(--ui-button-hover-border, var(--ui-border-strong));
   }
   :global(:scope:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button])) {
+    scale: var(--ui-press-scale, 1);
     background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
     background-image: none;
     box-shadow: var(--ui-pressed);
@@ -1303,9 +1308,9 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     content: "";
   }
   :global(:scope[data-ui-button-state~="variant=link"]:where([data-hn-ui-button])) {
-    display: inline;
+    display: inline !important;
     min-block-size: 0;
-    padding: 0;
+    padding: 0 !important;
     border: 0;
     border-radius: var(--ui-radius-sm);
     background: none;
@@ -1345,7 +1350,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
     outline-offset: var(--ui-focus-width);
   }
   :global(:scope[hidden]:where([data-hn-ui-button])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiCallout.vue

@@ -359,14 +359,14 @@ const hostState = computed(() =>
     --_callout-border: var(--ui-info-solid);
     --_callout-icon: var(--ui-info-solid);
 
-    display: grid;
+    display: grid !important;
     grid-template-columns: var(--ui-callout-icon-column, 1.125rem) minmax(0, 1fr);
-    gap: var(--ui-callout-gap, calc(var(--ui-space-2) * 0.75));
-    align-items: start;
+    gap: var(--ui-callout-gap, calc(var(--ui-space-2) * 0.75)) !important;
+    align-items: start !important;
     max-width: 100%;
-    padding-block: var(--ui-callout-padding-block, var(--ui-space-2));
-    padding-inline-start: var(--ui-callout-padding-inline, var(--ui-space-2));
-    padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
+    padding-block: var(--ui-callout-padding-block, var(--ui-space-2)) !important;
+    padding-inline-start: var(--ui-callout-padding-inline, var(--ui-space-2)) !important;
+    padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3)) !important;
     border: var(--ui-callout-border-width, var(--ui-border-width)) solid
       color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
     border-inline-start: var(
@@ -382,7 +382,7 @@ const hostState = computed(() =>
     line-height: var(--ui-line-height-md);
   }
   :global(.icon:where([data-hn-ui-callout])) {
-    display: grid;
+    display: grid !important;
     place-items: center;
     inline-size: var(--_ui-callout-icon-column, 1.125rem);
     block-size: 1lh;
@@ -399,7 +399,7 @@ const hostState = computed(() =>
   }
 
   :global(.heading:where([data-hn-ui-callout])) {
-    display: block;
+    display: block !important;
     font-weight: var(--ui-font-semibold);
   }
 
@@ -450,7 +450,7 @@ const hostState = computed(() =>
     text-underline-offset: 0.18em;
   }
   :global(:scope[hidden]:where([data-hn-ui-callout])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiCard.vue

@@ -265,12 +265,12 @@ const hostState = computed(() =>
     --_ui-selection-context-surface: initial;
     --_ui-selection-context-border: initial;
     --_ui-selection-context-text: initial;
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-space-4);
-    box-sizing: border-box;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: var(--ui-space-4) !important;
+    box-sizing: border-box !important;
     min-inline-size: 0;
-    padding: var(--ui-space-5);
+    padding: var(--ui-space-5) !important;
     border: var(--ui-border-width) solid var(--ui-border-strong);
     border-radius: var(--ui-radius-lg);
     background: var(--_ui-card-surface);
@@ -278,16 +278,16 @@ const hostState = computed(() =>
   }
 
   :global(:scope[data-ui-card-state~="padding=xs"]:where([data-hn-ui-card])) {
-    gap: var(--ui-space-1);
-    padding: var(--ui-space-2);
+    gap: var(--ui-space-1) !important;
+    padding: var(--ui-space-2) !important;
   }
   :global(:scope[data-ui-card-state~="padding=sm"]:where([data-hn-ui-card])) {
-    gap: var(--ui-space-2);
-    padding: var(--ui-space-3);
+    gap: var(--ui-space-2) !important;
+    padding: var(--ui-space-3) !important;
   }
 
   :global(:scope[data-ui-card-state~="padding=lg"]:where([data-hn-ui-card])) {
-    padding: var(--ui-space-6);
+    padding: var(--ui-space-6) !important;
   }
 
   :global(:scope[data-ui-card-state~="variant=subtle"]:where([data-hn-ui-card])) {
@@ -361,7 +361,7 @@ const hostState = computed(() =>
     max-inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
   }
   :global(:scope[hidden]:where([data-hn-ui-card])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>