feat(ui): Select primitive; restyle ProfileSelector on tokens

- New Select primitive in @trails-cool/ui: token-styled native <select>
  (appearance-none + overlaid chevron for a consistent closed control),
  sm/md sizes, sibling of Input. Unit-tested + added to /dev/ui.
- ProfileSelector uses Select (size sm) with token label; the profile
  label now hides on small screens. Completes the topbar's migration
  onto the design system.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

apps/planner/app/components/ProfileSelector.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState, useCallback } from "react";
 import { useTranslation } from "react-i18next";
+import { Select } from "@trails-cool/ui";
 import type { YjsState } from "~/lib/use-yjs";
 import { DEFAULT_PROFILE, getProfile, setProfile as setYjsProfile } from "~/lib/route-data";
 
@@ -34,21 +35,21 @@ export function ProfileSelector({ yjs }: ProfileSelectorProps) {
 
   return (
     <div className="flex items-center gap-2">
-      <label htmlFor="profile" className="text-sm text-gray-600">
+      <label htmlFor="profile" className="hidden text-sm text-text-md sm:block">
         {t("profile")}:
       </label>
-      <select
+      <Select
         id="profile"
+        size="sm"
         value={profile}
         onChange={handleChange}
-        className="rounded border border-gray-300 bg-white px-2 py-1 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
       >
         {PROFILE_IDS.map((id) => (
           <option key={id} value={id}>
             {t(`profiles.${id}`)}
           </option>
         ))}
-      </select>
+      </Select>
     </div>
   );
 }

apps/planner/app/routes/dev.ui.tsx

@@ -6,6 +6,7 @@ import {
   Card,
   IconButton,
   Input,
+  Select,
   SegmentedControl,
 } from "@trails-cool/ui";
 import { Topbar } from "~/components/Topbar";
@@ -123,6 +124,19 @@ export default function DevUi() {
         </div>
       </Section>
 
+      <Section title="Select">
+        <Select defaultValue="fastbike" size="sm" aria-label="Profile (sm)">
+          <option value="fastbike">Radfahren (schnell)</option>
+          <option value="trekking">Trekking</option>
+          <option value="car">Auto</option>
+        </Select>
+        <Select defaultValue="trekking" aria-label="Profile (md)">
+          <option value="fastbike">Radfahren (schnell)</option>
+          <option value="trekking">Trekking</option>
+          <option value="car">Auto</option>
+        </Select>
+      </Section>
+
       <Section title="IconButton">
         <IconButton label="Undo">
           <UndoIcon />