inviton-powerduck 0.0.216 → 0.0.218

package/components/counter/testall.tsx

@@ -7,6 +7,7 @@ import type { AppMenuItem } from '../app/menu';
 import type { CardHeaderDropdownArgs } from '../card/card-header-with-options';
 import type { DropdownListOption } from '../dropdown';
 import type { ImageDropdownDataItem } from '../dropdown/image-dropdown';
+import type { SmartDropdownCategoryItem, SmartDropdownSearchResultItem } from '../dropdown/smart-dropdown';
 import type { TimegridCalendarAddClickedArgs, TimegridCalendarEvent } from '../fullcalendar/timegrid-calendar';
 import { Temporal } from '@js-temporal/polyfill';
 import { Prop, toNative } from 'vue-facing-decorator';
@@ -30,6 +31,7 @@ import DropdownButtonItem from '../dropdown-button/dropdown-button-item';
 import DropdownButtonSeparator from '../dropdown-button/dropdown-button-separator';
 import CountryDropdown from '../dropdown/country-dropdown';
 import ImageDropdown from '../dropdown/image-dropdown';
+import SmartDropdown from '../dropdown/smart-dropdown';
 import Fieldset from '../form/fieldset';
 import FlexContainer from '../form/flex-container';
 import FooterButtons from '../form/footer-buttons';
@@ -155,6 +157,81 @@ class TestAllComponentsPageComponent extends PowerduckViewModelBase {
 		});
 	}
 
+	// 1. Static Categories
+	categories: SmartDropdownCategoryItem[] = [
+		{ id: 101, text: 'Skipass' },
+		{ id: 102, text: 'Výlet lanovkou' },
+		{ id: 103, text: 'Aquapass' },
+		{ id: 104, text: 'Ubytovanie' },
+		{ id: 105, text: 'Parkovanie' },
+		{ id: 106, text: 'Eventy' },
+		{ id: 107, text: 'Zazitky' },
+		{ id: 108, text: 'Ine srandy' },
+		{ id: 109, text: 'Vouchery' },
+		{ id: 110, text: 'Pokemony' },
+		{ id: 111, text: 'Kino' },
+		{ id: 112, text: 'Restauracie' },
+		{ id: 113, text: 'Este insie srandy' },
+		{ id: 114, text: 'Sranda banda' },
+	];
+
+	// 2. Selected State
+	selectedItems: (SmartDropdownCategoryItem | SmartDropdownSearchResultItem)[] = [];
+
+	// 3. Search Data Logic (Simulated Backend)
+	async fetchSmartDropdownSearchData(query: string): Promise<SmartDropdownSearchResultItem[]> {
+		console.log('Fetching for:', query);
+
+		// Simulate network delay
+		await new Promise(resolve => setTimeout(resolve, 500)); // 500ms delay
+
+		const mockDb: SmartDropdownSearchResultItem[] = [
+			{ id: 1, text: 'Hotel Grand Jasná', subtitle: 'Ubytovanie • Jasná', imageUrl: 'https://picsum.photos/200' },
+			{ id: 2, text: 'Celosezónny Skipass', subtitle: 'Produkt • Nízke Tatry', imageUrl: 'https://picsum.photos/200' },
+			{ id: 3, text: 'Hotel Rotunda', subtitle: 'Ubytovanie • Chopok', imageUrl: 'https://picsum.photos/200' },
+			{ id: 4, text: 'Fresh Track', subtitle: 'Zážitok • Lomnica' },
+			{ id: 5, text: 'Wellness Hotel', subtitle: 'Ubytovanie • Bešeňová' },
+		];
+
+		return mockDb.filter(item =>
+			item.text.toLowerCase().includes(query.toLowerCase()));
+	}
+
+	// 4. Handle Change
+	onSmartDropdownSelectionChange(newSelection: any[]) {
+		console.log('Selection updated:', newSelection);
+		this.selectedItems = newSelection;
+	}
+
+	// 2. Custom Sections (History & Inspiration)
+	get customSections() {
+		return [
+			{
+				id: 'history',
+				title: 'Nedávne vyhľadávania',
+				items: [
+					{ id: 'h1', text: 'Jasná', type: 'history' },
+					{ id: 'h2', text: 'Vysoké Tatry', type: 'history' },
+				],
+			},
+			{
+				id: 'inspiration',
+				title: 'Váhate, kam cestovať najbližšie?',
+				items: [
+					{ id: 'insp1', text: 'Zadajte Kamkoľvek', type: 'special', icon: 'pin' },
+					{ id: 'insp2', text: 'V mojej lokalite', type: 'special', icon: 'target' },
+				],
+			},
+		];
+	}
+
+	// 4. Custom Handler for History Delete
+	removeSmartDropdownHistory(e: Event, id: string | number) {
+		e.stopPropagation();
+		console.log('Removing history', id);
+		// logic to remove from customSections...
+	}
+
 	render(h) {
 		return (
 			<div>
@@ -333,11 +410,11 @@ class TestAllComponentsPageComponent extends PowerduckViewModelBase {
 								<p>Some modal content1</p>
 							</ModalSection>
 							{this.boolValue == true
-							&& (
-								<ModalSection icon="icon icon-settings" navCaption="Settings2">
-									<p>Some modal content2</p>
-								</ModalSection>
-							)}
+								&& (
+									<ModalSection icon="icon icon-settings" navCaption="Settings2">
+										<p>Some modal content2</p>
+									</ModalSection>
+								)}
 
 							<ModalSection icon="icon icon-settings" navCaption="Settings4">
 								<p>Some modal content4444</p>
@@ -411,16 +488,12 @@ class TestAllComponentsPageComponent extends PowerduckViewModelBase {
 						h,
 						item,
 						originator,
-					) => {
-						return (<CustomDropdownItem text={item.text} />);
-					}}
+					) => <CustomDropdownItem text={item.text} />}
 					customRenderSelectionResult={(
 						h,
 						item,
 						originator,
-					) => {
-						return (<CustomDropdownItem text={item.text} />);
-					}}
+					) => <CustomDropdownItem text={item.text} />}
 					changed={(v) => {
 						this.selectedOptions = v.id;
 					}}
@@ -479,6 +552,58 @@ class TestAllComponentsPageComponent extends PowerduckViewModelBase {
 					}}
 				/>
 
+				<SmartDropdown
+					label="Mudry dropdown"
+					wrap={false}
+					categories={this.categories}
+					searchData={this.fetchSmartDropdownSearchData}
+					customSections={this.customSections}
+					value={this.selectedItems}
+					buttonLayout="inline"
+					selectionDisplay="chips"
+
+					searchMode="input"
+					changed={this.onSmartDropdownSelectionChange} // Or use @selectionChanged in template
+					multiselect={true} // Toggle to false for single select
+					placeholder="Hľadajte hotel, službu..."
+					// customSectionRender={(item, selected) => {
+					// 	// Example: History Item
+					// 	if (item.type === 'history') {
+					// 		return (
+					// 			<div style="display:flex; justify-content:space-between; padding: 8px 16px;">
+					// 				<span>
+					// 					↻
+					// 					<b>{item.text}</b>
+					// 				</span>
+					// 				<span onClick={e => this.removeHistory(e, item.id)}>x</span>
+					// 			</div>
+					// 		);
+					// 	}
+
+					// 	// Example: Default Checkbox style via simple HTML
+					// 	return (
+					// 		<div style="display:flex; align-items:center; padding: 8px 16px;">
+					// 			<div class={`checkbox-visual ${selected ? 'checked' : ''}`} style="margin-right:10px; width:16px; height:16px; border:1px solid #ccc;"></div>
+					// 			{item.text}
+					// 		</div>
+					// 	);
+					// }}
+					customTriggerScope="mobile"
+					customTriggerRender={() => (
+						<div style="display:flex; flex-direction:column; width:100%; gap:8px;">
+							{/* Mimicking the stacked mobile inputs */}
+							<div style="border:1px solid #eee; padding:8px; border-radius:8px; display:flex; justify-content:space-between;">
+								<span style="color:#999; font-size:12px">Kam</span>
+								<strong>Jasná</strong>
+							</div>
+							<div style="border:1px solid #eee; padding:8px; border-radius:8px; display:flex; justify-content:space-between;">
+								<span style="color:#999; font-size:12px">Čo hľadáte</span>
+								<strong>Skipass</strong>
+							</div>
+						</div>
+					)}
+				/>
+
 				<DropdownButton layout={ButtonLayout.Default} size={ButtonSize.Regular} text="Akcie">
 					<DropdownButtonItem icon="icon icon-settings" text="Edit" clicked={() => alert('clicked me')} />
 					<DropdownButtonSeparator />

package/components/dropdown/css/smart-dropdown.scss

@@ -0,0 +1,422 @@
+.gopass-filter-wrapper {
+    /* ... [Previous variables and base styles] ... */
+    --bs-blue: #0d6efd;
+    --bs-btn-bg: #0d6efd;
+    --bs-btn-color: #fff;
+    --bs-btn-hover: #0b5ed7;
+    --bs-btn-disabled-bg: #0d6efd;
+    --bs-btn-disabled-opacity: 0.65;
+    --bs-border-radius: 0.375rem;
+
+    font-family:
+        system-ui,
+        -apple-system,
+        'Segoe UI',
+        Roboto,
+        sans-serif;
+    position: relative;
+    width: 100%;
+
+    * {
+        box-sizing: border-box;
+    }
+
+    /* --- TRIGGER --- */
+    .filter-trigger {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        min-height: 38px;
+        padding: 0.375rem 0.75rem;
+        font-size: 1rem;
+        color: #212529;
+        background: #fff;
+        border: 1px solid #ced4da;
+        border-radius: var(--bs-border-radius);
+        cursor: pointer;
+        transition: all 0.15s;
+
+        &:hover {
+            border-color: #b3b3b3;
+        }
+
+        &.is-open {
+            border-color: #86b7fe;
+            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+        }
+    }
+
+    .result-image {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        /* Circle image */
+        object-fit: cover;
+        margin-right: 12px;
+        background-color: #f0f0f0;
+        flex-shrink: 0;
+    }
+
+    /* INPUT MODE TRIGGER STYLES */
+    .trigger-input {
+        width: 100%;
+        border: none;
+        outline: none;
+        background: transparent;
+        font-size: 1rem;
+        color: #212529;
+        padding: 0;
+        margin: 0;
+
+        &::placeholder {
+            color: #6c757d;
+        }
+    }
+
+    .trigger-input-inline {
+        border: none;
+        outline: none;
+        background: transparent;
+        font-size: 1rem;
+        min-width: 50px;
+        flex-grow: 1;
+    }
+
+    /* ... [Chips, Placeholder, Caret styles - No Change] ... */
+    .trigger-content {
+        flex-grow: 1;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+        overflow: hidden;
+    }
+
+    .placeholder-text {
+        color: #6c757d;
+    }
+
+    .caret {
+        margin-left: 8px;
+        border-top: 4px solid #666;
+        border-right: 4px solid transparent;
+        border-left: 4px solid transparent;
+    }
+
+    .chip {
+        background: #e9ecef;
+        color: #495057;
+        padding: 2px 8px;
+        border-radius: 12px;
+        font-size: 0.85rem;
+        display: inline-flex;
+        align-items: center;
+        font-weight: 500;
+    }
+
+    .chip-remove {
+        margin-left: 6px;
+        cursor: pointer;
+        font-weight: bold;
+        color: #888;
+        width: 16px;
+        height: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+
+        &:hover {
+            background: #ccc;
+            color: #000;
+        }
+    }
+
+    /* --- DROPDOWN --- */
+    .filter-dropdown {
+        position: absolute;
+        top: calc(100% + 4px);
+        left: 0;
+        width: 100%;
+        min-width: 300px;
+        background: white;
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        border-radius: var(--bs-border-radius);
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+        z-index: 1050;
+        display: flex;
+        flex-direction: column;
+        max-height: 450px;
+        animation: fadeIn 0.1s ease-out;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(-5px);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    .search-header {
+        padding: 10px;
+        border-bottom: 1px solid #e9ecef;
+        background-color: #fff;
+        flex-shrink: 0;
+        display: flex;
+        gap: 8px;
+        align-items: center;
+    }
+
+    .search-input {
+        flex-grow: 1;
+        width: auto;
+        padding: 0.375rem 0.75rem 0.375rem 34px;
+        border: 1px solid #ced4da;
+        border-radius: 4px;
+        outline: none;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: 10px center;
+
+        &:focus {
+            border-color: #86b7fe;
+        }
+    }
+
+    /* ... [Button, List, Footer, Item styles - No Change] ... */
+    .btn-confirm {
+        display: inline-block;
+        font-weight: 500;
+        text-align: center;
+        vertical-align: middle;
+        user-select: none;
+        border: 1px solid transparent;
+        padding: 0.375rem 0.75rem;
+        font-size: 1rem;
+        line-height: 1.5;
+        border-radius: var(--bs-border-radius);
+        color: var(--bs-btn-color);
+        background-color: var(--bs-btn-bg);
+        cursor: pointer;
+        transition: all 0.15s;
+        white-space: nowrap;
+
+        &:hover:not(:disabled) {
+            background-color: var(--bs-btn-hover);
+        }
+
+        &:active:not(:disabled) {
+            background-color: #0a58ca;
+        }
+
+        &:disabled {
+            opacity: var(--bs-btn-disabled-opacity);
+            cursor: not-allowed;
+        }
+    }
+
+    .dropdown-footer {
+        padding: 10px;
+        border-top: 1px solid #e9ecef;
+        background-color: #f8f9fa;
+        flex-shrink: 0;
+
+        .btn-confirm {
+            width: 100%;
+        }
+    }
+
+    .list-container {
+        overflow-y: auto;
+        flex-grow: 1;
+        min-height: 150px;
+    }
+
+    .list-group-label {
+        padding: 8px 16px;
+        font-size: 0.75rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        color: #adb5bd;
+        background: #fff;
+        border-bottom: 1px solid #f0f0f0;
+        position: sticky;
+        top: 0;
+        z-index: 5;
+    }
+
+    .sticky-selected {
+        background: #f8f9fa;
+        color: var(--bs-blue);
+        border-bottom: 2px solid #e9ecef;
+    }
+
+    .list-item-custom-container {
+        cursor: pointer;
+        border-bottom: 1px solid #f8f9fa;
+        transition: background-color 0.15s;
+
+        &:hover {
+            background-color: #e9ecef;
+        }
+
+        &.selected {
+            background-color: #e7f1ff;
+        }
+    }
+
+    .list-item {
+        padding: 8px 16px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #f8f9fa;
+
+        &:hover {
+            background: #e9ecef;
+        }
+
+        &.selected {
+            background: #e7f1ff;
+        }
+    }
+
+    .checkbox-visual {
+        width: 16px;
+        height: 16px;
+        border: 1px solid #adb5bd;
+        border-radius: 3px;
+        margin-right: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #fff;
+        flex-shrink: 0;
+
+        &.checked {
+            background: var(--bs-blue);
+            border-color: var(--bs-blue);
+
+            &::after {
+                content: '';
+                width: 4px;
+                height: 8px;
+                border: solid white;
+                border-width: 0 2px 2px 0;
+                transform: rotate(45deg);
+                margin-top: -2px;
+            }
+        }
+    }
+
+    .no-checkbox .checkbox-visual {
+        display: none;
+    }
+
+    .item-content {
+        flex: 1;
+    }
+
+    .item-text {
+        display: block;
+        font-size: 0.95rem;
+        color: #212529;
+    }
+
+    .item-subtitle {
+        display: block;
+        font-size: 0.8rem;
+        color: #6c757d;
+    }
+
+    .loading-state,
+    .empty-state {
+        padding: 1.5rem;
+        text-align: center;
+        color: #6c757d;
+        font-size: 0.9rem;
+    }
+
+    .view-mobile-only {
+        width: 100%;
+    }
+
+    .view-desktop-only {
+        width: 100%;
+    }
+
+    /* Desktop View ( > 768px ) */
+    @media (min-width: 769px) {
+        .view-mobile-only {
+            display: none !important;
+        }
+
+        .view-desktop-only {
+            display: block !important;
+        }
+    }
+
+    /* Mobile View ( <= 768px ) */
+    @media (max-width: 768px) {
+        .view-mobile-only {
+            display: block !important;
+        }
+
+        .view-desktop-only {
+            display: none !important;
+        }
+    }
+
+    /* --- MODE LOGIC (Desktop) --- */
+
+    /* When in 'input' mode on Desktop: Hide internal search header and footer */
+    @media (min-width: 769px) {
+        &.mode-input {
+            .internal-search-header {
+                display: none !important;
+            }
+
+            .dropdown-footer {
+                display: none !important;
+            }
+        }
+    }
+
+    /* --- MOBILE RESPONSIVE --- */
+    @media (max-width: 768px) {
+        .filter-dropdown {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            border-radius: 0;
+            border: none;
+            z-index: 9999;
+            max-height: none;
+        }
+
+        .list-container {
+            height: auto;
+        }
+
+        /* On Mobile, always show the internal search/footer even if in 'input' mode */
+        /* because the external input is behind the modal */
+        &.mode-input {
+            .internal-search-header {
+                display: flex !important;
+            }
+
+            .dropdown-footer {
+                display: block !important;
+            }
+        }
+
+        /* Optional: Hide external input caretaker on mobile if it looks weird */
+    }
+}

package/components/dropdown/smart-dropdown.tsx

@@ -0,0 +1,739 @@
+/* eslint-disable ts/no-this-alias */
+/* eslint-disable no-useless-call */
+
+import type { VNode } from 'vue';
+
+import type { DropdownButtonItemArgs } from '../dropdown-button/dropdown-button-item';
+import type { FormItemWrapperArgs, MarginType } from '../form/form-item-wrapper';
+import { Component, Prop, Watch } from 'vue-facing-decorator';
+import PowerduckState from '../../app/powerduck-state';
+import TsxComponent from '../../app/vuetsx';
+import FormItemWrapper from '../form/form-item-wrapper';
+import './css/smart-dropdown.scss';
+
+// --- Resources ---
+export class SmartDropdownResources {
+	static placeholderDefault = 'Vyberte...';
+	static doneButtonText = 'Hotovo';
+	static loadingTextShort = '...';
+	static loadingTextLong = 'Načítavam...';
+	static noResultsSearch = 'Nenašli sa žiadne výsledky.';
+	static noResultsDefault = 'Žiadne možnosti.';
+	static searchResultTitle = 'Výsledky vyhľadávania';
+	static selectedTitle = 'Vybrané';
+	static categoriesTitle = 'Kategórie';
+	static summarySuffix = ' vybrané';
+	static closeLabel = PowerduckState.getResourceValue('close');
+}
+
+// --- Interfaces ---
+export interface SmartDropdownCategoryItem {
+	id: number | string;
+	text: string;
+	[key: string]: any;
+}
+
+export interface SmartDropdownSearchResultItem {
+	id: number | string;
+	text: string;
+	subtitle?: string;
+	imageUrl?: string;
+	[key: string]: any;
+}
+
+export type SmartDropdownItem = SmartDropdownCategoryItem | SmartDropdownSearchResultItem;
+
+export interface SmartDropdownSection {
+	id: string;
+	title?: string;
+	items: SmartDropdownItem[];
+}
+
+interface SmartDropdownArgs extends FormItemWrapperArgs {
+	categories: SmartDropdownCategoryItem[];
+	customSections: SmartDropdownSection[];
+	searchData: (text: string) => Promise<SmartDropdownSearchResultItem[]>;
+	value: SmartDropdownItem[];
+	multiselect: boolean;
+	placeholder: string;
+	selectionDisplay: 'chips' | 'text';
+	buttonLayout: 'footer' | 'inline';
+	searchMode: 'dropdown' | 'input';
+	customTriggerScope?: 'mobile' | 'desktop' | 'all';
+	customSectionRender?: (item: SmartDropdownItem, selected: boolean) => VNode;
+	customTriggerRender?: () => VNode;
+	changed: (e: SmartDropdownItem[]) => void;
+}
+
+@Component
+export default class SmartDropdown extends TsxComponent<SmartDropdownArgs> implements SmartDropdownArgs {
+	@Prop() label!: string;
+	@Prop() labelButtons!: DropdownButtonItemArgs[];
+	@Prop() subtitle!: string;
+	@Prop() cssClass!: string;
+	@Prop() mandatory!: boolean;
+	@Prop() disabled!: boolean;
+	@Prop() wrap!: boolean;
+	@Prop() hint: string;
+	@Prop() appendIcon: string;
+	@Prop() prependIcon: string;
+	@Prop() maxWidth?: number;
+	@Prop() marginType?: MarginType;
+	@Prop() appendClicked: () => void;
+	@Prop() prependClicked: () => void;
+	@Prop() prependIconClicked: () => void;
+	@Prop() appendIconClicked: () => void;
+	@Prop() keyDown: (e: KeyboardEvent) => void;
+	@Prop() keyUp: (e: KeyboardEvent) => void;
+	@Prop() enterPressed: (e: KeyboardEvent) => void;
+	@Prop() showClearValueButton!: boolean;
+
+	// --- Props from SmartDropdown---
+	@Prop({ type: Array, required: true }) readonly categories!: SmartDropdownCategoryItem[];
+	@Prop({ type: Array, default: () => [] }) readonly customSections!: SmartDropdownSection[];
+	@Prop({ type: Function, required: true }) readonly searchData!: (text: string) => Promise<SmartDropdownSearchResultItem[]>;
+	@Prop({ type: Array, default: () => [] }) readonly value!: SmartDropdownItem[];
+	@Prop({ type: Boolean, default: false }) readonly multiselect!: boolean;
+	@Prop({ type: String, default: () => SmartDropdownResources.placeholderDefault }) readonly placeholder!: string;
+	@Prop({ type: String, default: 'text' }) readonly selectionDisplay!: 'chips' | 'text';
+	@Prop({ type: String, default: 'footer' }) readonly buttonLayout!: 'footer' | 'inline';
+	@Prop({ type: String, default: 'dropdown' }) readonly searchMode!: 'dropdown' | 'input';
+	@Prop({ type: String, default: 'all' }) readonly customTriggerScope!: 'mobile' | 'desktop' | 'all';
+	@Prop({ type: Function }) readonly customSectionRender?: (item: SmartDropdownItem, selected: boolean) => VNode;
+	@Prop({ type: Function }) readonly customTriggerRender?: () => VNode;
+	@Prop() readonly changed: (e: SmartDropdownItem[]) => void;
+
+	// --- State ---
+	isOpen = false;
+	searchQuery = '';
+	searchResults: SmartDropdownSearchResultItem[] = [];
+	isLoading = false;
+	debounceTimer: number | null = null;
+	focusedIndex = -1;
+	triggerInputValue = '';
+
+	// Accessibility ID
+	uid = `smart-dd-${Math.random().toString(36).slice(2, 9)}`;
+
+	// --- Watchers ---
+	@Watch('value', { deep: true, immediate: true })
+	onSelectionChange() {
+		if (!this.isOpen || this.searchQuery === '') {
+			this.triggerInputValue = this.displayText;
+		}
+	}
+
+	// --- Computed ---
+	get listboxId(): string {
+		return `${this.uid}-listbox`;
+	}
+
+	get activeDescendantId(): string | undefined {
+		return this.focusedIndex >= 0 ? `${this.uid}-option-${this.focusedIndex}` : undefined;
+	}
+
+	get flattenedDisplayItems(): SmartDropdownItem[] {
+		// Helper to get flat list for keyboard navigation
+		if (this.isSearchActive) {
+			return this.searchResults;
+		}
+
+		const items: SmartDropdownItem[] = [];
+		if (this.pinnedSelectedItems.length > 0) {
+			items.push(...this.pinnedSelectedItems);
+		}
+
+		this.customSections.forEach(s => items.push(...s.items));
+		if (this.standardDisplayItems.length > 0) {
+			items.push(...this.standardDisplayItems);
+		}
+
+		return items;
+	}
+
+	get standardDisplayItems(): SmartDropdownItem[] {
+		if (this.multiselect && this.selectionDisplay === 'text' && this.value.length > 0) {
+			const selectedIds = new Set(this.value.map(i => i.id));
+			return this.categories.filter(c => !selectedIds.has(c.id));
+		}
+
+		return this.categories;
+	}
+
+	get pinnedSelectedItems(): SmartDropdownItem[] {
+		if (this.multiselect && this.selectionDisplay === 'text' && !this.isSearchActive) {
+			return this.value;
+		}
+
+		return [];
+	}
+
+	get isSearchActive(): boolean {
+		return this.searchQuery.trim().length > 0;
+	}
+
+	get displayText(): string {
+		if (this.value.length === 0) {
+			return '';
+		}
+
+		if (!this.multiselect) {
+			return this.value[0].text;
+		}
+
+		if (this.value.length === 1) {
+			return this.value[0].text;
+		}
+
+		return `${this.value.length}${SmartDropdownResources.summarySuffix}`;
+	}
+
+	beforeDestroy() {
+		this.removeEventHandlers();
+	}
+
+	// --- Methods ---
+
+	toggleDropdown(force?: boolean) {
+		const nextState = typeof force === 'boolean' ? force : !this.isOpen;
+		if (nextState) {
+			this.isOpen = true;
+			this.focusedIndex = -1; // Reset focus logic
+
+			this.$nextTick(() => {
+				const isMobile = window.innerWidth <= 768;
+				const dropdownInput = this.$el.querySelector('.dropdown-search-input') as HTMLInputElement;
+				const triggerInput = this.$el.querySelector('.trigger-input') as HTMLInputElement;
+
+				// Focus Logic
+				const shouldUseExternalFocus = this.searchMode === 'input' && !isMobile && this.customTriggerScope !== 'desktop';
+
+				if (shouldUseExternalFocus) {
+					triggerInput?.select();
+				} else {
+					dropdownInput?.focus();
+				}
+
+				// Initial Scroll Logic
+				if (this.pinnedSelectedItems.length > 0) {
+					const listContainer = this.$el.querySelector('.list-container') as HTMLElement;
+					const categoryHeader = this.$el.querySelector('.section-categories') as HTMLElement;
+					if (listContainer && categoryHeader) {
+						listContainer.scrollTop = categoryHeader.offsetTop;
+					}
+				}
+			});
+
+			this.removeEventHandlers();
+
+			const self = this;
+			this.handleClickOutside = (e: Event) => {
+				if (!self.$el.contains(e.target as Node)) {
+					self.closeDropdown.call(self);
+				}
+			};
+
+			this.handleGlobalKeydown = (e: KeyboardEvent) => {
+				if (!this.isOpen) {
+					// Allow opening with Enter or Down Arrow/Space if focused on trigger
+					if ((e.key === 'Enter' || e.key === 'ArrowDown' || e.key === ' ') && (e.target as HTMLElement).classList.contains('filter-trigger')) {
+						self.toggleDropdown.call(self, true);
+						e.preventDefault();
+					}
+
+					return;
+				}
+
+				const totalItems = self.flattenedDisplayItems.length;
+				switch (e.key) {
+					case 'Escape':
+						self.closeDropdown.call(self);
+						e.preventDefault();
+						break;
+					case 'Enter':
+						e.preventDefault();
+						if (self.focusedIndex >= 0) {
+							self.handleItemClick.call(self, self.flattenedDisplayItems[self.focusedIndex]);
+						} else {
+							self.confirmAndClose();
+						}
+
+						break;
+					case 'ArrowDown':
+						e.preventDefault();
+						self.focusedIndex = (self.focusedIndex + 1) % totalItems;
+						self.scrollItemIntoView.call(self, self.focusedIndex);
+						break;
+					case 'ArrowUp':
+						e.preventDefault();
+						self.focusedIndex = (self.focusedIndex - 1 + totalItems) % totalItems;
+						self.scrollItemIntoView.call(self, self.focusedIndex);
+						break;
+					case 'Home':
+						e.preventDefault();
+						self.focusedIndex = 0;
+						self.scrollItemIntoView.call(self, self.focusedIndex);
+						break;
+					case 'End':
+						e.preventDefault();
+						self.focusedIndex = totalItems - 1;
+						self.scrollItemIntoView.call(self, self.focusedIndex);
+						break;
+					case 'Tab':
+						self.closeDropdown.call(self); // Tab out closes dropdown
+						break;
+				}
+			};
+
+			document.addEventListener('click', this.handleClickOutside);
+			document.addEventListener('keydown', this.handleGlobalKeydown);
+		} else {
+			this.closeDropdown();
+		}
+	}
+
+	removeEventHandlers() {
+		if (this.handleClickOutside) {
+			document.removeEventListener('click', this.handleClickOutside);
+		}
+
+		if (this.handleGlobalKeydown) {
+			document.removeEventListener('keydown', this.handleGlobalKeydown);
+		}
+	}
+
+	closeDropdown() {
+		this.isOpen = false;
+		this.focusedIndex = -1;
+		this.triggerInputValue = this.displayText;
+		this.searchQuery = '';
+	}
+
+	confirmAndClose() {
+		if (this.isLoading) {
+			return;
+		}
+
+		this.searchQuery = '';
+		this.searchResults = [];
+		this.closeDropdown();
+	}
+
+	handleClickOutside = (e: Event) => {
+		if (!this.$el.contains(e.target as Node)) {
+			this.closeDropdown();
+		}
+	};
+
+	handleGlobalKeydown = (e: KeyboardEvent) => {
+		if (!this.isOpen) {
+			// Allow opening with Enter or Down Arrow/Space if focused on trigger
+			if ((e.key === 'Enter' || e.key === 'ArrowDown' || e.key === ' ') && (e.target as HTMLElement).classList.contains('filter-trigger')) {
+				this.toggleDropdown(true);
+				e.preventDefault();
+			}
+
+			return;
+		}
+
+		const totalItems = this.flattenedDisplayItems.length;
+
+		switch (e.key) {
+			case 'Escape':
+				this.closeDropdown();
+				e.preventDefault();
+				break;
+			case 'Enter':
+				e.preventDefault();
+				if (this.focusedIndex >= 0) {
+					this.handleItemClick(this.flattenedDisplayItems[this.focusedIndex]);
+				} else {
+					this.confirmAndClose();
+				}
+
+				break;
+			case 'ArrowDown':
+				e.preventDefault();
+				this.focusedIndex = (this.focusedIndex + 1) % totalItems;
+				this.scrollItemIntoView(this.focusedIndex);
+				break;
+			case 'ArrowUp':
+				e.preventDefault();
+				this.focusedIndex = (this.focusedIndex - 1 + totalItems) % totalItems;
+				this.scrollItemIntoView(this.focusedIndex);
+				break;
+			case 'Home':
+				e.preventDefault();
+				this.focusedIndex = 0;
+				this.scrollItemIntoView(this.focusedIndex);
+				break;
+			case 'End':
+				e.preventDefault();
+				this.focusedIndex = totalItems - 1;
+				this.scrollItemIntoView(this.focusedIndex);
+				break;
+			case 'Tab':
+				this.closeDropdown(); // Tab out closes dropdown
+				break;
+		}
+	};
+
+	scrollItemIntoView(index: number) {
+		// Use nextTick to ensure DOM is updated if virtualized (not here, but good practice)
+		this.$nextTick(() => {
+			const itemId = `${this.uid}-option-${index}`;
+			const el = document.getElementById(itemId);
+			el?.scrollIntoView({ block: 'nearest' });
+		});
+	}
+
+	handleInput(e: Event) {
+		const val = (e.target as HTMLInputElement).value;
+		this.triggerInputValue = val;
+		this.searchQuery = val;
+
+		if (this.debounceTimer) {
+			clearTimeout(this.debounceTimer);
+		}
+
+		if (val.trim().length === 0) {
+			this.isLoading = false;
+			this.searchResults = [];
+			return;
+		}
+
+		this.isLoading = true;
+		this.debounceTimer = window.setTimeout(async () => {
+			try {
+				this.searchResults = await this.searchData(val);
+			} catch (err) {
+				this.searchResults = [];
+			} finally {
+				this.isLoading = false;
+			}
+		}, 800);
+	}
+
+	handleItemClick(item: SmartDropdownItem) {
+		const isSelected = this.isSelected(item);
+		let newSelection: SmartDropdownItem[] = [];
+
+		if (this.multiselect) {
+			if (isSelected) {
+				newSelection = this.value.filter(i => i.id !== item.id);
+			} else {
+				newSelection = [
+					...this.value,
+					item,
+				];
+			}
+		} else {
+			newSelection = [item];
+			this.closeDropdown();
+		}
+
+		this.changed(newSelection);
+		this.$nextTick(() => {
+			this.triggerInputValue = this.displayText;
+		});
+	}
+
+	removeSelection(e: Event, item: SmartDropdownItem) {
+		e.stopPropagation();
+		const newSelection = this.value.filter(i => i.id !== item.id);
+		this.changed(newSelection);
+	}
+
+	isSelected(item: SmartDropdownItem): boolean {
+		return this.value.some(i => i.id === item.id);
+	}
+
+	// --- Renders ---
+
+	renderStandardTrigger() {
+		if (this.multiselect && this.selectionDisplay === 'chips' && this.value.length > 0) {
+			return (
+				<div class="trigger-content">
+					{this.value.map(item => (
+						<span class="chip" onClick={e => e.stopPropagation()} key={item.id}>
+							{item.text}
+							<span
+								class="chip-remove"
+								onClick={e => this.removeSelection(e, item)}
+								role="button"
+								aria-label={`Remove ${item.text}`}
+								tabindex={0}
+							>
+								&times;
+							</span>
+						</span>
+					))}
+					{this.searchMode === 'input' && (
+						<input
+							class="trigger-input-inline"
+							value={this.triggerInputValue === this.displayText ? '' : this.triggerInputValue}
+							onInput={this.handleInput}
+							aria-label={this.placeholder}
+						/>
+					)}
+				</div>
+			);
+		}
+
+		if (this.searchMode === 'input') {
+			return (
+				<input
+					class="trigger-input"
+					type="text"
+					placeholder={this.placeholder}
+					value={this.triggerInputValue}
+					onInput={this.handleInput}
+					onClick={e => (e.target as HTMLInputElement).select()}
+					aria-autocomplete="list"
+					aria-controls={this.listboxId}
+					aria-activedescendant={this.isOpen ? this.activeDescendantId : undefined}
+					aria-expanded={this.isOpen}
+				/>
+			);
+		}
+
+		return (
+			<div class="trigger-content">
+				<span class={this.value.length === 0 ? 'placeholder-text' : ''}>
+					{this.displayText || this.placeholder}
+				</span>
+			</div>
+		);
+	}
+
+	renderTrigger() {
+		if (!this.customTriggerRender) {
+			return this.renderStandardTrigger();
+		}
+
+		const customEl = (
+			<div class="trigger-custom-wrapper">
+				{this.customTriggerRender()}
+			</div>
+		);
+
+		const standardEl = this.renderStandardTrigger();
+
+		switch (this.customTriggerScope) {
+			case 'all': return customEl;
+			case 'mobile': return [
+				<div class="view-mobile-only">{customEl}</div>,
+				<div class="view-desktop-only">{standardEl}</div>,
+			];
+			case 'desktop': return [
+				<div class="view-desktop-only">{customEl}</div>,
+				<div class="view-mobile-only">{standardEl}</div>,
+			];
+			default: return standardEl;
+		}
+	}
+
+	// Main List Renderer (Manages Groups)
+	renderList() {
+		if (this.isLoading) {
+			return <div class="loading-state" role="status">{SmartDropdownResources.loadingTextLong}</div>;
+		}
+
+		// --- Helper to track global index for keyboard nav ---
+		let globalIndex = 0;
+		const getIndex = () => globalIndex++;
+
+		// A. Search Results
+		if (this.isSearchActive) {
+			if (this.searchResults.length === 0) {
+				return <div class="empty-state" role="status">{SmartDropdownResources.noResultsSearch}</div>;
+			}
+
+			return (
+				<div class="list-group" role="group" aria-label={SmartDropdownResources.searchResultTitle}>
+					<div class="list-group-label" aria-hidden="true">{SmartDropdownResources.searchResultTitle}</div>
+					{this.searchResults.map(item => this.renderListItem(item, getIndex()))}
+				</div>
+			);
+		}
+
+		const hasPinned = this.pinnedSelectedItems.length > 0;
+		const hasCustom = this.customSections.length > 0;
+		const hasStandard = this.standardDisplayItems.length > 0;
+
+		if (!hasPinned && !hasCustom && !hasStandard) {
+			return <div class="empty-state" role="status">{SmartDropdownResources.noResultsDefault}</div>;
+		}
+
+		return (
+			<div class="list-wrapper">
+				{/* 1. Pinned Selected */}
+				{hasPinned && (
+					<div class="list-group section-pinned" role="group" aria-label={SmartDropdownResources.selectedTitle}>
+						<div class="list-group-label sticky-selected" aria-hidden="true">
+							{SmartDropdownResources.selectedTitle}
+							{' '}
+							(
+							{this.value.length}
+							)
+						</div>
+						{this.pinnedSelectedItems.map(item => this.renderListItem(item, getIndex()))}
+					</div>
+				)}
+
+				{/* 2. Custom Sections */}
+				{this.customSections.map(section => (
+					<div class="list-group section-custom" key={section.id} role="group" aria-label={section.title || 'Section'}>
+						{section.title && <div class="list-group-label" aria-hidden="true">{section.title}</div>}
+						{section.items.map(item => this.renderListItem(item, getIndex()))}
+					</div>
+				))}
+
+				{/* 3. Standard Categories */}
+				{hasStandard && (
+					<div class="list-group section-categories" role="group" aria-label={SmartDropdownResources.categoriesTitle}>
+						<div class="list-group-label" aria-hidden="true">{SmartDropdownResources.categoriesTitle}</div>
+						{this.standardDisplayItems.map(item => this.renderListItem(item, getIndex()))}
+					</div>
+				)}
+			</div>
+		);
+	}
+
+	renderListItem(item: SmartDropdownItem, index: number) {
+		const isSelected = this.isSelected(item);
+		const isFocused = this.focusedIndex === index;
+		const uniqueId = `${this.uid}-option-${index}`;
+
+		// Wrapper properties for accessibility
+		const wrapperProps = {
+			'id': uniqueId,
+			'class': {
+				'list-item-custom-container': !!this.customSectionRender,
+				'list-item': !this.customSectionRender,
+				'selected': isSelected,
+				'focused': isFocused, // Visual focus state
+				'no-checkbox': !this.multiselect,
+			},
+			'role': 'option',
+			'aria-selected': isSelected,
+			'onClick': () => this.handleItemClick(item),
+			'key': item.id,
+		};
+
+		// 1. Custom Renderer
+		if (this.customSectionRender) {
+			return (
+				<div {...wrapperProps}>
+					{this.customSectionRender(item, isSelected)}
+				</div>
+			);
+		}
+
+		// 2. Default Renderer
+		const searchResult = item as SmartDropdownSearchResultItem;
+		const hasSubtitle = !!searchResult.subtitle;
+		const hasImage = !!searchResult.imageUrl;
+		const showCheckbox = this.multiselect && !this.isSearchActive && !hasImage;
+
+		return (
+			<div {...wrapperProps}>
+				{hasImage
+					? (
+							<img src={searchResult.imageUrl} class="result-image" alt="" />
+						)
+					: (
+							showCheckbox && <div class={`checkbox-visual ${isSelected ? 'checked' : ''}`} aria-hidden="true"></div>
+						)}
+
+				<div class="item-content">
+					<span class="item-text">{item.text}</span>
+					{hasSubtitle && (
+						<span class="item-subtitle">{searchResult.subtitle}</span>
+					)}
+				</div>
+			</div>
+		);
+	}
+
+	render() {
+		const showCaret = this.searchMode !== 'input' && !this.customTriggerRender;
+
+		return (
+			<FormItemWrapper label={this.label} cssClass={this.cssClass} mandatory={this.mandatory} wrap={this.wrap} appendIcon={this.appendIcon} prependIcon={this.prependIcon} hint={this.hint} marginType={this.marginType} appendClicked={this.appendClicked} prependClicked={this.prependClicked} prependIconClicked={this.prependIconClicked} appendIconClicked={this.appendIconClicked} maxWidth={this.maxWidth} validationState={this.validationState} labelButtons={this.labelButtons} subtitle={this.subtitle} showClearValueButton={this.showClearValueButton}>
+				<div
+					class={`gopass-filter-wrapper mode-${this.searchMode}`}
+					// Only the outer wrapper acts as combobox if not in direct input mode
+					role={this.searchMode !== 'input' ? 'combobox' : undefined}
+					aria-expanded={this.isOpen}
+					aria-haspopup="listbox"
+					aria-controls={this.listboxId}
+					aria-label={this.placeholder}
+				>
+
+					{/* TRIGGER */}
+					<div
+						class={{ 'filter-trigger': true, 'is-open': this.isOpen }}
+						onClick={() => this.toggleDropdown(true)}
+						tabindex={this.searchMode === 'input' && !this.customTriggerRender ? undefined : 0}
+					>
+						{this.renderTrigger()}
+						{showCaret && <span class="caret" aria-hidden="true"></span>}
+					</div>
+
+					{/* DROPDOWN */}
+					{this.isOpen && (
+						<div class="filter-dropdown" onClick={e => e.stopPropagation()}>
+
+							{/* INTERNAL HEADER */}
+							<div class="search-header internal-search-header">
+								<input
+									type="text"
+									class="search-input dropdown-search-input"
+									placeholder={this.placeholder}
+									value={this.triggerInputValue}
+									onInput={this.handleInput}
+									// Accessibility for internal input
+									aria-autocomplete="list"
+									aria-controls={this.listboxId}
+									aria-activedescendant={this.activeDescendantId}
+								/>
+								{this.buttonLayout === 'inline' && (
+									<button
+										class="btn-confirm"
+										disabled={this.isLoading}
+										onClick={() => this.confirmAndClose()}
+									>
+										{this.isLoading ? SmartDropdownResources.loadingTextShort : SmartDropdownResources.doneButtonText}
+									</button>
+								)}
+							</div>
+
+							{/* LIST */}
+							<div
+								class="list-container"
+								id={this.listboxId}
+								role="listbox"
+								aria-multiselectable={this.multiselect}
+							>
+								{this.renderList()}
+							</div>
+
+							{/* FOOTER */}
+							{this.buttonLayout === 'footer' && (
+								<div class="dropdown-footer">
+									<button
+										class="btn-confirm"
+										onClick={() => this.confirmAndClose()}
+									>
+										{SmartDropdownResources.doneButtonText}
+									</button>
+								</div>
+							)}
+						</div>
+					)}
+				</div>
+			</FormItemWrapper>
+		);
+	}
+}

package/components/modal/css/modal.css

@@ -60,6 +60,12 @@
 	max-width: 650px;
 }
 
+@media (min-width: 768px) {
+	.modal-dialog.modal-stn {
+		max-width: 400px;
+	}
+}
+
 @media (max-width: 767.99px) {
 	.modal-bottom-sheet .modal-dialog {
 		position: fixed !important;

package/components/modal/modal.tsx

@@ -42,6 +42,7 @@ export enum ModalSize {
 	ExtraLarge = 3,
 	FullWidth = 4,
 	NormalToLarge = 5,
+	SmallToNormal = 6,
 }
 
 export enum ModalHeaderIcon {
@@ -104,6 +105,8 @@ class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
 			return ' modal-fw';
 		} else if (this.size == ModalSize.NormalToLarge) {
 			return ' modal-ntl';
+		} else if (this.size == ModalSize.SmallToNormal) {
+			return ' modal-stn';
 		} else {
 			return '';
 		}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "inviton-powerduck",
 	"type": "module",
-	"version": "0.0.216",
+	"version": "0.0.218",
 	"files": [
 		"app/",
 		"common/",