diff --git a/web/src/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.ts b/web/src/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.ts
index 9843007c18..3aac4172be 100644
--- a/web/src/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.ts
+++ b/web/src/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.ts
@@ -51,6 +51,9 @@ export class AkDualSelectDynamic extends AkDualSelectProvider {
.selected=${this.selected}
available-label=${this.availableLabel}
selected-label=${this.selectedLabel}
+ ?preserve-order=${this.preserveOrder}
+ ?no-search=${this.noSearch}
+ ?no-status=${this.noStatus}
>`;
}
}
diff --git a/web/src/elements/ak-dual-select/ak-dual-select-provider.ts b/web/src/elements/ak-dual-select/ak-dual-select-provider.ts
index 6adba45a52..7137cffc06 100644
--- a/web/src/elements/ak-dual-select/ak-dual-select-provider.ts
+++ b/web/src/elements/ak-dual-select/ak-dual-select-provider.ts
@@ -60,6 +60,30 @@ export class AkDualSelectProvider extends CustomListenerElement(AkControlElement
@property({ attribute: "selected-label" })
public selectedLabel = msg("Selected options");
+ /**
+ * When true, the selected pane preserves insertion order instead of sorting alphabetically.
+ *
+ * @attr
+ */
+ @property({ type: Boolean, attribute: "preserve-order" })
+ public preserveOrder = false;
+
+ /**
+ * When true, hides the search bars in both the available and selected panes.
+ *
+ * @attr
+ */
+ @property({ type: Boolean, attribute: "no-search" })
+ public noSearch = false;
+
+ /**
+ * When true, hides the item count status displays in both panes.
+ *
+ * @attr
+ */
+ @property({ type: Boolean, attribute: "no-status" })
+ public noStatus = false;
+
/**
* The debounce for the search as the user is typing in a request
*
@@ -187,6 +211,9 @@ export class AkDualSelectProvider extends CustomListenerElement(AkControlElement
.selected=${this.#selected}
available-label=${this.availableLabel}
selected-label=${this.selectedLabel}
+ ?preserve-order=${this.preserveOrder}
+ ?no-search=${this.noSearch}
+ ?no-status=${this.noStatus}
>`;
}
}
diff --git a/web/src/elements/ak-dual-select/ak-dual-select.ts b/web/src/elements/ak-dual-select/ak-dual-select.ts
index f04b4081de..83b094762f 100644
--- a/web/src/elements/ak-dual-select/ak-dual-select.ts
+++ b/web/src/elements/ak-dual-select/ak-dual-select.ts
@@ -90,6 +90,19 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE
@property({ attribute: "selected-label" })
selectedLabel = msg("Selected options");
+ @property({ type: Boolean, attribute: "no-search" })
+ noSearch = false;
+
+ @property({ type: Boolean, attribute: "no-status" })
+ noStatus = false;
+
+ /**
+ * When true, the selected pane preserves insertion order instead of sorting alphabetically.
+ * Use this when the order of selected items is meaningful (e.g. priority-based lists).
+ */
+ @property({ type: Boolean, attribute: "preserve-order" })
+ preserveOrder = false;
+
//#endregion
//#region State
@@ -322,17 +335,21 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE
-