@threadlabs/looma 0.2.3 → 0.2.5

package/package.json

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

package/styles.css

@@ -173,7 +173,7 @@
   font-variation-settings: inherit;
 }
 
-:where(ui-menu > ui-menu-item, ui-context-menu > ui-menu-item) {
+:where(ui-menu > ui-menu-item:not(:defined), ui-context-menu > ui-menu-item:not(:defined)) {
   display: block;
   width: 100%;
   padding: var(--ui-space-2) var(--ui-space-3);
@@ -190,12 +190,12 @@
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
-:where(ui-menu > ui-menu-item, ui-context-menu > ui-menu-item):hover:not([aria-disabled="true"]):not([disabled]) {
+:where(ui-menu > ui-menu-item:not(:defined), ui-context-menu > ui-menu-item:not(:defined)):hover:not([aria-disabled="true"]):not([disabled]) {
   background: var(--ui-surface-subtle);
 }
 
-:where(ui-menu > ui-menu-item, ui-context-menu > ui-menu-item)[aria-disabled="true"],
-:where(ui-menu > ui-menu-item, ui-context-menu > ui-menu-item)[disabled] {
+:where(ui-menu > ui-menu-item:not(:defined), ui-context-menu > ui-menu-item:not(:defined))[aria-disabled="true"],
+:where(ui-menu > ui-menu-item:not(:defined), ui-context-menu > ui-menu-item:not(:defined))[disabled] {
   opacity: 0.6;
   cursor: not-allowed;
 }
@@ -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;
   }
@@ -437,7 +443,7 @@
     box-shadow: var(--ui-shadow-lg);
   }
 
-  ui-menu-item {
+  ui-menu-item:not(:defined) {
     display: block;
     width: 100%;
     padding: var(--ui-space-2) var(--ui-space-3);
@@ -454,12 +460,12 @@
       color var(--ui-motion-fast) var(--ui-motion-ease);
   }
 
-  ui-menu-item:hover:not([aria-disabled="true"]):not([disabled]) {
+  ui-menu-item:not(:defined):hover:not([aria-disabled="true"]):not([disabled]) {
     background: var(--ui-surface-subtle);
   }
 
-  ui-menu-item[aria-disabled="true"],
-  ui-menu-item[disabled] {
+  ui-menu-item:not(:defined)[aria-disabled="true"],
+  ui-menu-item:not(:defined)[disabled] {
     opacity: 0.6;
     cursor: not-allowed;
   }