library: ListPopup: OS3 style like

* anim style is similar to OS3, but not exactly the same.

* SuperDropdown/SuperSpinner will only be displayed on the right side now

Author: YuKongA

docs/components/superdropdown.md

@@ -2,7 +2,7 @@
 
 `SuperDropdown` is a dropdown menu component in Miuix that provides a title, summary, and a list of dropdown options. It supports click interaction and is commonly used in option settings and list selections.
 
-<div style="position: relative; max-width: 700px; height: 285px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
+<div style="position: relative; max-width: 700px; height: 262px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
     <iframe id="demoIframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" src="../compose/index.html?id=superDropdown" title="Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
 </div>
 
@@ -14,7 +14,6 @@
 
 ```kotlin
 import top.yukonga.miuix.kmp.extra.SuperDropdown
-import top.yukonga.miuix.kmp.extra.DropDownMode
 ```
 
 ## Basic Usage
@@ -67,43 +66,7 @@ SuperDropdown(
 )
 ```
 
-## Dropdown Position
 
-SuperDropdown supports different dropdown position modes:
-
-### Normal Mode (Auto-adaptive based on click position)
-
-```kotlin
-var selectedIndex by remember { mutableStateOf(0) }
-val options = listOf("Option 1", "Option 2", "Option 3")
-
-Scaffold {
-    SuperDropdown(
-        title = "Normal Mode",
-        items = options,
-        selectedIndex = selectedIndex,
-        onSelectedIndexChange = { selectedIndex = it },
-        mode = DropDownMode.Normal // Default value
-    )
-}
-```
-
-### Always on Right Mode
-
-```kotlin
-var selectedIndex by remember { mutableStateOf(0) }
-val options = listOf("Option 1", "Option 2", "Option 3")
-
-Scaffold {
-    SuperDropdown(
-        title = "Always on Right Mode",
-        items = options,
-        selectedIndex = selectedIndex,
-        onSelectedIndexChange = { selectedIndex = it },
-        mode = DropDownMode.AlwaysOnRight
-    )
-}
-```
 
 ## Properties
 
@@ -118,7 +81,6 @@ Scaffold {
 | summary               | String?              | Summary description of dropdown   | null                                  | No       |
 | summaryColor          | BasicComponentColors | Summary text color configuration  | BasicComponentDefaults.summaryColor() | No       |
 | dropdownColors        | DropdownColors       | Color configuration for dropdown  | DropdownDefaults.dropdownColors()     | No       |
-| mode                  | DropDownMode         | Display mode of dropdown menu     | DropDownMode.Normal                   | No       |
 | modifier              | Modifier             | Modifier applied to the component | Modifier                              | No       |
 | insideMargin          | PaddingValues        | Internal content padding          | BasicComponentDefaults.InsideMargin   | No       |
 | maxHeight             | Dp?                  | Maximum height of dropdown menu   | null                                  | No       |

docs/components/superspinner.md

@@ -2,7 +2,7 @@
 
 `SuperSpinner` is a dropdown selector component in Miuix that provides titles, summaries, and a list of options with icons and text. It supports click interaction and various display modes, commonly used in option settings with visual aids. This component is similar to `SuperDropdown` but offers richer functionality and interaction experience.
 
-<div style="position: relative; max-width: 700px; height: 282px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
+<div style="position: relative; max-width: 700px; height: 262px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
     <iframe id="demoIframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" src="../compose/index.html?id=superSpinner" title="Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
 </div>
 
@@ -15,7 +15,6 @@
 ```kotlin
 import top.yukonga.miuix.kmp.extra.SuperSpinner
 import top.yukonga.miuix.kmp.extra.SpinnerEntry
-import top.yukonga.miuix.kmp.extra.SpinnerMode
 ```
 
 ## Basic Usage
@@ -108,51 +107,7 @@ SuperSpinner(
 )
 ```
 
-## Display Modes
-
-SuperSpinner supports different display modes:
-
-### Normal Mode (Adaptive to Click Position)
-
-```kotlin
-var selectedIndex by remember { mutableStateOf(0) }
-val options = listOf(
-    SpinnerEntry(title = "Option 1"),
-    SpinnerEntry(title = "Option 2"),
-    SpinnerEntry(title = "Option 3")
-)
-
-Scaffold {
-    SuperSpinner(
-        title = "Normal Mode",
-        items = options,
-        selectedIndex = selectedIndex,
-        onSelectedIndexChange = { selectedIndex = it },
-        mode = SpinnerMode.Normal // Default value
-    )
-}
-```
-
-### Always on Right Mode
-
-```kotlin
-var selectedIndex by remember { mutableStateOf(0) }
-val options = listOf(
-    SpinnerEntry(title = "Option 1"),
-    SpinnerEntry(title = "Option 2"),
-    SpinnerEntry(title = "Option 3")
-)
-
-Scaffold {
-    SuperSpinner(
-        title = "Always on Right Mode",
-        items = options,
-        selectedIndex = selectedIndex,
-        onSelectedIndexChange = { selectedIndex = it },
-        mode = SpinnerMode.AlwaysOnRight // Always on right mode
-    )
-}
-```
+## Dialog Mode
 
 ### Display Dropdown Menu in Dialog
 
@@ -188,7 +143,6 @@ Scaffold {
 | summary               | String?                   | Selector description        | null                                  | No       |
 | summaryColor          | BasicComponentColors      | Summary text color config   | BasicComponentDefaults.summaryColor() | No       |
 | leftAction            | @Composable (() -> Unit)? | Custom left content         | null                                  | No       |
-| mode                  | SpinnerMode               | Display mode                | SpinnerMode.Normal                    | No       |
 | modifier              | Modifier                  | Component modifier          | Modifier                              | No       |
 | insideMargin          | PaddingValues             | Internal content padding    | BasicComponentDefaults.InsideMargin   | No       |
 | maxHeight             | Dp?                       | Maximum dropdown height     | null                                  | No       |

docs/demo/src/commonMain/kotlin/ListPopupDemo.kt

@@ -46,7 +46,7 @@ fun ListPopupDemo() {
                     )
                     ListPopup(
                         show = showPopup,
-                        alignment = PopupPositionProvider.Align.Left,
+                        alignment = PopupPositionProvider.Align.TopLeft,
                         onDismissRequest = { showPopup.value = false } // Close the popup menu
                     ) {
                         ListPopupColumn {

docs/demo/src/commonMain/kotlin/SuperDropdownDemo.kt

@@ -21,7 +21,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.basic.Card
 import top.yukonga.miuix.kmp.basic.Scaffold
-import top.yukonga.miuix.kmp.extra.DropDownMode
 import top.yukonga.miuix.kmp.extra.SuperDropdown
 
 @Composable
@@ -45,8 +44,6 @@ fun SuperDropdownDemo() {
                 val options1 = listOf("Option 1", "Option 2", "Option 3")
                 var selectedIndex2 by remember { mutableStateOf(0) }
                 val options2 = listOf("Chinese", "English", "Japanese")
-                var selectedIndex3 by remember { mutableStateOf(0) }
-                val options3 = listOf("Option 1", "Option 2", "Option 3")
 
                 Card {
                     SuperDropdown(
@@ -62,13 +59,6 @@ fun SuperDropdownDemo() {
                         selectedIndex = selectedIndex2,
                         onSelectedIndexChange = { selectedIndex2 = it }
                     )
-                    SuperDropdown(
-                        title = "Always on Right Mode",
-                        items = options3,
-                        selectedIndex = selectedIndex3,
-                        onSelectedIndexChange = { selectedIndex3 = it },
-                        mode = DropDownMode.AlwaysOnRight
-                    )
                     SuperDropdown(
                         title = "Disabled Dropdown",
                         summary = "This dropdown menu is currently unavailable",

docs/demo/src/commonMain/kotlin/SuperSpinnerDemo.kt

@@ -28,7 +28,6 @@ import top.yukonga.miuix.kmp.basic.Card
 import top.yukonga.miuix.kmp.basic.Icon
 import top.yukonga.miuix.kmp.basic.Scaffold
 import top.yukonga.miuix.kmp.extra.SpinnerEntry
-import top.yukonga.miuix.kmp.extra.SpinnerMode
 import top.yukonga.miuix.kmp.extra.SuperSpinner
 
 @Composable
@@ -77,12 +76,6 @@ fun SuperSpinnerDemo() {
                         summary = "Bright yellow"
                     )
                 )
-                var selectedIndex3 by remember { mutableStateOf(0) }
-                val options3 = listOf(
-                    SpinnerEntry(title = "Option 1"),
-                    SpinnerEntry(title = "Option 2"),
-                    SpinnerEntry(title = "Option 3")
-                )
 
                 Card {
                     SuperSpinner(
@@ -98,13 +91,6 @@ fun SuperSpinnerDemo() {
                         selectedIndex = selectedIndex2,
                         onSelectedIndexChange = { selectedIndex2 = it }
                     )
-                    SuperSpinner(
-                        title = "Always on Right Mode",
-                        items = options3,
-                        selectedIndex = selectedIndex3,
-                        onSelectedIndexChange = { selectedIndex3 = it },
-                        mode = SpinnerMode.AlwaysOnRight // Always on right mode
-                    )
                     SuperSpinner(
                         title = "Disabled Selector",
                         summary = "This selector is currently unavailable",

docs/zh_CN/components/superdropdown.md

@@ -14,7 +14,6 @@
 
 ```kotlin
 import top.yukonga.miuix.kmp.extra.SuperDropdown
-import top.yukonga.miuix.kmp.extra.DropDownMode
 ```
 
 ## 基本用法
@@ -67,43 +66,7 @@ SuperDropdown(
 )
 ```
 
-## 下拉菜单位置
 
-SuperDropdown 支持不同的下拉位置模式：
-
-### 普通模式（根据点击位置自适应）
-
-```kotlin
-var selectedIndex by remember { mutableStateOf(0) }
-val options = listOf("选项 1", "选项 2", "选项 3")
-
-Scaffold {
-    SuperDropdown(
-        title = "普通模式",
-        items = options,
-        selectedIndex = selectedIndex,
-        onSelectedIndexChange = { selectedIndex = it },
-        mode = DropDownMode.Normal // 默认值
-    )
-}
-```
-
-### 总是在右侧模式
-
-```kotlin
-var selectedIndex by remember { mutableStateOf(0) }
-val options = listOf("选项 1", "选项 2", "选项 3")
-
-Scaffold {
-    SuperDropdown(
-        title = "总是在右侧模式",
-        items = options,
-        selectedIndex = selectedIndex,
-        onSelectedIndexChange = { selectedIndex = it },
-        mode = DropDownMode.AlwaysOnRight
-    )
-}
-```
 
 ## 属性
 
@@ -118,7 +81,6 @@ Scaffold {
 | summary               | String?              | 下拉菜单的摘要说明       | null                                  | 否       |
 | summaryColor          | BasicComponentColors | 摘要文本的颜色配置       | BasicComponentDefaults.summaryColor() | 否       |
 | dropdownColors        | DropdownColors       | 下拉菜单的颜色配置       | DropdownDefaults.dropdownColors()     | 否       |
-| mode                  | DropDownMode         | 下拉菜单的显示模式       | DropDownMode.Normal                   | 否       |
 | modifier              | Modifier             | 应用于组件的修饰符       | Modifier                              | 否       |
 | insideMargin          | PaddingValues        | 组件内部内容的边距       | BasicComponentDefaults.InsideMargin   | 否       |
 | maxHeight             | Dp?                  | 下拉菜单的最大高度       | null                                  | 否       |

docs/zh_CN/components/superspinner.md

@@ -15,7 +15,6 @@
 ```kotlin
 import top.yukonga.miuix.kmp.extra.SuperSpinner
 import top.yukonga.miuix.kmp.extra.SpinnerEntry
-import top.yukonga.miuix.kmp.extra.SpinnerMode
 ```
 
 ## 基本用法
@@ -108,51 +107,7 @@ SuperSpinner(
 )
 ```
 
-## 显示模式
-
-SuperSpinner 支持不同的显示模式：
-
-### 普通模式（根据点击位置自适应）
-
-```kotlin
-var selectedIndex by remember { mutableStateOf(0) }
-val options = listOf(
-    SpinnerEntry(title = "选项 1"),
-    SpinnerEntry(title = "选项 2"),
-    SpinnerEntry(title = "选项 3")
-)
-
-Scaffold {
-    SuperSpinner(
-        title = "普通模式",
-        items = options,
-        selectedIndex = selectedIndex,
-        onSelectedIndexChange = { selectedIndex = it },
-        mode = SpinnerMode.Normal // 默认值
-    )
-}
-```
-
-### 总是在右侧模式
-
-```kotlin
-var selectedIndex by remember { mutableStateOf(0) }
-val options = listOf(
-    SpinnerEntry(title = "选项 1"),
-    SpinnerEntry(title = "选项 2"),
-    SpinnerEntry(title = "选项 3")
-)
-
-Scaffold {
-    SuperSpinner(
-        title = "总是在右侧模式",
-        items = options,
-        selectedIndex = selectedIndex,
-        onSelectedIndexChange = { selectedIndex = it },
-        mode = SpinnerMode.AlwaysOnRight // 总是在右侧模式
-    )
-}
-```
+## 对话框模式
 
 ### 将下拉菜单显示在对话框中
 
@@ -188,7 +143,6 @@ Scaffold {
 | summary               | String?                   | 选择器的摘要说明       | null                                  | 否       |
 | summaryColor          | BasicComponentColors      | 摘要文本的颜色配置     | BasicComponentDefaults.summaryColor() | 否       |
 | leftAction            | @Composable (() -> Unit)? | 左侧显示的自定义内容   | null                                  | 否       |
-| mode                  | SpinnerMode               | 选择器的显示模式       | SpinnerMode.Normal                    | 否       |
 | modifier              | Modifier                  | 应用于组件的修饰符     | Modifier                              | 否       |
 | insideMargin          | PaddingValues             | 组件内部内容的边距     | BasicComponentDefaults.InsideMargin   | 否       |
 | maxHeight             | Dp?                       | 下拉菜单的最大高度     | null                                  | 否       |

example/src/commonMain/kotlin/MainPage.kt

@@ -93,9 +93,7 @@ fun MainPage(
     val switch = remember { mutableStateOf(false) }
     val switchTrue = remember { mutableStateOf(true) }
     val dropdownOptionSelected = remember { mutableStateOf(0) }
-    val dropdownOptionSelectedRight = remember { mutableStateOf(1) }
     val spinnerOptionSelected = remember { mutableStateOf(0) }
-    val spinnerOptionSelectedRight = remember { mutableStateOf(1) }
     val spinnerOptionSelectedDialog = remember { mutableStateOf(2) }
     val superCheckbox = remember { mutableStateOf("State: false") }
     val superCheckboxState = remember { mutableStateOf(false) }
@@ -119,9 +117,7 @@ fun MainPage(
             switch,
             switchTrue,
             dropdownOptionSelected,
-            dropdownOptionSelectedRight,
             spinnerOptionSelected,
-            spinnerOptionSelectedRight,
             spinnerOptionSelectedDialog,
             superCheckbox,
             superCheckboxState,