mnfst 0.5.146 → 0.5.147

package/lib/manifest.css

@@ -1473,123 +1473,169 @@
         color: var(--color-field-inverse, oklch(43.9% 0 0));
         background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
         border-radius: var(--radius, 0.5rem);
-        transition: var(--transition, all .05s ease-in-out);
+        transition: var(--transition);
         cursor: text;
 
-        &:hover {
+        &:hover:has(> :where(input:not([type=hidden]), textarea, button):not([hidden])) {
             background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
         }
 
+        &:not(:has(> :where(input:not([type=hidden]), textarea, button):not([hidden]))) {
+            cursor: default
+        }
+
         &:focus-within {
             background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
             box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark, oklch(43.9% 0 0)) 30%, transparent)
         }
 
-        &.is-disabled {
-            opacity: .6;
-            pointer-events: none
+        &:has(.combobox-chip) {
+            padding-inline: calc(var(--spacing, 0.25rem) * 1.25)
         }
-    }
 
-    /* Inner typing surface — transparent, grows with content */
-    :where(.combobox-editor):not(.unstyle) {
-        flex: 1 1 4rem;
-        width: auto;
-        min-width: 4rem;
-        height: auto;
-        margin: 0;
-        padding: 0;
-        color: inherit;
-        background: transparent;
-        field-sizing: content;
+        &:has(> :where(input, textarea):disabled) {
+            opacity: .5;
+            pointer-events: none
+        }
 
-        &:hover,
-        &:focus-visible {
+        /* Inner typing surface */
+        &> :where(input:not([type=hidden]), textarea) {
+            flex: 1 0 auto;
+            width: auto;
+            min-width: 7rem;
+            height: auto;
+            margin: 0;
+            padding: 0;
+            color: inherit;
             background: transparent;
-            box-shadow: none
+            field-sizing: content;
+
+            &:hover,
+            &:focus-visible {
+                background: transparent;
+                box-shadow: none
+            }
         }
-    }
 
-    /* Textarea editor — vertical auto-grow, full-width line */
-    :where(textarea.combobox-editor):not(.unstyle) {
-        flex-basis: 100%;
-        resize: none
+        &>textarea {
+            resize: none
+        }
     }
 
     /* Chips */
     :where(.combobox-chip):not(.unstyle) {
         display: inline-flex;
         align-items: center;
-        gap: calc(var(--spacing, 0.25rem) * 1.5);
+        gap: var(--spacing, 0.25rem);
         max-width: 100%;
         height: calc(var(--spacing-field-height, 2.25rem) - var(--spacing, 0.25rem) * 2.5);
-        padding-inline: calc(var(--spacing, 0.25rem) * 2);
+        padding-inline-start: calc(var(--spacing, 0.25rem) * 2);
         font-size: 0.875rem;
         color: var(--color-content-stark, oklch(43.9% 0 0));
-        background-color: var(--color-surface-2, var(--color-field-surface-hover));
+        background-color: var(--color-popover-surface, oklch(100% 0 0));
         border-radius: calc(var(--radius, 0.5rem) * 0.7);
-        user-select: none
-    }
-
-    :where(.combobox-chip-label):not(.unstyle) {
         overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap
+        user-select: none;
+
+        /* Label */
+        &>span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap
+        }
+
+        /* Remove button */
+        &>button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 0;
+            height: 100%;
+            aspect-ratio: 1 / 1;
+            padding: 0;
+            font-size: 1em;
+            line-height: 1;
+            color: var(--color-content-neutral, oklch(43.9% 0 0));
+            background: transparent;
+            border-radius: 0;
+            cursor: pointer;
+
+            &:hover {
+                color: var(--color-content-stark, oklch(43.9% 0 0));
+                background: color-mix(in oklch, var(--color-content-stark, oklch(43.9% 0 0)) 12%, transparent)
+            }
+        }
+
+        /* Failed validation */
+        &[aria-invalid="true"] {
+            color: var(--color-negative-inverse, oklch(44.4% 0.177 26.899));
+            background-color: var(--color-negative-surface, oklch(80.8% 0.114 19.571))
+        }
     }
 
-    :where(.combobox-chip-remove):not(.unstyle) {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 1.15em;
-        height: 1.15em;
+    /* Trigger (editor:none button mode) — transparent; the shell is the field.
+       Fills the row like the input editor, with a select-style caret. */
+    :where(.combobox) > button:not(.unstyle) {
+        flex: 1 1 auto;
+        align-self: stretch;
+        min-width: 7rem;
+        justify-content: flex-start;
+        gap: var(--spacing, 0.25rem);
+        height: auto;
+        min-height: calc(var(--spacing-field-height, 2.25rem) - var(--spacing, 0.25rem) * 2.5);
         padding: 0;
-        font-size: 1em;
-        line-height: 1;
-        color: var(--color-content-neutral, oklch(43.9% 0 0));
+        color: inherit;
         background: transparent;
-        border-radius: 50%;
         cursor: pointer;
 
         &:hover {
-            color: var(--color-content-stark, oklch(43.9% 0 0));
-            background: color-mix(in oklch, var(--color-content-stark, oklch(43.9% 0 0)) 12%, transparent)
+            background: transparent
         }
-    }
 
-    /* Invalid chip (failed validation) */
-    :where(.combobox-chip.is-invalid):not(.unstyle) {
-        color: var(--color-red-700, crimson);
-        background-color: color-mix(in oklch, crimson 15%, transparent)
+        /* Caret */
+        &::after {
+            content: '';
+            flex: none;
+            width: 1em;
+            height: 1em;
+            margin-inline-start: auto;
+            background-color: var(--color-content-subtle, oklch(55.6% 0 0));
+            mask: var(--icon-chevron-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E")) center / contain no-repeat
+        }
     }
 
-    /* Trigger (editor:none button mode) — reuses field look */
-    :where(.combobox-trigger):not(.unstyle) {
-        justify-content: space-between;
-        gap: var(--spacing, 0.25rem)
+    /* Button-only field (no chips): the button IS the field — it fills the whole
+       wrapper and carries the padding, so the entire area is the click target. */
+    :where(.combobox):has(> button:not(.unstyle)):not(:has(.combobox-chip)) {
+        padding: 0;
+
+        &>button:not(.unstyle) {
+            min-height: var(--spacing-field-height, 2.25rem);
+            padding: calc(var(--spacing, 0.25rem) * 1.25) var(--spacing-field-padding, 0.625rem)
+        }
     }
 
     /* Listbox — base look comes from menu[popover]; these are combobox-only extras */
-    :where(.combobox-menu):not(.unstyle) {
+    :where(menu[role=listbox]):not(.unstyle) {
 
-        /* Active descendant mirrors hover */
-        & :where(li.is-active) {
+        /* Active descendant (mirrors hover) */
+        & :where([role=option][aria-current="true"]) {
             color: var(--color-field-inverse, oklch(43.9% 0 0));
             background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
         }
 
         /* Filtered out */
-        & :where(li[hidden]) {
+        & :where([role=option][hidden]) {
             display: none
         }
 
         /* Selected (multiple) */
-        & :where(li[aria-selected="true"]) {
+        & :where([role=option][aria-selected="true"]) {
             font-weight: 600
         }
 
         /* "Add …" create row */
-        & :where(li.combobox-create) {
+        & :where(.combobox-create) {
             color: var(--color-content-neutral, oklch(43.9% 0 0))
         }
 
@@ -1606,7 +1652,7 @@
     }
 
     /* Screen-reader-only live region */
-    :where(.combobox-live):not(.unstyle) {
+    :where(.combobox)> :where([role=status]) {
         position: absolute;
         width: 1px;
         height: 1px;

package/lib/manifest.integrity.json

@@ -6,6 +6,7 @@
   "manifest.code.js": "sha384-nP6DncLx/UuJtloyVKMCOXwIBAq32DshTb/Lc0vVRBWX7kSbxiBnY5aEyqqvK8Kg",
   "manifest.color.js": "sha384-6Rv3LxyTcZNjrhtayQfqRdCx0uSZ4BiEbgEI98I62eTvp8Aw7LBIoNJ0Je1oktwL",
   "manifest.colorpicker.js": "sha384-Wqz0ZIbeIi7KarqqqSLsQk+7E/fMaKhb32hrq5/eWzX1yjqMrpPZKH8y+jZ3mfg+",
+  "manifest.combobox.js": "sha384-AEEtOVCcoGgCyKPbZSzKtRhz8G4VbE8BD5LC/urGqzxjMXNP9NrExeWrENXHCLsg",
   "manifest.components.js": "sha384-mzPFoM0vqL9dnTVLMN3OrmO+KCgSqGknM1fd7bM1xzYeCco5OaZi56IMR5RS5oad",
   "manifest.data.js": "sha384-bCYTYyAYNVkg5pSwGcoe07Dgf5B7JDN7GtOIQdS+BtrBStQwvjZtskiQ38Bncvrf",
   "manifest.datepicker.js": "sha384-NEb/H4vuR3CFtRcodHsm3jJjrcYW2JMpDlQKlgwTrzpMMTcDkFKYXzAYJD0gZ7Ov",
@@ -27,5 +28,5 @@
   "manifest.url.parameters.js": "sha384-FIufiClqDx1rJpU/QUc9z/D43qClQ6Qm8rBahipbJl9BDHUvhrOsUDegmTWW7Tuf",
   "manifest.utilities.js": "sha384-HWyVkjQoDRlWFKDBQw4RQOYODkBcU72NHW6l1p4bhQv1RtN0/XtnjwIb+lQK6+zv",
   "manifest.virtual.js": "sha384-J2+MpRskVH39R2DmHUib2bItuGsvSLEhPM+83iznrdfQFMZ63Ea6xwLeCsG04jOl",
-  "manifest.js": "sha384-gt/s7g3VPNs5TkVUIsvS/t+iDfyl3+DUnkKvc/tUY1bxgHnNEsuuEweXW8A9bLBw"
+  "manifest.js": "sha384-IsNGBIHGuUF5ABO58nkkZJQq1Ilt0wIsz+X2qR5hx4cGEhZez7GCmB8rAowJmrHS"
 }

package/lib/manifest.js

@@ -235,6 +235,7 @@
 		'toasts',
 		'tooltips',
 		'dropdowns',
+		'combobox',
 		'tabs',
 		'slides',
 		'resize',