fix(ui): render Select arrow independently of icon CSS

bun.lock

@@ -688,7 +688,7 @@
     },
     "packages/ui": {
       "name": "@wrnexus/ui",
-      "version": "0.8.60",
+      "version": "0.8.61",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },

packages/ui/components/select.wrn

@@ -57,7 +57,7 @@ size: string = "default"
           {#if !multiple}<option value="" selected="{value === ''}" disabled="{required}">{placeholder}</option>{/if}
           {#each options as option}<option value="{option.value}" selected="{selected(option)}" disabled="{option.disabled}">{option.label}</option>{/each}
         </select>
-        {#if !multiple}<span class="icon-[lucide--chevron-down] wrn-next__select-indicator" aria-hidden="true"></span>{/if}
+        {#if !multiple}<svg class="wrn-next__select-indicator" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"></path></svg>{/if}
         {#if variant === "floating"}<span class="wrn-next__field-floating-label">{label}</span>{/if}
       </div>
       {#if helperText}<small class="wrn-next__field-help">{helperText}</small>{/if}
@@ -79,7 +79,11 @@ size: string = "default"
 
     .wrn-next__select-indicator {
       position: absolute;
-      right: 0.85rem;
+      inset-inline-end: 0.85rem;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 1rem;
+      height: 1rem;
       color: var(--wrn-color-muted);
       pointer-events: none;
     }

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.8.60",
+  "version": "0.8.61",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/ui/test/ui.test.ts

@@ -1372,6 +1372,26 @@ test("basic fields suppress native popups and render package constraint messages
   expect(selectSource).toContain("wrn-next__select-indicator");
 });
 
+test("Select renders its own directional indicator without app icon CSS", async () => {
+  const source = readFileSync(uiComponentPath("Select"), "utf8");
+  const dom = mountHtml(
+    await renderComponent(source, {
+      name: "method",
+      value: "totp",
+      options: [{ label: "Authenticator app", value: "totp" }],
+    }),
+  );
+  const indicator = dom.querySelector("svg.wrn-next__select-indicator");
+  expect(indicator?.getAttribute("width")).toBe("16");
+  expect(indicator?.getAttribute("height")).toBe("16");
+  expect(indicator?.getAttribute("aria-hidden")).toBe("true");
+  expect(indicator?.querySelector("path")?.getAttribute("d")).toBe("m6 9 6 6 6-6");
+  expect(source).toContain("inset-inline-end: 0.85rem");
+  expect(source).not.toContain("icon-[lucide--chevron-down]");
+  const multiple = mountHtml(await renderComponent(source, { multiple: true }));
+  expect(multiple.querySelector(".wrn-next__select-indicator")).toBeNull();
+});
+
 test("OTP inputs accept six digits and show custom inline errors without native popups", async () => {
   const source = readFileSync(uiComponentPath("Input"), "utf8");
   const dom = mountHtml(