# M-winui-m3 — WinUI 3 → Fluent UI web components v3 → M3 ## Table générée Sources : aphrody-labs/microsoft-ui-xaml@58dbbe6e90ee · aphrody-labs/fluentui@8abb0781d7d8 (`@fluentui/web-components` 3.1.3, 42 balises) · M3 `md-elements.txt` (120 balises). Inventaire : 131 .idl (controls/dev, hors tests) + modèle XamlOM (Controls, Controls.Primitives) → 660 classes, 216 contrôles, 168 enums ; 184 .xaml → 757 styles ; clés de ressources de thème uniques : Default 2835, Light 2835, HighContrast 2836, (shared) 824, Dark 10. Détail : `winui-inventory.json`. | WinUI | Source | Propriétés (+DP) | Événements | Style XAML | Fluent UI web components v3 | M3 | | -------------------- | --------------------------------------------------------------------------------------- | ---------------: | ---------: | ---------- | ----------------------------------------------------- | ----------------------------------------------------------------- | | `Button` | `dxaml/xcp/tools/XCPTypesAutoGen/XamlOM/Model/Microsoft.UI.Xaml.Controls.cs` | 1 | 0 | oui | `fluent-button` | `md-filled-button`, `md-outlined-button`, `md-text-button` | | `HyperlinkButton` | `dxaml/xcp/tools/XCPTypesAutoGen/XamlOM/Model/Microsoft.UI.Xaml.Controls.cs` | 1 | 0 | oui | `fluent-anchor-button`, `fluent-link` | `md-link` | | `ToggleButton` | `dxaml/xcp/tools/XCPTypesAutoGen/XamlOM/Model/Microsoft.UI.Xaml.Controls.Primitives.cs` | 1 | 3 | oui | `fluent-toggle-button` | `md-filled-tonal-button` | | `DropDownButton` | `controls/dev/DropDownButton/DropDownButton.idl` | 0 | 0 | oui | `fluent-menu-button` | `md-split-button` | | `SplitButton` | `controls/dev/SplitButton/SplitButton.idl` | 6 | 1 | oui | — | `md-split-button` | | `CheckBox` | `dxaml/xcp/tools/XCPTypesAutoGen/XamlOM/Model/Microsoft.UI.Xaml.Controls.cs` | 0 | 0 | oui | `fluent-checkbox` | `md-checkbox` | | `RadioButton` | `dxaml/xcp/tools/XCPTypesAutoGen/XamlOM/Model/Microsoft.UI.Xaml.Controls.cs` | 1 | 0 | oui | `fluent-radio` | `md-radio` | | `RadioButtons` | `controls/dev/RadioButtons/RadioButtons.idl` | 16 | 1 | oui | `fluent-radio-group` | — | | `ToggleSwitch` | `dxaml/xcp/tools/XCPTypesAutoGen/XamlOM/Model/Microsoft.UI.Xaml.Controls.cs` | 9 | 1 | oui | `fluent-switch` | `md-switch` | | `Slider` | `dxaml/xcp/tools/XCPTypesAutoGen/XamlOM/Model/Microsoft.UI.Xaml.Controls.cs` | 12 | 0 | oui | `fluent-slider` | `md-slider` | | `ProgressBar` | `controls/dev/ProgressBar/ProgressBar.idl` | 7 | 0 | oui | `fluent-progress-bar` | `md-linear-progress` | | `ProgressRing` | `controls/dev/ProgressRing/ProgressRing.idl` | 9 | 0 | oui | `fluent-spinner` | `md-circular-progress` | | `TextBox` | `dxaml/xcp/tools/XCPTypesAutoGen/Modules/Controls/TextBox.cs` | 32 | 13 | oui | `fluent-text-input` | `md-filled-text-field`, `md-outlined-text-field` | | `RichEditBox` | `dxaml/xcp/tools/XCPTypesAutoGen/Modules/Controls/RichEditBox.cs` | 27 | 12 | oui | `fluent-textarea` | — | | `PasswordBox` | `dxaml/xcp/tools/XCPTypesAutoGen/Modules/Controls/PasswordBox.cs` | 16 | 4 | oui | `fluent-text-input` | `md-outlined-text-field` | | `NumberBox` | `controls/dev/NumberBox/NumberBox.idl` | 34 | 1 | oui | `fluent-text-input` | `md-outlined-text-field` | | `AutoSuggestBox` | `dxaml/xcp/tools/XCPTypesAutoGen/Modules/AutoSuggestBox/AutoSuggestBox.cs` | 13 | 3 | oui | — | `md-autocomplete`, `md-search-bar` | | `ComboBox` | `dxaml/xcp/tools/XCPTypesAutoGen/Modules/Controls/ComboBox.cs` | 19 | 3 | oui | `fluent-dropdown`, `fluent-option` | `md-filled-select`, `md-outlined-select`, `md-select-option` | | `ListBox` | `dxaml/xcp/tools/XCPTypesAutoGen/XamlOM/Model/Microsoft.UI.Xaml.Controls.cs` | 3 | 0 | oui | `fluent-listbox`, `fluent-option` | `md-list`, `md-list-item` | | `ListView` | `dxaml/xcp/tools/XCPTypesAutoGen/XamlOM/Model/Microsoft.UI.Xaml.Controls.cs` | 0 | 0 | oui | — | `md-list`, `md-list-item` | | `TreeView` | `controls/dev/TreeView/TreeView.idl` | 4 | 3 | oui | `fluent-tree`, `fluent-tree-item` | `md-tree`, `md-tree-item` | | `TabView` | `controls/dev/TabView/TabView.idl` | 34 | 9 | oui | `fluent-tablist`, `fluent-tab` | `md-tabs`, `md-primary-tab`, `md-secondary-tab` | | `SelectorBar` | `controls/dev/SelectorBar/SelectorBar.idl` | 4 | 1 | oui | `fluent-tablist`, `fluent-tab` | `md-tabs`, `md-secondary-tab` | | `Pivot` | `dxaml/xcp/tools/XCPTypesAutoGen/Modules/Phone/Phone.cs` | 14 | 5 | oui | `fluent-tablist`, `fluent-tab` | `md-tabs`, `md-primary-tab` | | `NavigationView` | `controls/dev/NavigationView/NavigationView.idl` | 49 | 3 | oui | `fluent-drawer`, `fluent-drawer-body` | `md-navigation-drawer`, `md-navigation-rail`, `md-navigation-bar` | | `ContentDialog` | `dxaml/xcp/tools/XCPTypesAutoGen/XamlOM/Model/Microsoft.UI.Xaml.Controls.cs` | 18 | 6 | oui | `fluent-dialog`, `fluent-dialog-body` | `md-dialog` | | `MenuFlyout` | `dxaml/xcp/tools/XCPTypesAutoGen/Modules/Controls/MenuFlyout.cs` | 2 | 0 | non | `fluent-menu`, `fluent-menu-list`, `fluent-menu-item` | `md-menu`, `md-menu-item`, `md-sub-menu` | | `MenuBar` | `controls/dev/MenuBar/MenuBar.idl` | 2 | 0 | oui | — | `md-menu`, `md-toolbar` | | `CommandBar` | `dxaml/xcp/tools/XCPTypesAutoGen/Modules/Controls/CommandBar.cs` | 7 | 1 | oui | — | `md-toolbar`, `md-top-app-bar` | | `ToolTip` | `dxaml/xcp/tools/XCPTypesAutoGen/XamlOM/Model/Microsoft.UI.Xaml.Controls.cs` | 6 | 2 | oui | `fluent-tooltip` | `md-tooltip` | | `TeachingTip` | `controls/dev/TeachingTip/TeachingTip.idl` | 41 | 4 | oui | — | `md-popover` | | `InfoBar` | `controls/dev/InfoBar/InfoBar.idl` | 27 | 3 | oui | `fluent-message-bar` | `md-banner`, `md-alert`, `md-snackbar` | | `InfoBadge` | `controls/dev/InfoBadge/InfoBadge.idl` | 6 | 0 | oui | `fluent-badge`, `fluent-counter-badge` | `md-badge` | | `Expander` | `controls/dev/Expander/Expander.idl` | 11 | 2 | oui | `fluent-accordion`, `fluent-accordion-item` | `md-expansion-panel`, `md-accordion` | | `PersonPicture` | `controls/dev/PersonPicture/PersonPicture.idl` | 21 | 0 | oui | `fluent-avatar` | `md-avatar` | | `RatingControl` | `controls/dev/RatingControl/RatingControl.idl` | 16 | 1 | oui | `fluent-rating-display` | `md-rating` | | `BreadcrumbBar` | `controls/dev/Breadcrumb/BreadcrumbBar.idl` | 4 | 1 | oui | — | `md-breadcrumbs` | | `PipsPager` | `controls/dev/PipsPager/PipsPager.idl` | 21 | 1 | oui | — | `md-paginator` | | `PagerControl` | `controls/dev/PagerControl/PagerControl.idl` | 39 | 1 | oui | — | `md-paginator` | | `CalendarDatePicker` | `dxaml/xcp/tools/XCPTypesAutoGen/Modules/Controls/Calendar/Calendar.cs` | 18 | 4 | oui | — | `md-date-picker` | | `DatePicker` | `dxaml/xcp/tools/XCPTypesAutoGen/XamlOM/Model/Microsoft.UI.Xaml.Controls.cs` | 15 | 2 | oui | — | `md-date-picker` | | `TimePicker` | `dxaml/xcp/tools/XCPTypesAutoGen/XamlOM/Model/Microsoft.UI.Xaml.Controls.cs` | 7 | 2 | oui | — | `md-time-picker` | | `TextBlock` | `dxaml/xcp/tools/XCPTypesAutoGen/Modules/Controls/TextBlock.cs` | 34 | 3 | oui | `fluent-text` | — | | `Image` | `dxaml/xcp/tools/XCPTypesAutoGen/XamlOM/Model/Microsoft.UI.Xaml.Controls.cs` | 3 | 2 | non | `fluent-image` | — | | `ColorPicker` | `controls/dev/ColorPicker/ColorPicker.idl` | 37 | 1 | oui | — | — | | `CalendarView` | `dxaml/xcp/tools/XCPTypesAutoGen/Modules/Controls/Calendar/Calendar.cs` | 77 | 2 | oui | — | `md-date-picker` | | `TitleBar` | `controls/dev/TitleBar/TitleBar.idl` | 20 | 2 | oui | — | `md-top-app-bar` | | `ItemsView` | `controls/dev/ItemsView/ItemsView.idl` | 21 | 2 | oui | — | `md-list` | | `SwipeControl` | `controls/dev/SwipeControl/SwipeControl.idl` | 8 | 0 | oui | — | — | | `TwoPaneView` | `controls/dev/TwoPaneView/TwoPaneView.idl` | 20 | 1 | oui | — | — | | `AnimatedIcon` | `controls/dev/AnimatedIcon/AnimatedIcon.idl` | 7 | 0 | non | — | — | | `ScrollView` | `controls/dev/ScrollView/ScrollView.idl` | 56 | 11 | oui | — | — | | `WebView2` | `controls/dev/WebView2/WebView2.idl` | 9 | 5 | non | — | — | Balises Fluent v3 sans contrôle WinUI associé dans la table : `fluent-compound-button`, `fluent-divider`, `fluent-field`, `fluent-label`. Contrôles WinUI de l'inventaire hors table : 163 (liste complète dans le JSON). Toutes les balises et tous les contrôles de la table existent dans les sources citées. ## Notes codex-winuim3 (WIP, arrêt de la flotte) ## Remplacement de WinUI 3 / XAML par Material 3 Inventaire de migration établi le 9 octobre 2026 à partir du [catalogue de contrôles Windows](https://learn.microsoft.com/en-us/windows/apps/develop/ui/controls/), des composants `md-*` présents dans le front aphrody (`m3-front`, `m3-react`) et des exemples de `packages/bun-webos`. Microsoft décrit plus de 45 contrôles WinUI. Le tableau couvre les contrôles et motifs courants; « existe » signifie qu’un composant Material Web correspondant est livré par aphrody M3, pas que l’apparence ou le comportement WinUI est reproduit à l’identique. | Contrôle ou motif WinUI 3 / XAML | Équivalent M3 existant | État | | ------------------------------------------------- | ------------------------------------------------------------------------------------------------ | --------------------------------------- | | Button, DropDownButton, SplitButton, ToggleButton | `md-filled-button`, `md-outlined-button`, `md-text-button`, `md-split-button`, `md-button-group` | existe | | AppBarButton / AppBarToggleButton | `md-icon-button`, `md-filled-icon-button`, `md-bottom-app-bar` | existe | | CheckBox | `md-checkbox` | existe | | ComboBox | `md-filled-select` ou `md-outlined-select` avec `md-select-option` | existe | | HyperlinkButton | `md-link` ou lien HTML | existe | | RadioButton | `md-radio` | existe | | RatingControl | `md-rating` | existe | | Slider | `md-slider` | existe | | ToggleSwitch | `md-switch` | existe | | TextBox / PasswordBox / NumberBox | `md-filled-text-field` ou `md-outlined-text-field` | existe | | AutoSuggestBox / recherche | `md-autocomplete`, `md-search-bar` | existe | | RichEditBox | aucun éditeur riche M3 livré | à créer | | ListView / ItemsRepeater | `md-list`, `md-list-item`, `md-virtual-scroller` | existe | | GridView | `md-grid-list`, `md-grid-tile` | existe | | TreeView | `md-tree`, `md-tree-item` | existe | | DataGrid / Table | `md-table` | existe | | NavigationView | `md-navigation-drawer`, `md-navigation-rail`, `md-navigation-bar` | existe | | TabView | `md-tabs`, `md-primary-tab`, `md-secondary-tab` | existe | | CommandBar / MenuBar | `md-top-app-bar`, `md-toolbar`, `md-menu` | existe | | BreadcrumbBar | `md-breadcrumbs` | existe | | ContentDialog / Dialog | `md-dialog` | existe | | Flyout / MenuFlyout / ContextFlyout | `md-menu`, `md-popover`, `md-tooltip` | existe | | DatePicker / CalendarDatePicker | `md-date-picker`, `md-date-range-picker` | existe | | TimePicker | `md-time-picker` | existe | | ColorPicker | thème dynamique M3 via `m3-theme`; pas de sélecteur de couleur M3 | à créer | | ProgressBar / ProgressRing | `md-linear-progress`, `md-circular-progress`, `md-loading-indicator` | existe | | InfoBar | `md-alert`, `md-banner`, `md-snackbar` | existe | | TeachingTip | aucun composant M3 dédié livré | à créer | | ToolTip | `md-tooltip` | existe | | Expander | `md-accordion`, `md-expansion-panel` | existe | | Card | `md-card`, `md-filled-card`, `md-outlined-card` | existe | | AppWindow / Window | fenêtre native créée par `Bun.WebView` | existe, capacités natives selon backend | Le catalogue `md-*` est chargé à la demande avec `@aphrody/m3-front` (`registerM3Component` ou `registerM3`). `@aphrody/m3-react` publie le manifeste des tags et leurs modules; les extensions aphrody sont livrées dans son catalogue. Les contrôles encore à créer sont des écarts réels, à couvrir par un nouveau composant ou un assemblage M3 accessible, pas par du XAML. ### Ressources de thème WinUI → Fluent 2 → M3 Source unique : `winuiResources` de [`packages/bun-fluent`](../../../packages/bun-fluent) (tokens Fluent 2 absorbés de `microsoft/fluentui` `packages/tokens`). `packages/bun-fluent/test/fluent.test.ts` vérifie que chaque clé existe dans `winui-inventory.json`, que chaque token Fluent existe dans `webLightTheme` et que chaque token M3 est écrit par le thème `m3` de `bun-plugin-tailwind`. `fluentWinuiResources()` produit le `ResourceDictionary` XAML (dictionnaires Light/Dark/HighContrast) qui applique ces valeurs dans une app `bun:winui`; `fluent:theme.css` les expose à Tailwind (`schemeImport`). `SystemAccentColor*` n'est pas dans les dictionnaires de thème du dépôt : l'accent Windows reste le seed M3 (section suivante). | Ressource WinUI | Token Fluent 2 | Valeur web clair / sombre | Token M3 | | ---------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | | `AccentFillColorDefaultBrush` | `colorBrandBackground` | `#0f6cbd` / `#115ea3` | `--md-sys-color-primary` | | `AccentFillColorSecondaryBrush` | `colorBrandBackgroundHover` | `#115ea3` / `#0f6cbd` | `--md-sys-color-primary` | | `AccentFillColorTertiaryBrush` | `colorBrandBackgroundPressed` | `#0c3b5e` / `#0c3b5e` | `--md-sys-color-primary` | | `AccentFillColorDisabledBrush` | `colorNeutralBackgroundDisabled` | `#f0f0f0` / `#141414` | `--md-sys-color-on-surface` | | `AccentTextFillColorPrimaryBrush` | `colorBrandForeground1` | `#0f6cbd` / `#479ef5` | `--md-sys-color-primary` | | `TextOnAccentFillColorPrimaryBrush` | `colorNeutralForegroundOnBrand` | `#ffffff` / `#ffffff` | `--md-sys-color-on-primary` | | `TextFillColorPrimaryBrush` | `colorNeutralForeground1` | `#242424` / `#ffffff` | `--md-sys-color-on-surface` | | `TextFillColorSecondaryBrush` | `colorNeutralForeground2` | `#424242` / `#d6d6d6` | `--md-sys-color-on-surface-variant` | | `TextFillColorTertiaryBrush` | `colorNeutralForeground3` | `#616161` / `#adadad` | `--md-sys-color-on-surface-variant` | | `TextFillColorDisabledBrush` | `colorNeutralForegroundDisabled` | `#bdbdbd` / `#5c5c5c` | `--md-sys-color-on-surface` | | `ApplicationPageBackgroundThemeBrush` | `colorNeutralBackground2` | `#fafafa` / `#1f1f1f` | `--md-sys-color-surface` | | `SolidBackgroundFillColorBaseBrush` | `colorNeutralBackground2` | `#fafafa` / `#1f1f1f` | `--md-sys-color-surface` | | `LayerFillColorDefaultBrush` | `colorNeutralBackground3` | `#f5f5f5` / `#141414` | `--md-sys-color-surface-container` | | `CardBackgroundFillColorDefaultBrush` | `colorNeutralCardBackground` | `#fafafa` / `#333333` | `--md-sys-color-surface-container-low` | | `ControlFillColorDefaultBrush` | `colorNeutralBackground1` | `#ffffff` / `#292929` | `--md-sys-color-surface-container-highest` | | `ControlFillColorSecondaryBrush` | `colorNeutralBackground1Hover` | `#f5f5f5` / `#3d3d3d` | `--md-sys-color-surface-container-high` | | `ControlFillColorTertiaryBrush` | `colorNeutralBackground1Pressed` | `#e0e0e0` / `#1f1f1f` | `--md-sys-color-surface-container` | | `ControlFillColorDisabledBrush` | `colorNeutralBackgroundDisabled` | `#f0f0f0` / `#141414` | `--md-sys-color-surface-container-low` | | `SubtleFillColorSecondaryBrush` | `colorSubtleBackgroundHover` | `#f5f5f5` / `#383838` | `--md-sys-color-surface-container-high` | | `SubtleFillColorTertiaryBrush` | `colorSubtleBackgroundPressed` | `#e0e0e0` / `#2e2e2e` | `--md-sys-color-surface-container` | | `SmokeFillColorDefaultBrush` | `colorBackgroundOverlay` | `rgba(0, 0, 0, 0.4)` / `rgba(0, 0, 0, 0.5)` | `--md-sys-color-scrim` | | `ControlStrokeColorDefaultBrush` | `colorNeutralStroke1` | `#d1d1d1` / `#666666` | `--md-sys-color-outline-variant` | | `ControlStrongStrokeColorDefaultBrush` | `colorNeutralStrokeAccessible` | `#616161` / `#adadad` | `--md-sys-color-outline` | | `CardStrokeColorDefaultBrush` | `colorNeutralStroke2` | `#e0e0e0` / `#525252` | `--md-sys-color-outline-variant` | | `DividerStrokeColorDefaultBrush` | `colorNeutralStroke2` | `#e0e0e0` / `#525252` | `--md-sys-color-outline-variant` | | `FocusStrokeColorOuterBrush` | `colorStrokeFocus2` | `#000000` / `#ffffff` | `--md-sys-color-secondary` | | `FocusStrokeColorInnerBrush` | `colorStrokeFocus1` | `#ffffff` / `#000000` | — | | `SystemFillColorCriticalBrush` | `colorStatusDangerForeground1` | `#b10e1c` / `#dc626d` | `--md-sys-color-error` | | `SystemFillColorCriticalBackgroundBrush` | `colorStatusDangerBackground1` | `#fdf3f4` / `#3b0509` | `--md-sys-color-error-container` | | `SystemFillColorSuccessBrush` | `colorStatusSuccessForeground1` | `#0e700e` / `#54b054` | — | | `SystemFillColorSuccessBackgroundBrush` | `colorStatusSuccessBackground1` | `#f1faf1` / `#052505` | — | | `SystemFillColorCautionBrush` | `colorStatusWarningForeground1` | `#bc4b09` / `#faa06b` | — | | `SystemFillColorCautionBackgroundBrush` | `colorStatusWarningBackground1` | `#fff9f5` / `#4a1e04` | — | | `ControlCornerRadius` | `borderRadiusMedium` | `4px` / `4px` | `--md-sys-shape-corner-extra-small` | | `OverlayCornerRadius` | `borderRadiusXLarge` | `8px` / `8px` | `--md-sys-shape-corner-small` | | `ContentControlThemeFontFamily` | `fontFamilyBase` | `'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif` / `'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif` | `--md-ref-typeface-plain` | | `CaptionTextBlockFontSize` | `fontSizeBase200` | `12px` / `12px` | `--md-sys-typescale-body-small-size` | | `BodyTextBlockFontSize` | `fontSizeBase300` | `14px` / `14px` | `--md-sys-typescale-body-medium-size` | | `BodyLargeTextBlockFontSize` | `fontSizeBase400` | `16px` / `16px` | `--md-sys-typescale-body-large-size` | | `SubtitleTextBlockFontSize` | `fontSizeBase500` | `20px` / `20px` | `--md-sys-typescale-title-large-size` | | `TitleTextBlockFontSize` | `fontSizeHero700` | `28px` / `28px` | `--md-sys-typescale-headline-medium-size` | | `TitleLargeTextBlockFontSize` | `fontSizeHero900` | `40px` / `40px` | `--md-sys-typescale-display-small-size` | | `DisplayTextBlockFontSize` | `fontSizeHero1000` | `68px` / `68px` | `--md-sys-typescale-display-large-size` | | `ControlFasterAnimationDuration` | `durationFaster` | `100ms` / `100ms` | `--md-sys-motion-duration-short2` | | `ControlFastAnimationDuration` | `durationFast` | `150ms` / `150ms` | `--md-sys-motion-duration-short3` | | `ControlNormalAnimationDuration` | `durationGentle` | `250ms` / `250ms` | `--md-sys-motion-duration-medium1` | | `ControlFastOutSlowInKeySpline` | `curveDecelerateMid` | `cubic-bezier(0,0,0,1)` / `cubic-bezier(0,0,0,1)` | `--md-sys-motion-easing-emphasized-decelerate` | ### WinUI 3 natif depuis Bun `bun:winui` (`src/js/bun/winui.ts`, doc `docs/runtime/winui.mdx`) charge le Windows App Runtime installé et crée de vraies fenêtres XAML sur le thread JS. Les 11 contrôles marqués absents auparavant (TextBox, RichEditBox, PasswordBox, AutoSuggestBox, ComboBox, Pivot, MenuFlyout, CommandBar, CalendarDatePicker, TextBlock, CalendarView) sont chargés par `XamlReader.Load` dans `test/js/bun/winui/winui-window.fixture.ts`, qui vérifie l'arbre XAML, des propriétés et des événements. Exemple : [`apps/desktop/examples/winui-app`](../../../apps/desktop/examples/winui-app). ### Fenêtre et matériaux Windows - **Mica / Acrylic** : ce sont des matériaux d’arrière-plan de la fenêtre et du système Windows, pas des composants M3. Le backend natif Windows fournit le backdrop; le contenu transparent de la WebView laisse apparaître ce fond. Les surfaces de contenu M3 (`md-surface`, cartes et rôles `surface-container-*`) forment les couches au-dessus. Une couleur M3 opaque ou un `backdrop-filter` ne constitue pas Mica/Acrylic et ne doit pas être présenté comme tel. Mica est une couche de base; Microsoft recommande de ne l’appliquer qu’une fois et de garder transparents les niveaux qui doivent la laisser voir ([guide Mica](https://learn.microsoft.com/en-us/windows/apps/design/style/mica)). - **Titre personnalisé** : le backend de fenêtre conserve les boutons système, la région de déplacement et les zones interactives non clientes; le contenu HTML peut fournir le titre et les commandes visuelles M3. Une barre de titre entièrement personnalisée doit préserver l’accessibilité clavier et le hit-testing natif ([guide des barres de titre](https://learn.microsoft.com/en-us/windows/apps/develop/title-bar?tabs=winui3)). - **Snap layouts** : c’est une capacité de la fenêtre Windows, indépendante des composants M3. Garder un bouton d’agrandissement système et son hit-test natif; avec une barre de titre personnalisée, vérifier explicitement le menu Snap sur Windows 11 ([guide Snap layouts](https://learn.microsoft.com/en-us/windows/apps/desktop/modernize/ui/apply-snap-layout-menu)). ### Thème Windows et couleur d’accent Le thème clair/sombre du système choisit le mode M3 (`m3-theme mode="auto"`). Si le backend Windows expose la couleur d’accent, la transmettre comme **seed** à `` et laisser les utilitaires de couleur aphrody dériver les rôles M3 (`primary`, `on-primary`, `primary-container`, etc.); ne pas recopier une palette Fluent dans les composants. Recalculer le seed lorsque les réglages Windows changent et maintenir les contrastes des rôles. Microsoft documente `SystemAccentColor`, ses nuances et `UISettings.GetColorValue` ([thème et accent Windows](https://learn.microsoft.com/en-us/windows/apps/develop/ui/theming)). `bun:windows.theme` fournit ces intégrations : `get()` lit le mode, `SystemAccentColor` et ses nuances (`AccentPalette`), `watch()` signale leurs changements, `applyWindow(hwnd, { backdrop: "mica", dark })` applique Mica/Acrylic et la barre de titre sombre via `DwmSetWindowAttribute`. Sur Linux, l’exemple n’importe pas ces capacités. ### WebView La WebView repose sur l’implémentation partagée `packages/bun-webview-core`. Aucun code de cette couche n’est dupliqué ici. ### Références - [Microsoft Learn — contrôles Windows](https://learn.microsoft.com/en-us/windows/apps/develop/ui/controls/) - [Microsoft Learn — Mica](https://learn.microsoft.com/en-us/windows/apps/design/style/mica) - [Microsoft Learn — personnalisation du titre](https://learn.microsoft.com/en-us/windows/apps/develop/title-bar?tabs=winui3) - [Microsoft Learn — Snap layouts](https://learn.microsoft.com/en-us/windows/apps/desktop/modernize/ui/apply-snap-layout-menu) - [Microsoft Learn — thème et couleur d’accent](https://learn.microsoft.com/en-us/windows/apps/develop/ui/theming) - [microsoft/microsoft-ui-xaml — contrôles et sources WinUI](https://github.com/microsoft/microsoft-ui-xaml/tree/main/controls) - [Catalogue aphrody M3 — m3-front](https://github.com/aphrody-labs/aphrody-m3/tree/main/packages/m3-front) - [Manifeste des éléments aphrody M3](https://github.com/aphrody-labs/aphrody-m3/blob/main/packages/m3-react/md-elements.txt)