@threadlabs/looma 0.2.3 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "type": "module",
   "description": "Looma web components, responsive layout primitives, a complete editor, and supported Vue adapters.",
   "license": "MIT",

package/styles.css

@@ -207,7 +207,13 @@
     color: var(--ui-action-secondary-text, var(--ui-text-primary));
   }
 
-  ui-button[variant="solid"] {
+  /* Match data-variant too, not just the variant attribute. ui-button does not
+   * reflect its `variant` prop, so a `variant` attribute only exists on buttons
+   * rendered server-side; client-rendered buttons (e.g. a dialog opened after
+   * mount) carry only the Stencil-synced data-variant. Keying on data-variant
+   * (as the size rules already do with data-size) makes this fallback apply in
+   * both cases instead of stranding client-rendered variants on the neutral base. */
+  ui-button:is([variant="solid"], [data-variant="solid"]) {
     color: var(--ui-action-primary-text, var(--ui-text-on-accent));
   }
 
@@ -252,59 +258,59 @@
     background: var(--ui-surface-subtle);
   }
 
-  ui-button[variant="solid"] > button {
+  ui-button:is([variant="solid"], [data-variant="solid"]) > button {
     border-color: var(--ui-action-primary-surface, var(--ui-accent-solid));
     background: var(--ui-action-primary-surface, var(--ui-accent-solid));
     color: var(--ui-action-primary-text, var(--ui-text-on-accent));
     box-shadow: var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs));
   }
 
-  ui-button[variant="solid"] > button:hover:enabled {
+  ui-button:is([variant="solid"], [data-variant="solid"]) > button:hover:enabled {
     background: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
     border-color: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
     box-shadow: var(--ui-shadow-sm);
     transform: translateY(-1px);
   }
 
-  ui-button[variant="solid"] > button:active:enabled {
+  ui-button:is([variant="solid"], [data-variant="solid"]) > button:active:enabled {
     background: var(--ui-action-primary-surface-active, var(--ui-accent-active));
     border-color: var(--ui-action-primary-surface-active, var(--ui-accent-active));
     box-shadow: none;
     transform: translateY(0);
   }
 
-  ui-button[variant="destructive"] > button {
+  ui-button:is([variant="destructive"], [data-variant="destructive"]) > button {
     border-color: var(--ui-danger-solid);
     background: var(--ui-danger-solid);
     color: var(--ui-text-on-accent);
     box-shadow: var(--ui-button-destructive-shadow, inset 0 1px rgb(255 255 255 / 0.14), var(--ui-shadow-xs));
   }
 
-  ui-button[variant="destructive"] > button:hover:enabled {
+  ui-button:is([variant="destructive"], [data-variant="destructive"]) > button:hover:enabled {
     background: var(--ui-danger-hover);
     border-color: var(--ui-danger-hover);
     box-shadow: var(--ui-shadow-sm);
     transform: translateY(-1px);
   }
 
-  ui-button[variant="destructive"] > button:active:enabled {
+  ui-button:is([variant="destructive"], [data-variant="destructive"]) > button:active:enabled {
     background: var(--ui-danger-hover);
     border-color: var(--ui-danger-hover);
     box-shadow: none;
     transform: translateY(0);
   }
 
-  ui-button[variant="ghost"] > button {
+  ui-button:is([variant="ghost"], [data-variant="ghost"]) > button {
     border-color: transparent;
     background: transparent;
   }
 
-  ui-button[variant="ghost"] > button:hover:enabled {
+  ui-button:is([variant="ghost"], [data-variant="ghost"]) > button:hover:enabled {
     background: var(--ui-surface-muted);
     border-color: transparent;
   }
 
-  ui-button[variant="ghost"] > button:active:enabled {
+  ui-button:is([variant="ghost"], [data-variant="ghost"]) > button:active:enabled {
     background: var(--ui-surface-subtle);
     border-color: transparent;
   }