@threadlabs/looma 0.28.13 → 0.28.14

package/components/ui-affordance-scope/ui-affordance-scope.html

@@ -14,7 +14,7 @@
       --ui-affordance-scope-guide: 1;
     }
 
-    :host-state([engaged]) {
+    :host(:state(engaged)) {
       --ui-affordance-scope-engaged: 1;
     }
 

package/components/ui-avatar/ui-avatar.html

@@ -93,7 +93,7 @@
       letter-spacing: 0.02em;
     }
 
-    :host-state([hasImage]) {
+    :host(:state(hasImage)) {
       border-color: var(--ui-avatar-border, var(--ui-border-strong));
     }
 

package/components/ui-combobox/ui-combobox.html

@@ -761,7 +761,7 @@
     .field:has(input:disabled) {
       background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
     }
-    :host-state([validationStatus="error"]) .field,
+    :host(:state(validationStatus=error)) .field,
     :host([invalid]) .field {
       border-color: var(--_ui-combobox-invalid-border, var(--ui-field-danger, var(--ui-danger-solid, var(--ui-accent-active))));
     }

package/components/ui-disclosure/ui-disclosure.html

@@ -145,7 +145,7 @@
     .indicator {
       transition: transform var(--ui-motion-feedback) var(--ui-motion-feedback-ease);
     }
-    :host-state([internalOpen]) .indicator {
+    :host(:state(internalOpen)) .indicator {
       transform: rotate(180deg);
     }
 
@@ -169,10 +169,10 @@
       padding-inline: var(--ui-space-3);
     }
 
-    :host-state([internalOpen]) .panel {
+    :host(:state(internalOpen)) .panel {
       grid-template-rows: 1fr;
     }
-    :host-state([internalOpen]) .panel-inner {
+    :host(:state(internalOpen)) .panel-inner {
       padding-block: 0 var(--ui-space-3);
     }
 
@@ -187,7 +187,7 @@
       border-block-end: 0;
       border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
-    :host([fill]):host-state([internalOpen]) {
+    :host([fill]:state(internalOpen)) {
       flex-grow: 1;
     }
     :host([fill]) .heading {

package/components/ui-editable/ui-editable.html

@@ -137,10 +137,10 @@
       background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
     }
 
-    :host-state([internalEdit]) .preview {
+    :host(:state(internalEdit)) .preview {
       visibility: hidden;
     }
-    :host-state([internalEdit]) .input {
+    :host(:state(internalEdit)) .input {
       visibility: visible;
     }
 
@@ -148,7 +148,7 @@
       display: none;
       gap: var(--ui-space-1);
     }
-    :host-state([internalEdit]) .actions {
+    :host(:state(internalEdit)) .actions {
       display: inline-flex;
     }
 

package/components/ui-menu/ui-menu.html

@@ -132,7 +132,7 @@
       border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
-    :host:not(:host-state([internalOpen])):not(:host([inline])) {
+    :host(:not(:state(internalOpen))):not(:host([inline])) {
       display: none;
     }
 

package/components/ui-popover/ui-popover.html

@@ -93,7 +93,7 @@
       box-shadow: var(--_ui-popover-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }
 
-    :host:not(:host-state([internalOpen])) {
+    :host(:not(:state(internalOpen))) {
       display: none;
     }
 

package/components/ui-sidebar/ui-sidebar.html

@@ -116,17 +116,17 @@
     }
 
     /* Collapsed while docked. */
-    :host-state([internalCollapsed]):not([popover]) {
+    :host(:state(internalCollapsed)):not([popover]) {
       inline-size: var(--ui-sidebar-collapsed-width, 0px);
       visibility: hidden;
     }
-    :host-state([resizing]) {
+    :host(:state(resizing)) {
       transition: none;
     }
-    :host-state([internalCollapsed]):not([popover]) .content {
+    :host(:state(internalCollapsed)):not([popover]) .content {
       transform: translateX(-100%);
     }
-    :host([side="end"]):host-state([internalCollapsed]):not([popover]) .content {
+    :host([side="end"]:state(internalCollapsed)):not([popover]) .content {
       transform: translateX(100%);
     }
 

package/components/ui-switcher/ui-switcher.html

@@ -45,7 +45,7 @@
       flex-basis: calc((var(--_ui-switcher-threshold, 30rem) - 100%) * 999);
     }
 
-    :host-state([overLimit]) > :slotted(*) {
+    :host(:state(overLimit)) > :slotted(*) {
       flex-basis: 100%;
     }
 

package/components/ui-tree-item/ui-tree-item.html

@@ -567,7 +567,7 @@
       opacity: 1;
     }
 
-    :host-state([isContainer]) > .row > .drag-handle {
+    :host(:state(isContainer)) > .row > .drag-handle {
       inset-inline-start: calc(-1 * var(--_tree-disclosure-size) - 2px);
     }
 
@@ -635,7 +635,7 @@
     }
 
     html[data-ui-input-modality="touch"] :host .drag-handle,
-    html[data-ui-input-modality="touch"] :host-state([isContainer]) > .row > .drag-handle {
+    html[data-ui-input-modality="touch"] :host(:state(isContainer)) > .row > .drag-handle {
       position: relative;
       grid-column: 1;
       grid-row: 1;