@kurot/cli 3.4.0 → 3.6.0

package/docs/architecture.md

@@ -39,7 +39,7 @@ factory variables, property assignments, semantic layout children, and state
 property overrides. Document contracts, reusable instances, data bindings, and
 actions remain `UIDocument` concepts.
 
-CLI 3.4.0 consumes ui-document 0.12.x, retaining Label text-fitting metadata. The
+CLI 3.6.0 consumes ui-document ^0.13.0, retaining Label text-fitting metadata. The
 compiler emits `textFit`, `minFontSize`, base font sizes and state overrides;
 native UI owns measurement and derives drawing sizes after layout validation.
 See [Label compilation](label-text-layout.md). The application supplies UI
@@ -71,6 +71,12 @@ Development builds preserve application source module structure under
 `manifest.json`. Static resources retain stable paths because application code
 addresses them by key or URL.
 
+Asset copying creates directories only when an accepted runtime file needs them.
+KUI source files and source theme JSON are excluded when UI compilation is enabled,
+so a skin-only `resource/ui` tree is absent from output. Mixed directories retain
+their runtime images/JSON and generated theme output is preserved. Template
+scaffolding keeps its separate empty-directory behavior.
+
 ## Development watchers
 
 The dev server has separate rebuild paths for application source, KUI XML, and

package/docs/default-ui-skins.md

@@ -0,0 +1,123 @@
+# Default KUI skins
+
+This game-template refresh is included in CLI 3.6.0, pending publication.
+Registry CLI 3.5.0 contains the older atlas. The 2× kit requires Core ^2.5.0;
+publish Core 2.5.0 before CLI 3.6.0.
+The template owns the XML, textures and project colors; `@kurot/ui`
+does not ship a bitmap theme or load a stylesheet itself.
+
+## Visual language
+
+Rounded corners, bright blue actions, pale neutral surfaces and a small pressed
+button offset echo the Kurot mascot. The default is a light game interface:
+
+| Role | Value |
+| --- | --- |
+| Action / selected outline | `#1487E8` |
+| Action text / marks | `#071D30` |
+| Canvas / panel | `#EDF3FC` / `#FFFFFF` |
+| Input / neutral control | `#F1F5FC` |
+| Text / secondary text | `#18273E` / `#64748B` |
+| Disabled text | `#7C8799` |
+| Button / input minimum height | 48 logical pixels |
+| CheckBox / RadioButton / switch / slider minimum hit height | 44 logical pixels |
+
+Buttons use 14-pixel corner radii and panels use 22. XML single-line labels
+shrink within their allocated width, to a minimum of 14; editable text stays at
+18. Fonts inherit the application's configured family. No browser CSS is used
+to draw the components, and no runtime light/dark switching is introduced.
+
+## Text and spacing
+
+Single-line captions use `multiline="false" verticalAlign="middle"` with the
+Core 2.5.0 ink-centering correction. Button label padding is 10 pixels
+above/below; its down state uses 12/8 to retain a deliberate 2-pixel press offset.
+The icon has the same neutral/down centers. Panel titles also opt into middle
+alignment. Input text retains Core's stable font baseline while its placeholder
+uses dynamic visual centering. No language-specific skin offsets are required.
+See [Core text alignment](../../core/docs/text-layout.md#visual-centering-and-stable-baselines-core-250).
+Published Core 2.4.0 does not contain that correction; the isolated preview uses
+checkout Core for both text alignment and source density.
+
+## Resources and XML
+
+- `resource/assets/ui/kui/kui.json` and `kui.png`: Kurot-owned 512×512 atlas,
+  generated at 2× with sheet `resolution: 2`. XML dimensions stay logical.
+- `resource/default.res.json`: preload group `kui` and object-valued frame
+  metadata. Qualified sources such as `kui.button_up` avoid bare-key collisions.
+- `resource/ui/skins/*.kui.xml`: 15 native default component skins and
+  `CloseButtonSkin`, used explicitly by Panel's `closeButton`.
+- `resource/config/style.json`: named colors used by Label/EditableText state
+  properties. Raster colors are baked into textures; changing text colors alone
+  does not recolor the atlas.
+
+Buttons provide up/down/disabled surfaces. CheckBox, RadioButton, ToggleButton
+and ToggleSwitch cover all six selected/pressed/disabled combinations.
+ItemRenderer supplies selected states for List and TabBar; ComboBox supplies
+normal/open/disabled states and TextInput handles both prompt states when
+enabled or disabled. Sliders supply a disabled thumb. Panel retains its drag
+area, title and close button.
+
+Skin part names and the native component APIs stay unchanged. The CLI compiles
+source changes with a paired nine-slice grid from resource metadata, including
+state transitions. Frames retain their full physical dimensions and never rotate
+or trim; extrusion stays outside the recorded frame. Core divides original frame
+dimensions/trim offsets by density; grids remain logical. Stretchable surfaces keep
+their corners while the interior expands. Icons and switch handles remain fixed
+size. Horizontal and vertical slider tracks have grids that fit their 8-pixel
+thickness.
+
+Scroller keeps `autoVisibility="false" visible="false"` on both bars. It retains
+automatic scrolling policies and touch/trackpad scrolling. To display bars in a
+project, edit those parts explicitly.
+
+ItemRenderer backgrounds fit the allocated row width without extra horizontal
+padding. The checkout Core also fixes fractional WebGL scissor bounds so scaled
+Lists retain their right outline. Published Core 2.4.0 lacks that correction;
+shrinking the skin or changing its nine-slice grid is not required.
+
+Group, List, TabBar, ViewStack and text/image nodes are composed directly in XML;
+their old default-Skin placeholders were not conventional Theme mappings and
+are removed. Use `itemRendererSkinName` to choose a List/TabBar row appearance,
+and wrap the node with Group/Image/Scroller for its surface and viewport.
+
+## Native preview and maintenance
+
+`examples/game/resource/ui/DefaultUISkin.kui.xml` contains the native gallery.
+`src/DefaultUI.ts` only connects data and events. The example installs its own
+project font loader and document dependency; other projects are unchanged.
+
+Core 2.5.0 is published. Until the example adopts it, build Core/CLI for an isolated
+source trial. The example's registry lock does not yet contain density support:
+
+```sh
+pnpm --dir packages/core build
+pnpm --dir packages/cli build
+pnpm --dir tools/default-ui-assets preview
+```
+
+The preview tool prints a new directory under docs-internal, with strict dev
+and minified release builds. It links the built checkout Core and the example's
+installed UI/Game/document packages; it does not edit application installations
+or locks. Run the repository CLI dev command in that printed directory and open
+the server URL with `?ui=1`. The ordinary game remains available without
+that parameter. Try the inputs, switches, ComboBox, tabs, sliders, panel close
+button and draggable List. The gallery is rendered by Core/UI from compiled
+KUI XML. After explicitly installing the Core 2.5.0 release in the
+example, ordinary repository-CLI builds can run directly from examples/game.
+
+CLI 3.6.0 preserves constructor names in development and release
+engine/namespace bundles so Theme lookup also works for self-referencing
+classes such as Scroller. Published CLI 3.5.0 lacks the development correction.
+
+`tools/default-ui-assets` contains editable SVG geometry and the reproducible
+PNG/atlas generator. It uses registry `@kurot/atlas@0.1.0` only as private
+repository tooling. CLI and runtime SDKs gain no atlas dependency. See its
+[maintenance instructions](../../../tools/default-ui-assets/README.md).
+
+Core 2.5.0 must be published before CLI 3.6.0.
+UI/Game/document/runtime need no incidental release; existing 1× consumers keep
+their behavior. See [density units and adoption](../../core/docs/texture-density.md).
+Existing projects keep their own skins, resource keys and startup code. New
+scaffolds receive this kit after the supporting Core and CLI publications;
+installing a new CLI does not rewrite an existing project's resources.

package/docs/game-template.md

@@ -1,12 +1,12 @@
 # Project styles and languages in the game template
 
-CLI 3.2.1 is published with this template update. It adds
-project-owned initialization without changing Core/UI APIs or migrating existing
-projects. The empty template stays minimal.
+Project-owned style/font/language initialization was introduced in CLI 3.2.1
+and remains in CLI 3.6.0 (pending publication). Existing projects keep their own startup
+code and HTML; the empty template stays minimal.
 
 ## Files
 
-- resource/config/style.json declares the primary font role and disabled-text color.
+- resource/config/style.json declares the primary font role and skin text colors.
 - resource/assets/fonts contains unmodified Chakra Petch regular (400) and bold (700)
   files, with OFL.txt. Source: [Google Fonts](https://github.com/google/fonts/tree/main/ofl/chakrapetch).
 - resource/config/locale.json enables English and selects en_US by default.
@@ -28,8 +28,32 @@ This ordering includes loading-screen Labels in the project font. The loading
 screen's startup messages stay in English because translations are not loaded yet.
 Templates do not implement live font/theme/language replacement.
 
+## HTML brand splash
+
+This splash is included in CLI 3.6.0, pending publication; npm CLI 3.5.0 lacks it.
+
+The game template's `web/index.html` presents `web/logo.png` beneath a small
+"Made with" caption. The mascot makes a gentle entrance, then repeats a playful
+hop and sway every 3.2 seconds while the entry module loads. Sparkles and a soft
+blue glow follow the loop. The splash has no loading text or progress indicator;
+the application's Preloader owns resource progress. Animations stop when the
+browser requests reduced motion. The logo size follows both viewport width and
+height for small screens and landscape.
+
+The HTML overlay fades out after the entry module evaluates, without a minimum
+display time or a wait for the entrance animation to finish. It does not wait
+for project font or resource loading. Customize the branding directly in the
+project's HTML. This template update applies to newly scaffolded game projects;
+existing project HTML is project-owned.
+
 ## Change fonts and colors
 
+The CLI 3.6.0 [default KUI skins](default-ui-skins.md) use Kurot-owned textures
+under resource/assets/ui/kui and a matching color palette. Registry CLI 3.5.0
+does not include this skin refresh. Skin state text colors compile from the
+project stylesheet; texture colors are baked into the PNG, without live palette
+switching. Templates inherit project fonts and retain the existing licensed files.
+
 Font keys such as primary produce stable aliases such as kurot-primary. Replace
 files and update style.json resource-relative paths, retaining weight 400 and
 unique weights. Default skins inherit the configured font; explicit Label fontFamily

package/docs/label-text-layout.md

@@ -1,6 +1,6 @@
 # Label text compilation
 
-CLI 3.4.0 consumes ui-document 0.12.x and compiles KUI text-fitting properties
+CLI 3.6.0 consumes ui-document ^0.13.0 and compiles KUI text-fitting properties
 through the existing UIDocument → SkinIR → ESM factory pipeline. The semantic
 document format remains version 2.
 
@@ -35,6 +35,8 @@ introduces build-time text measurement. See the
 ## Runtime boundary
 
 - The application must install UI `^3.1.0` and Core `^2.1.0` for shrinking.
+  These are the feature's original API minimums. Installing current UI 3.4.0
+  requires Core `^2.4.0` for that package's centered-flip contract.
   They remain application dependencies; CLI depends on the headless document
   package rather than importing the engine into the build process.
 - `textFit` is `none` by default or `shrink` for ordinary single-line Labels.

package/docs/text-components.md

@@ -1,9 +1,12 @@
 # BitmapLabel and RichLabel compilation
 
-CLI 3.4.0 uses published ui-document 0.12.0. Applications rendering these tags
+Native text compilation was introduced in CLI 3.4.0 with document 0.12.0.
+Current CLI 3.6.0 requires published ui-document ^0.13.0 and retains these tags.
+Applications rendering these tags
 must install UI `^3.3.0` and Core `^2.3.0`; Core 2.3.1 fixes unstyled blank
 rich-text line metrics. The CLI does not install or bundle its own Core/UI.
 Document format version 2 and existing project configuration are unchanged.
+Installing UI 3.4.0 requires Core ^2.4.0 for that package's centered-flip contract.
 
 ```xml
 <Skin xmlns="https://kurot.dev/ui/1" class="TextSkin" states="disabled">

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kurot/cli",
-	"version": "3.4.0",
+	"version": "3.6.0",
 	"description": "Kurot CLI - build tool for Kurot Editor KUI XML workflows",
 	"author": "Kelvin <kyia.x52@gmail.com>",
 	"license": "MIT",
@@ -28,7 +28,7 @@
 		"kurot": "tsx src/index.ts"
 	},
 	"dependencies": {
-		"@kurot/ui-document": "^0.12.0",
+		"@kurot/ui-document": "^0.13.0",
 		"commander": "^13.0.0",
 		"esbuild": "^0.25.0"
 	},

package/templates/game/resource/assets/ui/kui/kui.json

@@ -0,0 +1,240 @@
+{
+	"file": "kui.png",
+	"frames": {
+		"button_disabled": {
+			"x": 142,
+			"y": 6,
+			"w": 96,
+			"h": 96
+		},
+		"button_down": {
+			"x": 246,
+			"y": 6,
+			"w": 96,
+			"h": 96
+		},
+		"button_up": {
+			"x": 350,
+			"y": 6,
+			"w": 96,
+			"h": 96
+		},
+		"checkbox_disabled": {
+			"x": 198,
+			"y": 358,
+			"w": 56,
+			"h": 56
+		},
+		"checkbox_down": {
+			"x": 246,
+			"y": 286,
+			"w": 56,
+			"h": 56
+		},
+		"checkbox_selected": {
+			"x": 302,
+			"y": 214,
+			"w": 56,
+			"h": 56
+		},
+		"checkbox_selected_disabled": {
+			"x": 198,
+			"y": 422,
+			"w": 56,
+			"h": 56
+		},
+		"checkbox_selected_down": {
+			"x": 366,
+			"y": 214,
+			"w": 56,
+			"h": 56
+		},
+		"checkbox_up": {
+			"x": 430,
+			"y": 214,
+			"w": 56,
+			"h": 56
+		},
+		"chevron": {
+			"x": 326,
+			"y": 470,
+			"w": 32,
+			"h": 32
+		},
+		"chevron_disabled": {
+			"x": 366,
+			"y": 470,
+			"w": 32,
+			"h": 32
+		},
+		"chevron_open": {
+			"x": 406,
+			"y": 406,
+			"w": 32,
+			"h": 32
+		},
+		"close_disabled": {
+			"x": 230,
+			"y": 214,
+			"w": 64,
+			"h": 64
+		},
+		"close_down": {
+			"x": 126,
+			"y": 358,
+			"w": 64,
+			"h": 64
+		},
+		"close_up": {
+			"x": 126,
+			"y": 430,
+			"w": 64,
+			"h": 64
+		},
+		"panel": {
+			"x": 6,
+			"y": 6,
+			"w": 128,
+			"h": 128
+		},
+		"progress": {
+			"x": 262,
+			"y": 478,
+			"w": 24,
+			"h": 24
+		},
+		"progress_track": {
+			"x": 294,
+			"y": 478,
+			"w": 24,
+			"h": 24
+		},
+		"radio_disabled": {
+			"x": 262,
+			"y": 350,
+			"w": 56,
+			"h": 56
+		},
+		"radio_down": {
+			"x": 310,
+			"y": 278,
+			"w": 56,
+			"h": 56
+		},
+		"radio_selected": {
+			"x": 262,
+			"y": 414,
+			"w": 56,
+			"h": 56
+		},
+		"radio_selected_disabled": {
+			"x": 374,
+			"y": 278,
+			"w": 56,
+			"h": 56
+		},
+		"radio_selected_down": {
+			"x": 438,
+			"y": 278,
+			"w": 56,
+			"h": 56
+		},
+		"radio_up": {
+			"x": 326,
+			"y": 342,
+			"w": 56,
+			"h": 56
+		},
+		"scroll_thumb": {
+			"x": 390,
+			"y": 446,
+			"w": 16,
+			"h": 16
+		},
+		"slider_thumb": {
+			"x": 326,
+			"y": 406,
+			"w": 56,
+			"h": 56
+		},
+		"slider_thumb_disabled": {
+			"x": 390,
+			"y": 342,
+			"w": 56,
+			"h": 56
+		},
+		"surface_disabled_selected": {
+			"x": 142,
+			"y": 110,
+			"w": 96,
+			"h": 96
+		},
+		"surface_down": {
+			"x": 6,
+			"y": 142,
+			"w": 96,
+			"h": 96
+		},
+		"surface_selected": {
+			"x": 246,
+			"y": 110,
+			"w": 96,
+			"h": 96
+		},
+		"surface_selected_down": {
+			"x": 350,
+			"y": 110,
+			"w": 96,
+			"h": 96
+		},
+		"surface_up": {
+			"x": 6,
+			"y": 246,
+			"w": 96,
+			"h": 96
+		},
+		"switch_disabled_off": {
+			"x": 6,
+			"y": 350,
+			"w": 112,
+			"h": 64
+		},
+		"switch_disabled_on": {
+			"x": 6,
+			"y": 422,
+			"w": 112,
+			"h": 64
+		},
+		"switch_handle": {
+			"x": 454,
+			"y": 342,
+			"w": 48,
+			"h": 48
+		},
+		"switch_handle_disabled": {
+			"x": 454,
+			"y": 398,
+			"w": 48,
+			"h": 48
+		},
+		"switch_off": {
+			"x": 110,
+			"y": 214,
+			"w": 112,
+			"h": 64
+		},
+		"switch_on": {
+			"x": 126,
+			"y": 286,
+			"w": 112,
+			"h": 64
+		},
+		"track": {
+			"x": 198,
+			"y": 486,
+			"w": 16,
+			"h": 16
+		}
+	},
+	"resolution": 2
+}

package/templates/game/resource/config/style.json

@@ -4,13 +4,35 @@
 		"default": "primary",
 		"families": {
 			"primary": {
-				"fallback": ["Arial", "sans-serif"],
+				"fallback": [
+					"Arial",
+					"sans-serif"
+				],
 				"faces": [
-					{ "url": "assets/fonts/ChakraPetch-Regular.ttf", "weight": 400 },
-					{ "url": "assets/fonts/ChakraPetch-Bold.ttf", "weight": 700 }
+					{
+						"url": "assets/fonts/ChakraPetch-Regular.ttf",
+						"weight": 400
+					},
+					{
+						"url": "assets/fonts/ChakraPetch-Bold.ttf",
+						"weight": 700
+					}
 				]
 			}
 		}
 	},
-	"colors": { "disabled-text": "#999999" }
+	"colors": {
+		"disabled-text": "#7C8799",
+		"brand": "#1487E8",
+		"brand-pressed": "#0874CF",
+		"on-brand": "#071D30",
+		"canvas": "#EDF3FC",
+		"surface": "#FFFFFF",
+		"soft": "#F1F5FC",
+		"edge": "#DBE5F2",
+		"text": "#18273E",
+		"muted-text": "#64748B",
+		"disabled": "#EEF1F6",
+		"selected": "#E4F2FF"
+	}
 }

package/templates/game/resource/default.res.json

@@ -1,15 +1,82 @@
 {
 	"groups": [
 		{
-			"keys": "eui,locale_json,lang_en_US_properties",
+			"keys": "kui,locale_json,lang_en_US_properties",
 			"name": "preload"
 		}
 	],
 	"resources": [
 		{
-			"name": "eui",
+			"name": "kui",
 			"type": "sheet",
-			"url": "assets/ui/eui/eui.json"
+			"url": "assets/ui/kui/kui.json",
+			"subkeys": {
+				"button_up": {
+					"scale9grid": "16,16,16,16"
+				},
+				"button_down": {
+					"scale9grid": "16,16,16,16"
+				},
+				"button_disabled": {
+					"scale9grid": "16,16,16,16"
+				},
+				"surface_up": {
+					"scale9grid": "16,16,16,16"
+				},
+				"surface_down": {
+					"scale9grid": "16,16,16,16"
+				},
+				"surface_selected": {
+					"scale9grid": "16,16,16,16"
+				},
+				"surface_selected_down": {
+					"scale9grid": "16,16,16,16"
+				},
+				"surface_disabled_selected": {
+					"scale9grid": "16,16,16,16"
+				},
+				"panel": {
+					"scale9grid": "24,24,16,16"
+				},
+				"track": {
+					"scale9grid": "3,3,2,2"
+				},
+				"progress_track": {
+					"scale9grid": "5,5,2,2"
+				},
+				"progress": {
+					"scale9grid": "5,5,2,2"
+				},
+				"scroll_thumb": {
+					"scale9grid": "3,3,2,2"
+				},
+				"checkbox_up": {},
+				"checkbox_down": {},
+				"checkbox_disabled": {},
+				"checkbox_selected": {},
+				"checkbox_selected_down": {},
+				"checkbox_selected_disabled": {},
+				"radio_up": {},
+				"radio_down": {},
+				"radio_disabled": {},
+				"radio_selected": {},
+				"radio_selected_down": {},
+				"radio_selected_disabled": {},
+				"slider_thumb": {},
+				"slider_thumb_disabled": {},
+				"switch_off": {},
+				"switch_on": {},
+				"switch_disabled_off": {},
+				"switch_disabled_on": {},
+				"switch_handle": {},
+				"switch_handle_disabled": {},
+				"chevron": {},
+				"chevron_open": {},
+				"chevron_disabled": {},
+				"close_up": {},
+				"close_down": {},
+				"close_disabled": {}
+			}
 		},
 		{
 			"name": "locale_json",

package/templates/game/resource/ui/skins/ButtonSkin.kui.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.ButtonSkin" states="disabled,down,up" minHeight="50" minWidth="100">
-    <Image height="100%" scale9Grid="1,3,8,8" source="button_up_png" width="100%" alpha.disabled="0.5" source.down="button_down_png" />
-    <Label id="labelDisplay" bottom="8" left="8" right="8" size="20" textAlign="center" textColor="#FFFFFF" textColor.disabled="@style:colors:disabled-text" top="8" verticalAlign="middle" />
-    <Image id="iconDisplay" horizontalCenter="0" verticalCenter="0" />
+<Skin xmlns="https://kurot.dev/ui/1" class="skins.ButtonSkin" states="disabled,down,up" minHeight="48" minWidth="96">
+    <Image height="100%" width="100%" source="kui.button_up" source.down="kui.button_down" source.disabled="kui.button_disabled" touchEnabled="false" />
+    <Label id="labelDisplay" left="16" right="16" top="10" bottom="10" size="18" bold="true" multiline="false" textFit="shrink" minFontSize="14" textAlign="center" verticalAlign="middle" textColor="@style:colors:on-brand" textColor.disabled="@style:colors:disabled-text" top.down="12" bottom.down="8" />
+    <Image id="iconDisplay" horizontalCenter="0" verticalCenter="0" verticalCenter.down="2" />
 </Skin>

package/templates/game/resource/ui/skins/CheckBoxSkin.kui.xml

@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.CheckBoxSkin" states="disabled,disabledAndSelected,down,downAndSelected,up,upAndSelected">
+<Skin xmlns="https://kurot.dev/ui/1" class="skins.CheckBoxSkin" states="disabled,disabledAndSelected,down,downAndSelected,up,upAndSelected" minHeight="44">
     <Group height="100%" width="100%">
         <layout>
-            <HorizontalLayout verticalAlign="middle" />
+            <HorizontalLayout gap="10" paddingTop="8" paddingBottom="8" verticalAlign="middle" />
         </layout>
-        <Image alpha="1" fillMode="scale" source="checkbox_unselect_png" alpha.disabled="0.5" source.disabledAndSelected="checkbox_select_disabled_png" alpha.down="0.7" source.downAndSelected="checkbox_select_down_png" source.upAndSelected="checkbox_select_up_png" />
-        <Label id="labelDisplay" size="20" textAlign="center" textColor="#707070" verticalAlign="middle" />
+        <Image width="28" height="28" source="kui.checkbox_up" source.down="kui.checkbox_down" source.disabled="kui.checkbox_disabled" source.disabledAndSelected="kui.checkbox_selected_disabled" source.downAndSelected="kui.checkbox_selected_down" source.upAndSelected="kui.checkbox_selected" />
+        <Label id="labelDisplay" size="18" multiline="false" textColor="@style:colors:text" textColor.disabled="@style:colors:disabled-text" textColor.disabledAndSelected="@style:colors:disabled-text" verticalAlign="middle" />
     </Group>
 </Skin>

package/templates/game/resource/ui/skins/CloseButtonSkin.kui.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Skin xmlns="https://kurot.dev/ui/1" class="skins.CloseButtonSkin" states="disabled,down,up" minWidth="44" minHeight="44">
+    <Image width="32" height="32" horizontalCenter="0" verticalCenter="0" source="kui.close_up" source.down="kui.close_down" source.disabled="kui.close_disabled" />
+</Skin>

package/templates/game/resource/ui/skins/ComboBoxSkin.kui.xml

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.ComboBoxSkin" states="disabled,normal,open" minHeight="36" minWidth="100">
-    <Rect fillColor="#1A1A2E" height="36" strokeColor="#0F3460" strokeWeight="1" width="100%" fillColor.disabled="#16213E" strokeColor.disabled="#4A5459" fillColor.open="#16213E" strokeColor.open="#6C5CE7" />
-    <Label id="labelDisplay" height="36" left="10" right="36" size="14" textColor="#DFE6E9" top="0" verticalAlign="middle" textColor.disabled="@style:colors:disabled-text" />
-    <Label height="36" right="4" size="10" text="▼" textAlign="center" textColor="#636E72" top="0" verticalAlign="middle" width="24" textColor.open="#6C5CE7" />
-    <Scroller id="dropDown" height="180" left="0" right="0" top="36" visible="false">
+<Skin xmlns="https://kurot.dev/ui/1" class="skins.ComboBoxSkin" states="disabled,normal,open" minHeight="48" minWidth="160">
+    <Image height="48" top="0" width="100%" source="kui.surface_up" source.disabled="kui.button_disabled" source.open="kui.surface_selected" />
+    <Label id="labelDisplay" height="48" left="14" right="42" size="18" multiline="false" textFit="shrink" minFontSize="14" textColor="@style:colors:text" top="0" verticalAlign="middle" textColor.disabled="@style:colors:disabled-text" />
+    <Image height="16" width="16" right="14" top="16" source="kui.chevron" source.open="kui.chevron_open" source.disabled="kui.chevron_disabled" />
+    <Scroller id="dropDown" height="180" left="0" right="0" top="54" visible="false" includeInLayout="false">
         <List id="list" height="180" width="100%" />
     </Scroller>
 </Skin>