@ttdk-design-system/library-react 0.0.0-stage → 1.0.1

package/src/web/dropdown/AI_GUIDE.md

@@ -0,0 +1,167 @@
+# <Dropdown /> — TTDK Component Reference
+
+Komponen Dropdown Menu TTDK sesuai spesifikasi Desain: - Selaras UI & Props dengan Selectbox: Label, Helper/Error text, Search bar, Floating popover - Mode Single Select / Menu Actions dengan Active Teal Checkmark (#00A3A6) - Mode Multi-Select dengan Checkbox list, Chip tags (Label ✕), dan Action footer (Reset & Terapkan) - Varian trigger fleksibel: 'select' (standar form), 'action' / 'primary' (tombol aksi), 'outline', 'ghost' - Dukungan Trigger Kustom melalui Slot / Children (misal: tombol kustom) - Dukungan item kaya: Icon, Deskripsi, Divider pemisah seksi, dan Danger item
+
+## 1. Stylesheets & Theming (Pure CSS)
+Import the corresponding stylesheet for the theme you wish to use:
+- **COMMON Theme**: `import "@ttdk-design-system/library-<react|vue|svelte>/web/dropdown/dropdown.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Dropdown from "@ttdk-design-system/library-react/web/dropdown";
+
+// Vue 3
+import Dropdown from "@ttdk-design-system/library-vue/web/dropdown";
+
+// Svelte
+import Dropdown from "@ttdk-design-system/library-svelte/web/dropdown";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label?` | `string` | `-` | Teks label judul field yang ditampilkan di atas dropdown (14px Semibold, #141313). |
+| `optional?` | `boolean` | `false` | Menandai field sebagai opsi opsional dengan menambahkan teks '(Opsional)' (12px Regular, #9698A2). |
+| `optionalText?` | `string` | `(Opsional)` | Kustomisasi teks keterangan opsional. |
+| `placeholder?` | `string` | `Pilih dropdown menu` | Teks petunjuk saat belum ada opsi yang dipilih. |
+| `value?` | `any` | `-` | Nilai terpilih saat ini (single string/number atau array nilai untuk mode multiple). |
+| `defaultValue?` | `any` | `-` | Nilai awal tidak terkontrol (uncontrolled initial value). |
+| `options?` | `Array<DropdownOption | string>` | `-` | Daftar pilihan opsi dropdown menu. Dapat berupa array of object `{ label, value }` atau array of string. |
+| `multiple?` | `boolean` | `false` | Mode pemilihan jamak (multi-select) dengan tampilan chips/tag dan daftar checkbox. |
+| `searchable?` | `boolean` | `false` | Mengaktifkan kotak pencarian (search input) di dalam menu dropdown. |
+| `searchPlaceholder?` | `string` | `Cari` | Placeholder pada kotak pencarian di dalam dropdown. |
+| `applyText?` | `string` | `Terapkan` | Teks tombol terapkan pada footer multi-select. |
+| `resetText?` | `string` | `Reset` | Teks tombol reset pada footer multi-select. |
+| `name?` | `string` | `-` | Nama form field HTML. |
+| `id?` | `string` | `-` | Identifier unik elemen dropdown. |
+| `error?` | `boolean` | `false` | Status apakah dropdown sedang dalam kondisi error / tidak valid. |
+| `errorMessage?` | `string` | `-` | Pesan teks penjelasan kesalahan validasi di bawah field. |
+| `helperText?` | `string` | `-` | Teks petunjuk atau keterangan bantuan di bawah field (12px Regular, #3C4245). |
+| `helperTextPosition?` | `'top' | 'bottom'` | `-` | Posisi teks helper |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Skala ukuran dropdown. - `'sm'`: 36px - `'md'`: 48px (standar desain) - `'lg'`: 56px |
+| `rounded?` | `'none' | 'sm' | 'md' | 'lg' | 'full'` | `md` | Bentuk sudut kelengkungan dropdown. - `'none'`: 0px - `'sm'`: 4px - `'md'`: 8px (standar desain) - `'lg'`: 12px - `'full'`: 9999px (kapsul) |
+| `placement?` | `| 'bottom-start'
+  | 'bottom-end'
+  | 'bottom'
+  | 'top-start'
+  | 'top-end'
+  | 'top'` | `bottom-start` | Posisi penempatan panel menu dropdown popover terhadap elemen trigger. |
+| `arrow?` | `boolean` | `true` | Menampilkan panah chevron indikator buka/tutup pada trigger. |
+| `icon?` | `any` | `-` | Ikon kustom di awal teks trigger (leading icon). |
+| `closeOnSelect?` | `boolean` | `true` | Otomatis menutup menu popover setelah pengguna memilih opsi (pada single select). |
+| `block?` | `boolean` | `false` | Menjadikan lebar field dropdown memenuhi kontainer penuh (full-width 100%). |
+| `disabled?` | `boolean` | `false` | Status apakah dropdown dinonaktifkan (disabled). |
+| `required?` | `boolean` | `false` | Menandai field sebagai input wajib diisi (menampilkan tanda bintang merah *). |
+| `inputRef?` | `any` | `-` | Ref instance elemen control dropdown untuk akses DOM langsung. |
+| `clearable?` | `boolean` | `false` | Menampilkan tombol × untuk menghapus pilihan yang sudah dipilih. |
+| `loading?` | `boolean` | `false` | Menampilkan spinner loading dan menonaktifkan interaksi dropdown. |
+| `readOnly?` | `boolean` | `false` | Menjadikan dropdown hanya-baca (tidak bisa dibuka/diubah). |
+| `ui?` | `DropdownUiProps` | `-` | Kustomisasi visual granular wrapper utama (UiProps). |
+| `style?` | `any` | `-` | Style inline native untuk wrapper luar. |
+| `labelStyle?` | `UiProps` | `-` | Style kustom untuk elemen label (UiProps). |
+| `labelClass?` | `string` | `-` | Class CSS kustom untuk elemen label (Tailwind / class kustom). |
+| `controlStyle?` | `UiProps` | `-` | Style kustom untuk elemen kotak pemicu (control trigger) (UiProps). |
+| `controlClass?` | `string` | `-` | Class CSS kustom untuk elemen kotak pemicu (control trigger) (Tailwind / class kustom). |
+| `listStyle?` | `UiProps` | `-` | Style kustom untuk panel popover / menu list opsi (UiProps). |
+| `listClass?` | `string` | `-` | Class CSS kustom untuk panel popover / menu list opsi (Tailwind / class kustom). |
+| `errorMessageStyle?` | `UiProps` | `-` | Style kustom untuk pesan teks error validasi (UiProps). |
+| `errorMessageClass?` | `string` | `-` | Class CSS kustom untuk pesan teks error validasi (Tailwind / class kustom). |
+| `helperTextStyle?` | `UiProps` | `-` | Style kustom untuk teks petunjuk bantuan (UiProps). |
+| `helperTextClass?` | `string` | `-` | Class CSS kustom untuk teks petunjuk bantuan (Tailwind / class kustom). |
+| `onChange?` | `(value: any) => void` | `-` | Callback event saat nilai pilihan berubah. |
+| `onSelect?` | `(option: DropdownOption) => void` | `-` | Callback event saat sebuah opsi dipilih dari menu. |
+| `onSearch?` | `(query: string) => void` | `-` | Callback event saat pengguna mengetik di kolom pencarian. |
+| `onOpen?` | `() => void` | `-` | Callback event saat menu dropdown terbuka. |
+| `onClose?` | `() => void` | `-` | Callback event saat menu dropdown ditutup. |
+| `disableShift?` | `boolean` | `false` | Menonaktifkan middleware `shift` pada floating-ui sehingga posisi list popover tidak bergeser secara horizontal mengikuti tepi layar. Berguna saat ingin list tetap berada di tengah atau posisi placement yang ditentukan. |
+| `className?` | `string` | `-` | Class CSS kustom wrapper luar. |
+| `children?` | `any` | `-` | Elemen pemicu (trigger) kustom, tombol, ikon, atau komponen anak lainnya. |
+| `panelContent?` | `any` | `-` | Konten kustom yang ditampilkan di dalam panel popover menggantikan list opsi standar. Berguna untuk menampilkan komponen seperti Calendar, Color Picker, dsb. di dalam Dropdown. Ketika prop ini di-set, `options` tidak akan dirender. Menerima ReactNode atau render function `({ close }) => ReactNode`. |
+| `displayValue?` | `string` | `-` | Label atau teks kustom untuk ditampilkan pada trigger dropdown. Sangat berguna saat menggunakan `panelContent` seperti Date Picker di mana nilai trigger diformat secara kustom. |
+
+### Sub-interface: `DropdownOption`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | `-` | Teks label tampilan pilihan dropdown menu. |
+| `value` | `string | number` | `-` | Nilai unik (value) dari item dropdown. |
+| `disabled?` | `boolean` | `false` | Status apakah opsi ini dinonaktifkan dari pemilihan. |
+| `icon?` | `any` | `-` | Ikon kustom di samping label item pilihan. |
+| `description?` | `string` | `-` | Deskripsi atau teks bantuan kecil di bawah label item pilihan. |
+| `danger?` | `boolean` | `false` | Menandai item sebagai aksi berbahaya/destruktif (misal: "Hapus"), ditampilkan dengan warna aksen merah. |
+| `divider?` | `boolean` | `false` | Menampilkan garis pemisah horizontal (divider) di atas item ini. |
+| `onClick?` | `(option?: DropdownOption) => void` | `-` | Callback event saat item ini diklik. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import Dropdown from "@ttdk-design-system/library-react/web/dropdown";
+import "@ttdk-design-system/library-react/web/dropdown/dropdown.css";
+
+export function Example() {
+  const options = [
+    { label: "Unduh Rekap FHIR (JSON)", value: "json" },
+    { label: "Ekspor Laporan (CSV)", value: "csv" },
+    { label: "Kirim ke SATUSEHAT", value: "sync" },
+    { label: "Hapus Data Pasien", value: "delete", danger: true, divider: true }
+  ];
+
+  return (
+    <Dropdown
+      label="Aksi Tindakan"
+      placeholder="Pilih tindakan klinis..."
+      options={options}
+      onChange={(val) => console.log("Aksi terpilih:", val)}
+    />
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Dropdown from "@ttdk-design-system/library-vue/web/dropdown";
+import "@ttdk-design-system/library-vue/web/dropdown/dropdown.css";
+
+const options = [
+  { label: "Unduh Rekap FHIR (JSON)", value: "json" },
+  { label: "Ekspor Laporan (CSV)", value: "csv" },
+  { label: "Kirim ke SATUSEHAT", value: "sync" },
+  { label: "Hapus Data Pasien", value: "delete", danger: true, divider: true }
+];
+</script>
+
+<template>
+  <Dropdown
+    label="Aksi Tindakan"
+    placeholder="Pilih tindakan klinis..."
+    :options="options"
+    @change="(val: any) => console.log('Aksi terpilih:', val)"
+  />
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Dropdown from "@ttdk-design-system/library-svelte/web/dropdown";
+  import "@ttdk-design-system/library-svelte/web/dropdown/dropdown.css";
+
+  const options = [
+    { label: "Unduh Rekap FHIR (JSON)", value: "json" },
+    { label: "Ekspor Laporan (CSV)", value: "csv" },
+    { label: "Kirim ke SATUSEHAT", value: "sync" },
+    { label: "Hapus Data Pasien", value: "delete", danger: true, divider: true }
+  ];
+</script>
+
+<Dropdown
+  label="Aksi Tindakan"
+  placeholder="Pilih tindakan klinis..."
+  {options}
+  on:change={(e) => console.log('Aksi terpilih:', e.detail)}
+/>
+```

package/src/web/dropdown/dropdown.css

@@ -0,0 +1 @@
+.ttdk-dropdown-wrapper{gap:var(--ttdk-spacing-xxs);box-sizing:border-box;width:100%;font-family:var(--ttdk-font-sans);flex-direction:column;display:flex;position:relative}.ttdk-dropdown-wrapper:has([data-open=true]),.ttdk-dropdown-wrapper:has(.ttdk-dropdown-menu){z-index:50}.ttdk-dropdown-wrapper[data-block=true]{width:100%}.ttdk-dropdown-label{color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary));align-items:center;gap:var(--ttdk-spacing-xxs);user-select:none;font-size:14px;font-weight:600;line-height:20px;display:flex}.dark .ttdk-dropdown-label{color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary))}.ttdk-dropdown-required{color:var(--ttdk-stroke-status-error);font-weight:700}.ttdk-dropdown-optional{color:var(--ttdk-text-icon-disabled);font-size:12px;font-weight:400}.dark .ttdk-dropdown-optional{color:var(--ttdk-text-icon-disabled)}.ttdk-dropdown-control{background:var(--ttdk-bg-base-primary);border:1px solid var(--ttdk-stroke-subtle);border-radius:var(--ttdk-radius-input-lg);box-sizing:border-box;cursor:pointer;user-select:none;width:100%;height:auto;min-height:48px;font-family:var(--ttdk-font-sans);color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary));justify-content:space-between;align-items:center;gap:var(--ttdk-spacing-xs);outline:none;padding:6px 12px;transition:border-color .15s,box-shadow .15s,background-color .15s,transform .1s;display:flex;position:relative}.dark .ttdk-dropdown-control{background:var(--ttdk-bg-base-primary);border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary))}.ttdk-dropdown-control[data-custom-trigger=true]{height:auto;min-height:auto;box-shadow:none;border-radius:var(--ttdk-radius-none);background:0 0;border:none;width:fit-content;padding:0;display:inline-flex}.ttdk-dropdown-control[data-size=sm]:not([data-custom-trigger=true]){height:auto;min-height:36px;font-size:var(--ttdk-font-size-12);padding:3px 10px}.ttdk-dropdown-control[data-size=md]:not([data-custom-trigger=true]){height:auto;min-height:48px;font-size:var(--ttdk-font-size-14);padding:6px 12px}.ttdk-dropdown-control[data-size=lg]:not([data-custom-trigger=true]){height:auto;min-height:56px;font-size:var(--ttdk-font-size-16);padding:8px 14px}.ttdk-dropdown-control[data-rounded=none]{border-radius:var(--ttdk-radius-input-none)}.ttdk-dropdown-control[data-rounded=xs]{border-radius:var(--ttdk-radius-input-xs)}.ttdk-dropdown-control[data-rounded=sm]{border-radius:var(--ttdk-radius-input-sm)}.ttdk-dropdown-control[data-rounded=md]{border-radius:var(--ttdk-radius-input-md)}.ttdk-dropdown-control[data-rounded=lg]{border-radius:var(--ttdk-radius-input-lg)}.ttdk-dropdown-control[data-rounded=xl]{border-radius:var(--ttdk-radius-input-xl)}.ttdk-dropdown-control[data-rounded=full]{border-radius:var(--ttdk-radius-input-full)}.ttdk-dropdown-control:focus-visible,.ttdk-dropdown-control[data-open=true]{border-color:var(--ttdk-stroke-border-focus);box-shadow:0 0 0 3px color-mix(in srgb, var(--ttdk-stroke-border-focus) 15%, transparent)}.dark .ttdk-dropdown-control:focus-visible,.dark .ttdk-dropdown-control[data-open=true]{border-color:var(--ttdk-stroke-border-focus);box-shadow:0 0 0 3px color-mix(in srgb, var(--ttdk-stroke-border-focus) 25%, transparent)}.ttdk-dropdown-control[data-filled=true]:not([data-open=true]):not([data-error=true]){border-color:var(--ttdk-stroke-strong)}.ttdk-dropdown-control[data-error=true]{border-color:var(--ttdk-stroke-status-error)!important}.ttdk-dropdown-control[data-error=true]:focus-visible,.ttdk-dropdown-control[data-error=true][data-open=true]{box-shadow:0 0 0 3px color-mix(in srgb, var(--ttdk-stroke-status-error) 15%, transparent)}.dark .ttdk-dropdown-control[data-error=true]{border-color:var(--ttdk-stroke-status-error)!important}.ttdk-dropdown-wrapper[data-error=true] .ttdk-dropdown-label,.ttdk-dropdown-wrapper[data-error=true] .ttdk-form-label,.ttdk-form-item[data-error=true] .ttdk-dropdown-label,.ttdk-form-item[data-error=true] .ttdk-form-label,.dark .ttdk-dropdown-wrapper[data-error=true] .ttdk-dropdown-label,.dark .ttdk-dropdown-wrapper[data-error=true] .ttdk-form-label,.dark .ttdk-form-item[data-error=true] .ttdk-dropdown-label,.dark .ttdk-form-item[data-error=true] .ttdk-form-label{color:var(--ttdk-text-icon-status-error)!important}.ttdk-dropdown-control[data-disabled=true]{background:var(--ttdk-bg-secondary-disabled)!important;border-color:var(--ttdk-stroke-subtle)!important;color:var(--ttdk-text-icon-disabled)!important;cursor:not-allowed!important;box-shadow:none!important}.dark .ttdk-dropdown-control[data-disabled=true]{background:var(--ttdk-bg-secondary-disabled)!important;border-color:var(--ttdk-stroke-subtle)!important;color:var(--ttdk-text-icon-disabled)!important}.ttdk-dropdown-display{flex-wrap:wrap;flex:1;align-items:center;gap:6px;min-width:0;padding:2px 0;display:flex}.ttdk-dropdown-leading-icon{flex-shrink:0;justify-content:center;align-items:center;margin-right:2px;display:inline-flex}.ttdk-dropdown-value{color:inherit;white-space:nowrap;text-overflow:ellipsis;font-size:14px;line-height:20px;overflow:hidden}.dark .ttdk-dropdown-value{color:inherit}.ttdk-dropdown-placeholder{color:var(--ttdk-text-icon-disabled);white-space:nowrap;text-overflow:ellipsis;font-size:14px;line-height:20px;overflow:hidden}.dark .ttdk-dropdown-placeholder{color:var(--ttdk-text-icon-disabled)}.ttdk-dropdown-chips{flex-wrap:wrap;align-items:center;gap:6px;width:100%;display:flex}.ttdk-dropdown-chip{align-items:center;gap:var(--ttdk-spacing-xxs);background:var(--ttdk-bg-secondary-disabled);border:1px solid var(--ttdk-stroke-subtle);border-radius:var(--ttdk-radius-full);font-family:var(--ttdk-font-sans);color:var(--ttdk-text-icon-primary);box-sizing:border-box;padding:2px 8px;font-size:12px;font-weight:500;line-height:16px;display:inline-flex}.ttdk-dropdown-chip-text{white-space:nowrap;text-overflow:ellipsis;max-width:200px;overflow:hidden}.dark .ttdk-dropdown-chip{background:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-primary)}.ttdk-dropdown-chip-remove{border-radius:var(--ttdk-radius-full);width:16px;height:16px;color:var(--ttdk-text-icon-secondary);cursor:pointer;background:0 0;border:none;outline:none;flex-shrink:0;justify-content:center;align-items:center;margin:0 -2px 0 2px;padding:0;transition:all .15s;display:inline-flex}.ttdk-dropdown-chip-remove:hover{background:color-mix(in srgb, var(--ttdk-text-icon-primary) 8%, transparent);color:var(--ttdk-text-icon-status-error)}.dark .ttdk-dropdown-chip-remove{color:var(--ttdk-text-icon-secondary)}.dark .ttdk-dropdown-chip-remove:hover{background:color-mix(in srgb, var(--ttdk-text-icon-primary) 12%, transparent);color:var(--ttdk-text-icon-status-error)}.ttdk-dropdown-clear{background:var(--ttdk-bg-secondary-disabled);border:1px solid var(--ttdk-stroke-subtle);border-radius:var(--ttdk-radius-full);width:20px;height:20px;color:var(--ttdk-text-icon-secondary);cursor:pointer;outline:none;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;transition:all .15s;display:inline-flex}.ttdk-dropdown-clear:hover{background:var(--ttdk-stroke-subtle);border-color:var(--ttdk-stroke-strong);color:var(--ttdk-text-icon-primary);transform:scale(1.05)}.ttdk-dropdown-clear:active{background:var(--ttdk-stroke-strong);transform:scale(.95)}.ttdk-dropdown-clear:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, var(--ttdk-stroke-border-focus) 40%, transparent)}.dark .ttdk-dropdown-clear{background:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-secondary)}.dark .ttdk-dropdown-clear:hover{background:var(--ttdk-stroke-subtle);border-color:var(--ttdk-stroke-strong);color:var(--ttdk-text-icon-primary)}.ttdk-dropdown-chip-remove-icon,.ttdk-dropdown-clear-icon,.ttdk-dropdown-spinner-icon,.ttdk-dropdown-arrow-icon,.ttdk-dropdown-search-svg,.ttdk-dropdown-checkbox-icon,.ttdk-dropdown-check-svg,.ttdk-dropdown-btn-reset-icon,.ttdk-dropdown-btn-apply-icon{stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.ttdk-dropdown-chip-remove-icon,.ttdk-dropdown-clear-icon{stroke-width:2.5px;width:12px;height:12px}.ttdk-dropdown-arrow-icon{stroke-width:2px;width:18px;height:18px;transition:transform .2s}.ttdk-dropdown-search-svg{stroke-width:2px;width:16px;height:16px}.ttdk-dropdown-checkbox-icon{stroke-width:3px;width:12px;height:12px}.ttdk-dropdown-check-svg{stroke-width:2.5px;width:16px;height:16px}.ttdk-dropdown-btn-reset-icon{stroke-width:2px;width:14px;height:14px}.ttdk-dropdown-btn-apply-icon{stroke-width:2.5px;width:14px;height:14px}.ttdk-dropdown-spinner{color:var(--ttdk-text-icon-disabled);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ttdk-dropdown-spinner-icon{stroke-width:2.2px;width:20px;height:20px;animation:1.2s steps(12,end) infinite ttdk-dropdown-spin}.ttdk-dropdown-control[data-size=sm] .ttdk-dropdown-spinner,.ttdk-dropdown-control[data-size=sm] .ttdk-dropdown-spinner-icon{width:16px;height:16px}.ttdk-dropdown-control[data-size=md] .ttdk-dropdown-spinner,.ttdk-dropdown-control[data-size=md] .ttdk-dropdown-spinner-icon{width:20px;height:20px}.ttdk-dropdown-control[data-size=lg] .ttdk-dropdown-spinner,.ttdk-dropdown-control[data-size=lg] .ttdk-dropdown-spinner-icon{width:24px;height:24px}@keyframes ttdk-dropdown-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ttdk-dropdown-arrow{color:var(--ttdk-text-icon-disabled);flex-shrink:0;justify-content:center;align-items:center;transition:transform .2s,color .15s;display:inline-flex}.ttdk-dropdown-arrow[data-open=true]{color:var(--ttdk-stroke-border-focus);transform:rotate(180deg)}.ttdk-dropdown-menu{background:var(--ttdk-bg-base-primary);border:1px solid var(--ttdk-stroke-subtle);border-radius:var(--ttdk-radius-input-lg);width:max-content;min-width:100%;max-width:calc(100vw - 32px);box-shadow:var(--ttdk-shadow-md);box-sizing:border-box;font-family:var(--ttdk-font-sans);color:var(--ttdk-text-icon-primary);z-index:999;flex-direction:column;animation:.15s ease-out ttdk-dropdown-in;display:flex;position:absolute;top:0;left:0;overflow:hidden}@media screen and (width<=600px){.ttdk-dropdown-menu{max-width:calc(100vw - 24px)}}.ttdk-dropdown-menu[data-placement^=top]{transform-origin:bottom}.ttdk-dropdown-menu[data-placement^=bottom]{transform-origin:top}.dark .ttdk-dropdown-menu{background:var(--ttdk-bg-base-primary);border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-primary);box-shadow:var(--ttdk-shadow-md)}@keyframes ttdk-dropdown-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ttdk-dropdown-search{border-bottom:1px solid var(--ttdk-stroke-subtle);background:var(--ttdk-bg-base-primary);align-items:center;gap:var(--ttdk-spacing-xs);flex-shrink:0;padding:10px 12px;display:flex}.dark .ttdk-dropdown-search{background:var(--ttdk-bg-base-primary);border-bottom-color:var(--ttdk-stroke-subtle)}.ttdk-dropdown-search-input{color:var(--ttdk-text-icon-primary);font-size:14px;font-family:var(--ttdk-font-sans);background:0 0;border:none;outline:none;flex:1}.dark .ttdk-dropdown-search-input{color:var(--ttdk-text-icon-primary)}.ttdk-dropdown-search-input::placeholder{color:var(--ttdk-text-icon-disabled)}.ttdk-dropdown-search-icon{color:var(--ttdk-text-icon-disabled);align-items:center;display:inline-flex}.ttdk-dropdown-options-list{scrollbar-width:thin;flex:auto;min-height:0;max-height:280px;padding:6px;overflow-y:auto}.ttdk-dropdown-options-list::-webkit-scrollbar{width:4px}.ttdk-dropdown-options-list::-webkit-scrollbar-thumb{background:var(--ttdk-stroke-subtle);border-radius:var(--ttdk-radius-input-sm)}.dark .ttdk-dropdown-options-list::-webkit-scrollbar-thumb{background:var(--ttdk-stroke-subtle)}.ttdk-dropdown-divider{background:var(--ttdk-stroke-divider);height:1px;margin:6px 4px}.dark .ttdk-dropdown-divider{background:var(--ttdk-stroke-divider)}.ttdk-dropdown-option{border-radius:var(--ttdk-radius-input-md);font-size:14px;font-family:var(--ttdk-font-sans);color:inherit;cursor:pointer;user-select:none;justify-content:space-between;align-items:flex-start;gap:10px;padding:8px 12px;transition:background-color .12s,color .12s;display:flex}.dark .ttdk-dropdown-option{color:inherit}.ttdk-dropdown-option:hover:not([data-disabled=true]){background:var(--ttdk-brand-subtle);color:var(--ttdk-brand-default)}.ttdk-dropdown-option:hover:not([data-disabled=true]) .ttdk-dropdown-option-label{color:inherit}.ttdk-dropdown-option:hover:not([data-disabled=true]) .ttdk-dropdown-option-desc{color:var(--ttdk-brand-strong)}.dark .ttdk-dropdown-option:hover:not([data-disabled=true]){background:color-mix(in srgb, var(--ttdk-brand-default) 15%, transparent);color:var(--ttdk-stroke-border-focus)}.dark .ttdk-dropdown-option:hover:not([data-disabled=true]) .ttdk-dropdown-option-label{color:inherit}.dark .ttdk-dropdown-option:hover:not([data-disabled=true]) .ttdk-dropdown-option-desc{color:var(--ttdk-brand-subtle)}.ttdk-dropdown-option[data-selected=true]{background:var(--ttdk-brand-subtle);color:var(--ttdk-brand-default)}.ttdk-dropdown-option[data-selected=true] .ttdk-dropdown-option-label{color:inherit;font-weight:600}.dark .ttdk-dropdown-option[data-selected=true]{background:color-mix(in srgb, var(--ttdk-brand-default) 15%, transparent);color:var(--ttdk-stroke-border-focus)}.dark .ttdk-dropdown-option[data-selected=true] .ttdk-dropdown-option-label{color:inherit}.ttdk-dropdown-option[data-danger=true]{color:var(--ttdk-bg-status-error)}.ttdk-dropdown-option[data-danger=true] .ttdk-dropdown-option-label{color:inherit}.ttdk-dropdown-option[data-danger=true] .ttdk-dropdown-option-desc{color:var(--ttdk-stroke-status-error)}.ttdk-dropdown-option[data-danger=true]:hover:not([data-disabled=true]){background:var(--ttdk-bg-status-error-subtle);color:var(--ttdk-bg-status-error-strong)}.ttdk-dropdown-option[data-danger=true]:hover:not([data-disabled=true]) .ttdk-dropdown-option-label{color:inherit}.ttdk-dropdown-option[data-danger=true]:hover:not([data-disabled=true]) .ttdk-dropdown-option-desc{color:var(--ttdk-text-icon-status-error)}.dark .ttdk-dropdown-option[data-danger=true]{color:var(--ttdk-stroke-status-error)}.dark .ttdk-dropdown-option[data-danger=true] .ttdk-dropdown-option-label{color:inherit}.dark .ttdk-dropdown-option[data-danger=true]:hover:not([data-disabled=true]){background:color-mix(in srgb, var(--ttdk-bg-status-error) 15%, transparent);color:var(--ttdk-text-icon-status-error)!important}.ttdk-dropdown-option[data-disabled=true]{opacity:.5;cursor:not-allowed}.ttdk-dropdown-option-icon{flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;margin-top:1px;display:inline-flex}.ttdk-dropdown-option-content{flex-direction:column;flex:1;min-width:0;display:flex}.ttdk-dropdown-option-label{color:inherit;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;line-height:20px;overflow:hidden}.dark .ttdk-dropdown-option-label{color:inherit}.ttdk-dropdown-option-desc{color:var(--ttdk-text-icon-secondary);white-space:normal;margin-top:2px;font-size:12px;line-height:16px}.dark .ttdk-dropdown-option-desc{color:var(--ttdk-text-icon-secondary)}.ttdk-dropdown-check-icon{color:currentColor;flex-shrink:0;align-items:center;margin-top:2px;display:inline-flex}.dark .ttdk-dropdown-check-icon{color:currentColor}.ttdk-dropdown-checkbox{border:1.5px solid var(--ttdk-stroke-subtle);border-radius:var(--ttdk-radius-input-sm);background:var(--ttdk-bg-base-primary);flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;margin-top:2px;transition:all .15s;display:inline-flex}.dark .ttdk-dropdown-checkbox{background:var(--ttdk-bg-base-primary);border-color:var(--ttdk-stroke-subtle)}.ttdk-dropdown-checkbox[data-checked=true]{background:var(--ttdk-brand-default);border-color:var(--ttdk-brand-default);color:var(--ttdk-color-white)}.ttdk-dropdown-empty{text-align:center;color:var(--ttdk-text-icon-disabled);padding:16px 12px;font-size:13px}.ttdk-dropdown-panel-content{box-sizing:border-box;display:block}.ttdk-dropdown-menu:has(.ttdk-dropdown-panel-content){width:auto;max-height:none;overflow:visible!important}.ttdk-dropdown-actions{border-top:1px solid var(--ttdk-stroke-subtle);background:var(--ttdk-bg-secondary-disabled);justify-content:space-between;align-items:center;gap:var(--ttdk-spacing-xs);flex-shrink:0;padding:8px 12px;display:flex}.dark .ttdk-dropdown-actions{background:var(--ttdk-bg-secondary-disabled);border-top-color:var(--ttdk-stroke-subtle)}.ttdk-dropdown-btn-reset{color:var(--ttdk-brand-default);font-size:13px;font-weight:600;font-family:var(--ttdk-font-sans);cursor:pointer;border-radius:var(--ttdk-radius-input-sm);background:0 0;border:none;align-items:center;gap:6px;padding:6px 8px;transition:color .15s,background-color .15s;display:inline-flex}.ttdk-dropdown-btn-reset:hover{background:var(--ttdk-brand-subtle);color:var(--ttdk-brand-strong)}.dark .ttdk-dropdown-btn-reset:hover{background:color-mix(in srgb, var(--ttdk-brand-default) 15%, transparent)}.ttdk-dropdown-btn-apply{background:var(--ttdk-brand-default);color:var(--ttdk-color-white);font-size:13px;font-weight:600;font-family:var(--ttdk-font-sans);cursor:pointer;border-radius:var(--ttdk-radius-input-md);border:none;align-items:center;gap:6px;padding:6px 16px;transition:background-color .15s,transform .1s;display:inline-flex}.ttdk-dropdown-btn-apply:hover{background:var(--ttdk-brand-strong)}.ttdk-dropdown-btn-apply:active{transform:scale(.98)}.ttdk-dropdown-helper-text{color:var(--ttdk-text-icon-secondary);font-size:12px;line-height:18px;font-family:var(--ttdk-font-sans)}.dark .ttdk-dropdown-helper-text{color:var(--ttdk-text-icon-secondary)}.ttdk-dropdown-error-text{color:var(--ttdk-text-icon-status-error);font-size:12px;font-weight:500;line-height:18px;font-family:var(--ttdk-font-sans)}