@ai-ecoverse/slicc-spectrum 1.91.0 → 1.92.0

package/dist/slicc-kernel-model.js

@@ -6,7 +6,7 @@ import {
   DummySettings,
   clock,
   dummySettingsKey
-} from "./chunk-VRFAMBWK.js";
+} from "./chunk-3CM23WFV.js";
 import {
   Emitter
 } from "./chunk-T5NHW4KC.js";

package/dist/slicc-ui.js

@@ -39792,7 +39792,8 @@ var fieldStyles = i`
     font-size: var(--swc-font-size-75);
     color: var(--swc-neutral-subdued-content-color-default);
   }
-  .field input:not([type='checkbox']) {
+  .field input:not([type='checkbox']),
+  .field select {
     box-sizing: border-box;
     inline-size: 100%;
     font: inherit;
@@ -39803,7 +39804,8 @@ var fieldStyles = i`
     background: var(--swc-background-layer-2-color);
     color: inherit;
   }
-  .field input[aria-invalid='true'] {
+  .field input[aria-invalid='true'],
+  .field select[aria-invalid='true'] {
     border-color: var(--swc-negative-border-color-default);
   }
   .field input[type='file'] {
@@ -39820,6 +39822,7 @@ var fieldStyles = i`
     color: inherit;
   }
   .field input:focus-visible,
+  .field select:focus-visible,
   input[type='checkbox']:focus-visible {
     outline: var(--swc-focus-indicator-thickness) solid var(--swc-focus-indicator-color);
     outline-offset: var(--swc-focus-ring-gap);
@@ -43164,7 +43167,7 @@ var SliccSettings = class extends ThemedElement {
     this.problem = { id, field, message };
     void this.updateComplete.then(
       () => this.renderRoot.querySelector(
-        field === "value" ? ".key input[data-field=value]" : `.key input[data-account-field="${field}"]`
+        field === "value" ? ".key input[data-field=value]" : `.key [data-account-field="${field}"]`
       )?.focus()
     );
   }
@@ -43172,12 +43175,10 @@ var SliccSettings = class extends ThemedElement {
     if (!account.fields?.length) return void 0;
     const values = {};
     for (const field of account.fields) {
-      const input = form.querySelector(
-        `input[data-account-field="${field.name}"]`
-      );
+      const input = form.querySelector(`[data-account-field="${field.name}"]`);
       const value = input.value.trim();
       if (value) values[field.name] = value;
-      else if (field.required) {
+      else if (field.required && field.options?.length !== 0) {
         this.#refuse(account.id, field.name, `${field.label} can\u2019t be empty`);
         return null;
       }
@@ -43244,7 +43245,26 @@ var SliccSettings = class extends ThemedElement {
   }
   #extra(account) {
     return (account.fields ?? []).map(
-      (field) => b`<label class="field"><span>${field.label}</span><input
+      (field) => b`<label class="field">
+          <span>${field.label}</span>${this.#control(account, field)}
+        </label>
+        ${this.#problem(account, field.name)}`
+    );
+  }
+  #control(account, field) {
+    if (field.options) {
+      const chosen = field.value ?? field.options[0]?.value;
+      return b`<select
+          data-account-field=${field.name}
+          ?disabled=${!field.options.length}
+          aria-required=${field.required ? "true" : A}
+          aria-invalid=${this.#invalid(account, field.name)}
+          aria-describedby=${this.#described(account, field.name)}
+        >
+          ${field.options.map((option2) => b`<option value=${option2.value} ?selected=${option2.value === chosen}>${option2.label}</option>`)}
+        </select>`;
+    }
+    return b`<input
           type="text"
           autocomplete="off"
           spellcheck="false"
@@ -43252,9 +43272,7 @@ var SliccSettings = class extends ThemedElement {
           aria-required=${field.required ? "true" : A}
           aria-invalid=${this.#invalid(account, field.name)}
           aria-describedby=${this.#described(account, field.name)}
-        /></label>
-        ${this.#problem(account, field.name)}`
-    );
+        />`;
   }
   #unlock(vault) {
     return b`<div class="locked" data-locked>