@pstrikez/fluent-winui-theme 0.0.0-stage → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/LICENSE +22 -0
  2. package/NOTICE.md +46 -0
  3. package/README.md +140 -2
  4. package/dist/base.css +9 -0
  5. package/dist/components/nav-selection-indicator.d.ts +7 -0
  6. package/dist/components/ui/back-navigation-button.d.ts +10 -0
  7. package/dist/components/ui/badge-hue.d.ts +21 -0
  8. package/dist/components/ui/chip.d.ts +11 -0
  9. package/dist/components/ui/choice-group.d.ts +25 -0
  10. package/dist/components/ui/code-block.d.ts +13 -0
  11. package/dist/components/ui/confirm-dialog.d.ts +16 -0
  12. package/dist/components/ui/copy-to-clipboard.d.ts +1 -0
  13. package/dist/components/ui/danger.d.ts +4 -0
  14. package/dist/components/ui/dashboard-page-header.d.ts +7 -0
  15. package/dist/components/ui/dialog-shell.d.ts +24 -0
  16. package/dist/components/ui/empty-state.d.ts +17 -0
  17. package/dist/components/ui/error-shell.css.d.ts +1 -0
  18. package/dist/components/ui/error-shell.d.ts +11 -0
  19. package/dist/components/ui/fluent-form-controls.d.ts +27 -0
  20. package/dist/components/ui/http-badge.d.ts +8 -0
  21. package/dist/components/ui/info-label.d.ts +3 -0
  22. package/dist/components/ui/layout.d.ts +9 -0
  23. package/dist/components/ui/loading-screen.css.d.ts +1 -0
  24. package/dist/components/ui/loading-screen.d.ts +6 -0
  25. package/dist/components/ui/masked-icon.d.ts +5 -0
  26. package/dist/components/ui/multiselect-combobox.d.ts +21 -0
  27. package/dist/components/ui/open-link-label.d.ts +4 -0
  28. package/dist/components/ui/outcome-message-bar.d.ts +9 -0
  29. package/dist/components/ui/outcome-toast.d.ts +14 -0
  30. package/dist/components/ui/panel.d.ts +12 -0
  31. package/dist/components/ui/prism.d.ts +30 -0
  32. package/dist/components/ui/progress-ring.d.ts +8 -0
  33. package/dist/components/ui/reorder-list.d.ts +55 -0
  34. package/dist/components/ui/resource-list.d.ts +33 -0
  35. package/dist/components/ui/route-link.d.ts +19 -0
  36. package/dist/components/ui/row-title.d.ts +7 -0
  37. package/dist/components/ui/scroll-area.d.ts +44 -0
  38. package/dist/components/ui/secret-input.d.ts +7 -0
  39. package/dist/components/ui/section-header.d.ts +11 -0
  40. package/dist/components/ui/settings-card.d.ts +36 -0
  41. package/dist/components/ui/status-badge.d.ts +8 -0
  42. package/dist/components/ui/switch-setting.d.ts +7 -0
  43. package/dist/components/ui/table-actions.d.ts +13 -0
  44. package/dist/components/ui/table-columns.d.ts +3 -0
  45. package/dist/components/ui/tooltip-icon-button.d.ts +17 -0
  46. package/dist/components/ui/truncation-tooltip.d.ts +27 -0
  47. package/dist/components/ui/use-copy-to-clipboard.d.ts +13 -0
  48. package/dist/components/ui/use-dialog-invocation.d.ts +11 -0
  49. package/dist/components/ui/use-discard-guard.d.ts +19 -0
  50. package/dist/document.css.d.ts +1 -0
  51. package/dist/fluent.d.ts +2 -0
  52. package/dist/font-stacks.d.ts +2 -0
  53. package/dist/fonts/LICENSE-Meslo-LG.txt +201 -0
  54. package/dist/fonts/meslo-lg-s-400-italic.generated.woff2 +0 -0
  55. package/dist/fonts/meslo-lg-s-400-normal.generated.woff2 +0 -0
  56. package/dist/fonts/meslo-lg-s-700-italic.generated.woff2 +0 -0
  57. package/dist/fonts/meslo-lg-s-700-normal.generated.woff2 +0 -0
  58. package/dist/i18n/translation.d.ts +49 -0
  59. package/dist/index.d.ts +60 -0
  60. package/dist/index.js +8945 -0
  61. package/dist/index.js.map +7 -0
  62. package/dist/lib/color.d.ts +9 -0
  63. package/dist/lib/legacy-css-color.d.ts +1 -0
  64. package/dist/lib/reduced-motion.d.ts +1 -0
  65. package/dist/lib/use-media-query.d.ts +2 -0
  66. package/dist/shell/app-shell.d.ts +30 -0
  67. package/dist/shell/gradient-background.css.d.ts +1 -0
  68. package/dist/shell/gradient-background.d.ts +2 -0
  69. package/dist/shell/navigation-pane.d.ts +42 -0
  70. package/dist/shell/navigation-progress.css.d.ts +1 -0
  71. package/dist/shell/navigation-progress.d.ts +3 -0
  72. package/dist/shell/page-frames.d.ts +24 -0
  73. package/dist/theme-mode.d.ts +17 -0
  74. package/dist/theme.d.ts +938 -0
  75. package/dist/winui/appearance.d.ts +11 -0
  76. package/dist/winui/controls/accordion.css.d.ts +1 -0
  77. package/dist/winui/controls/badge-tag.css.d.ts +1 -0
  78. package/dist/winui/controls/button.css.d.ts +1 -0
  79. package/dist/winui/controls/card.css.d.ts +1 -0
  80. package/dist/winui/controls/checkbox-surface.d.ts +25 -0
  81. package/dist/winui/controls/choice.css.d.ts +4 -0
  82. package/dist/winui/controls/color-picker.css.d.ts +1 -0
  83. package/dist/winui/controls/dialog.css.d.ts +1 -0
  84. package/dist/winui/controls/drawer.css.d.ts +1 -0
  85. package/dist/winui/controls/field.css.d.ts +3 -0
  86. package/dist/winui/controls/list.css.d.ts +1 -0
  87. package/dist/winui/controls/menu.css.d.ts +1 -0
  88. package/dist/winui/controls/message-bar.css.d.ts +1 -0
  89. package/dist/winui/controls/nav.css.d.ts +1 -0
  90. package/dist/winui/controls/popover.css.d.ts +1 -0
  91. package/dist/winui/controls/progress.css.d.ts +1 -0
  92. package/dist/winui/controls/reveal.d.ts +11 -0
  93. package/dist/winui/controls/scrollbar.css.d.ts +1 -0
  94. package/dist/winui/controls/select.css.d.ts +1 -0
  95. package/dist/winui/controls/selection-pill.d.ts +1 -0
  96. package/dist/winui/controls/selectors.d.ts +48 -0
  97. package/dist/winui/controls/severity.d.ts +24 -0
  98. package/dist/winui/controls/switch.css.d.ts +1 -0
  99. package/dist/winui/controls/table.css.d.ts +1 -0
  100. package/dist/winui/controls/tabs.css.d.ts +1 -0
  101. package/dist/winui/controls/text-input.css.d.ts +1 -0
  102. package/dist/winui/controls/text.css.d.ts +1 -0
  103. package/dist/winui/controls/toast.css.d.ts +1 -0
  104. package/dist/winui/controls/toolbar.css.d.ts +1 -0
  105. package/dist/winui/controls/tooltip.css.d.ts +1 -0
  106. package/dist/winui/focus-rect.css.d.ts +2 -0
  107. package/dist/winui/index.d.ts +1 -0
  108. package/dist/winui/motion.d.ts +29 -0
  109. package/dist/winui/page-transition.css.d.ts +2 -0
  110. package/dist/winui/presence.d.ts +3 -0
  111. package/dist/winui/progress-indeterminate.css.d.ts +1 -0
  112. package/dist/winui/reposition.d.ts +8 -0
  113. package/dist/winui/reset.css.d.ts +1 -0
  114. package/dist/winui/switch-drag.d.ts +2 -0
  115. package/dist/winui/theme.d.ts +3 -0
  116. package/dist/winui/toaster.d.ts +2 -0
  117. package/dist/winui/tokens.d.ts +1 -0
  118. package/dist/winui/wrap.d.ts +3 -0
  119. package/dist/winui.css +1 -0
  120. package/package.json +76 -4
@@ -0,0 +1,11 @@
1
+ import * as React from 'react';
2
+ import type { FluentComponents } from './wrap';
3
+ export declare const winuiAppearanceAttribute = "data-winui-appearance";
4
+ export declare const winuiIntentAttribute = "data-winui-intent";
5
+ export declare const winuiCheckedAttribute = "data-winui-checked";
6
+ export type SeverityIntent = 'error' | 'warning' | 'success' | 'info';
7
+ export declare const severityMark: (intent: SeverityIntent) => {
8
+ children: React.ReactElement<{}, string | React.JSXElementConstructor<any>>;
9
+ "data-winui-severity-mark": string;
10
+ };
11
+ export declare const withWinuiAppearance: (components: FluentComponents) => FluentComponents;
@@ -0,0 +1 @@
1
+ export declare const accordionCss: string;
@@ -0,0 +1 @@
1
+ export declare const badgeTagCss = "\n/* The InfoBadge style sets a FontSize on its value TextBlock and no FontWeight,\n so the badge reads at the text weight around it rather than Fluent's semibold.\n InfoBadge's geometry is deliberately not transcribed: its bounds (MinWidth 4,\n MaxHeight 16, InfoBadgeValueFontSize 11) sink the floor under every Fluent\n size step and cap the box at 16px against the reset's 20px, which would\n replace Fluent's size ramp rather than restyle it.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/InfoBadge/InfoBadge_themeresources.xaml#L82\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/InfoBadge/InfoBadge_themeresources.xaml#L8-L15 */\n.fui-Badge.fui-Badge {\n font-weight: var(--fontWeightRegular);\n}\n\n/* The chip body. The InteractionTag halves are siblings rather than\n descendants, so the dismiss half reaches these tokens only by being named\n here. The outline appearance needs no fill row of its own: it reads\n --colorSubtleBackground and the steps beside it, which ../theme.ts already\n carries over for the whole library. Button holds its border on\n ControlStrokeColorDefault through disabled and SplitButton draws its divider\n with that brush in every state, where Fluent steps down to the strong\n disabled stroke.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Button_themeresources.xaml#L128\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Button_themeresources.xaml#L131-L132\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Button_themeresources.xaml#L136-L139\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/SplitButton/SplitButton_themeresources.xaml#L26-L27\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L25-L27 */\n.fui-Tag.fui-Tag,\n.fui-InteractionTagPrimary.fui-InteractionTagPrimary,\n.fui-InteractionTagSecondary.fui-InteractionTagSecondary {\n --colorNeutralBackground3: var(--winui-control-fill-default);\n --colorNeutralBackgroundDisabled: var(--winui-control-fill-disabled);\n --colorNeutralForeground2: var(--winui-text-fill-primary);\n --colorNeutralStrokeDisabled: var(--winui-control-stroke-default);\n}\n\n/* Button flattens its stroke to ControlStrokeColorDefault under a press and\n while disabled, and holds the elevation border either side of that. Stated\n because Fluent's own filled chip is borderless and its outline chip carries\n one flat neutral stroke through every state, so neither half of the ramp\n arrives on its own.\n\n A chip that carries an identity colour publishes it as --fwt-chip-stroke\n and keeps it through both steps: the flattening says pressed, and a chip whose\n edge is the only thing naming its provider has nothing left to say it with.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Button_themeresources.xaml#L129-L132 */\n.fui-Tag.fui-Tag:active,\n.fui-Tag.fui-Tag[disabled],\n.fui-InteractionTagPrimary.fui-InteractionTagPrimary:active,\n.fui-InteractionTagPrimary.fui-InteractionTagPrimary[disabled],\n.fui-InteractionTagSecondary.fui-InteractionTagSecondary:active,\n.fui-InteractionTagSecondary.fui-InteractionTagSecondary[disabled] {\n border-color: var(--fwt-chip-stroke, var(--winui-control-stroke-default));\n}\n\n/* The pressable halves take Button's interaction ramp: the label holds at the\n primary text fill on hover and drops to secondary under a press, where Fluent\n darkens on hover and tints the outline appearance's glyph toward the brand.\n The primary half reads the plain Foreground2 steps and the dismiss half the\n Brand-suffixed ones for the same label, so both pairs are stated. The selected\n fill's own steps -- the rest accent at 90% and 80% rather than separate hues\n -- arrive through ../theme.ts with the rest of the accent ramp.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Button_themeresources.xaml#L128-L134\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Button_themeresources.xaml#L119-L121 */\n.fui-InteractionTagPrimary.fui-InteractionTagPrimary,\n.fui-InteractionTagSecondary.fui-InteractionTagSecondary {\n --colorNeutralBackground3Hover: var(--winui-control-fill-secondary);\n --colorNeutralBackground3Pressed: var(--winui-control-fill-tertiary);\n --colorNeutralForeground2Hover: var(--winui-text-fill-primary);\n --colorNeutralForeground2Pressed: var(--winui-text-fill-secondary);\n --colorNeutralForeground2BrandHover: var(--winui-text-fill-primary);\n --colorNeutralForeground2BrandPressed: var(--winui-text-fill-secondary);\n}\n\n/* The dismiss glyph is a subtle button in WinUI terms \u2014 InfoBar builds its\n close affordance that way \u2014 so it runs the neutral text ramp rather than\n Fluent's compound brand.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/InfoBar/InfoBar_themeresources.xaml#L88-L95\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Button_themeresources.xaml#L119-L121 */\n.fui-Tag__dismissIcon.fui-Tag__dismissIcon {\n --colorCompoundBrandForeground1Hover: var(--winui-text-fill-primary);\n --colorCompoundBrandForeground1Pressed: var(--winui-text-fill-secondary);\n}\n\n/* The selected chip's stroke. WinUI draws the on-accent elevation gradient as a\n three-term border colour where Fluent draws one flat brand stroke; the accent\n fill under it arrives through ../theme.ts, which carries Fluent's brand ramps\n onto the accent ones. A TagGroup with the listbox role writes the selection as\n aria-selected instead, so both attributes name the same state. The sibling\n selector sits in :where() so the dismiss half's states stack in the same order\n the primary half's do rather than being lifted over the focus visual by the\n extra compound.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/SplitButton/SplitButton_themeresources.xaml#L9\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/SplitButton/SplitButton_themeresources.xaml#L28 */\n.fui-Tag.fui-Tag[aria-pressed='true'],\n.fui-Tag.fui-Tag[aria-selected='true'],\n.fui-InteractionTagPrimary.fui-InteractionTagPrimary[aria-pressed='true'],\n:where(.fui-InteractionTagPrimary[aria-pressed='true']) + .fui-InteractionTagSecondary.fui-InteractionTagSecondary {\n border-color: var(--winui-accent-control-elevation-border-color);\n}\n\n/* A plain Tag is a span, so Fluent ships it no pointer atoms at all and there is\n no token to re-point for the two steps a checked ToggleButton takes; both\n fills are stated outright.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ToggleButton_themeresources.xaml#L12\n https://github.com/microsoft/fluentui/blob/6dee27b023a2d989f032b4adacb2135d336a67fb/packages/react-components/react-tags/library/src/components/Tag/useTag.ts#L43 */\n.fui-Tag.fui-Tag[aria-pressed='true']:not([disabled]):hover,\n.fui-Tag.fui-Tag[aria-selected='true']:not([disabled]):hover {\n background-color: var(--winui-accent-fill-secondary);\n}\n\n/* https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ToggleButton_themeresources.xaml#L13 */\n.fui-Tag.fui-Tag[aria-pressed='true']:not([disabled]):active,\n.fui-Tag.fui-Tag[aria-selected='true']:not([disabled]):active {\n background-color: var(--winui-accent-fill-tertiary);\n}\n\n/* WinUI draws two concentric focus rings, 2px over 1px. Fluent draws a single\n 2px outline in --colorStrokeFocus2 flush against the border box, outside the\n chip's own 1px border, so recolouring that outline to the outer stroke and\n the border to the inner one lands the 2/1 pair with no width restated. The\n price is the chip's own edge, spent on the inner ring while focused; WinUI\n keeps its edge, because Button pushes the focus visual clear of the control\n with FocusVisualMargin -3. The border colour is repeated rather than\n inherited because this has to outrank the selected outline above.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/components/FocusRect/FocusRectManager.cpp#L173-L182\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/components/FocusRect/FocusRectManager.cpp#L383-L384\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/components/FocusRect/FocusRectManager.cpp#L441-L452\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Button_themeresources.xaml#L167\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L258-L259\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L54-L55 */\n.fui-Tag.fui-Tag[data-fui-focus-visible],\n.fui-InteractionTagPrimary.fui-InteractionTagPrimary[data-fui-focus-visible],\n.fui-InteractionTagSecondary.fui-InteractionTagSecondary[data-fui-focus-visible] {\n border-color: var(--winui-focus-stroke-inner);\n}\n\n/* The accent outline drops away entirely under a press, and the label dims\n with it: AccentButtonForegroundPressed is TextOnAccentFillColorSecondary,\n where Fluent holds the on-accent primary through the press. This sits after\n the focus visual because WinUI's Pressed visual state is entered over the\n focused one and repaints the border either way. The press excludes a\n disabled chip: WinUI cannot leave Disabled for a pointer state, and a rule\n settling that by source order alone breaks the moment either selector gains\n a component. The guard names the attribute rather than :disabled, because\n Fluent renders a non-dismissible Tag as a span, which no form pseudo-class\n reaches.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Button_themeresources.xaml#L109\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Button_themeresources.xaml#L113\n https://github.com/microsoft/fluentui/blob/6dee27b023a2d989f032b4adacb2135d336a67fb/packages/react-components/react-tags/library/src/components/Tag/useTag.ts#L43 */\n.fui-Tag.fui-Tag[aria-pressed='true']:active:not([disabled]),\n.fui-Tag.fui-Tag[aria-selected='true']:active:not([disabled]),\n.fui-InteractionTagPrimary.fui-InteractionTagPrimary[aria-pressed='true']:active:not([disabled]),\n:where(.fui-InteractionTagPrimary[aria-pressed='true']) + .fui-InteractionTagSecondary.fui-InteractionTagSecondary:active:not([disabled]) {\n border-color: var(--winui-control-fill-transparent);\n color: var(--winui-text-on-accent-fill-secondary);\n}\n\n/* Fluent keeps writing the selection attribute while dropping every selected\n atom, so without this rule the accent rules above outlive the selection and\n leave an accent outline standing on the neutral disabled fill. ToggleButton\n is the control that ships a checked-disabled visual, and it keeps the accent\n side. Clearing the outline would take the divider between the two halves with\n it, so the dismiss half restates it: SplitButton draws that divider with\n ControlStrokeColorDefault and its Disabled state leaves it there.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ToggleButton_themeresources.xaml#L14\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ToggleButton_themeresources.xaml#L26\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ToggleButton_themeresources.xaml#L38\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/SplitButton/SplitButton_themeresources.xaml#L27\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/SplitButton/SplitButton.xaml#L71-L79\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/SplitButton/SplitButton.xaml#L225 */\n.fui-Tag.fui-Tag[aria-pressed='true'][disabled],\n.fui-Tag.fui-Tag[aria-selected='true'][disabled],\n.fui-InteractionTagPrimary.fui-InteractionTagPrimary[aria-pressed='true'][disabled],\n:where(.fui-InteractionTagPrimary[aria-pressed='true']) + .fui-InteractionTagSecondary.fui-InteractionTagSecondary[disabled] {\n background-color: var(--winui-accent-fill-disabled);\n border-color: var(--winui-control-fill-transparent);\n color: var(--winui-text-on-accent-fill-disabled);\n}\n\n:where(.fui-InteractionTagPrimary[aria-pressed='true']) + .fui-InteractionTagSecondary.fui-InteractionTagSecondary[disabled] {\n border-left-color: var(--winui-control-stroke-default);\n}\n";
@@ -0,0 +1 @@
1
+ export declare const buttonCss: string;
@@ -0,0 +1 @@
1
+ export declare const cardCss = "\n/* Both surfaces this file draws from round at ControlCornerRadius, the radius\n WinUI gives anything inline, where Fluent scales the radius with the card's\n size. The focus ring is a border on the same pseudo-element and Fluent\n restates its radius from a selector no weaker than this one, so the ring is\n named here too and the card keeps one radius focused or not.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/CornerRadius_themeresources.xaml#L5\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/Expander/Expander.xaml#L26\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L58\n https://github.com/microsoft/fluentui/blob/4aa1084999a8c1ac7245724ad6c76210fe80acf6/packages/react-components/react-card/library/src/components/Card/useCardStyles.styles.ts#L34-L38 */\n.fui-Card.fui-Card,\n.fui-Card.fui-Card::after,\n.fui-Card.fui-Card[data-fui-focus-visible]::after,\n.fui-Card.fui-Card[data-fui-focus-within]:focus-within::after {\n border-radius: var(--winui-control-corner-radius);\n}\n\n/* A card's stroke is drawn as an absolutely positioned overlay carrying no\n stacking order of its own, so it sits at the foot of the positioned layer and\n anything positioned inside the card paints over it -- a sticky band spanning\n the card erased the three edges it reached. The card is also only relative,\n not a stacking context, so those numbers were competing with the whole\n document rather than with their own card.\n\n Both are stated here: the card contains its contents' stacking order, and its\n own boundary is the last thing it draws. The number means nothing outside the\n card, which is the point -- content inside cannot reach it, and cannot reach\n anything outside either. */\n.fui-Card.fui-Card {\n isolation: isolate;\n}\n\n.fui-Card.fui-Card::after {\n z-index: 99;\n}\n\n@media not (forced-colors: active) {\n /* The Expander header. The doubled class outranks Fluent's hover and pressed\n atoms, which is how the surface stops repainting under the pointer.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/Expander/Expander_themeresources.xaml#L5\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/Expander/Expander_themeresources.xaml#L9 */\n .fui-Card.fui-Card[data-winui-appearance='filled'] {\n background-color: var(--winui-card-background-fill-default);\n }\n\n .fui-Card.fui-Card[data-winui-appearance='filled']::after {\n border-color: var(--winui-card-stroke-default);\n }\n\n /* The Expander content region, one step down the same ramp.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/Expander/Expander_themeresources.xaml#L25-L26 */\n .fui-Card.fui-Card[data-winui-appearance='filled-alternative'] {\n background-color: var(--winui-card-background-fill-secondary);\n }\n\n .fui-Card.fui-Card[data-winui-appearance='filled-alternative']::after {\n border-color: var(--winui-card-stroke-default);\n }\n\n /* An outline card takes only the card stroke, which is what an Expander\n contributes once its fill is dropped. Its pointer-over and pressed strokes\n are that same stroke, so this one rule is also the pointer answer.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L46\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/Expander/Expander_themeresources.xaml#L9-L11 */\n .fui-Card.fui-Card[data-winui-appearance='outline']::after {\n border-color: var(--winui-card-stroke-default);\n }\n\n /* The chromeless surface. ../theme.ts already lands its rest fill through\n colorSubtleBackground, but Fluent's disabled atom repaints the card in an\n opaque grey and strokes it, and neither WinUI surface this file draws from\n repaints on disable: the Expander's Disabled state carries no Background\n keyframe and resolves its border to the same CardStrokeColorDefault the\n enabled header uses, and the default ListViewItem style declares no border\n at all. Restating the rest surface at the specificity the other appearances\n already carry is what keeps the disabled card transparent and unstroked.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L17\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L234-L266\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/Expander/Expander_themeresources.xaml#L13\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/Expander/Expander_themeresources.xaml#L166-L178 */\n .fui-Card.fui-Card[data-winui-appearance='subtle'] {\n background-color: var(--winui-subtle-fill-transparent);\n }\n\n .fui-Card.fui-Card[data-winui-appearance='subtle']::after {\n border-color: transparent;\n }\n\n /* A ListViewItem draws a 2px outer ring with a 1px inner ring immediately\n inside it; Fluent's own ring already has the outer width, position and\n colour token, so only the inner ring is added, as an inset shadow. The\n border-color beside it restates Fluent's own declaration verbatim, which is\n what lifts the ring over the appearance strokes above: those name one class\n more than Fluent's focus atom does and would otherwise paint over it.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L248-L252\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L29-L30\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L181-L182\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L54-L55\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L258-L259\n https://github.com/microsoft/fluentui/blob/4aa1084999a8c1ac7245724ad6c76210fe80acf6/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts#L65-L71 */\n .fui-Card.fui-Card[data-fui-focus-visible]::after,\n .fui-Card.fui-Card[data-fui-focus-within]:focus-within::after {\n border-color: var(--colorStrokeFocus2);\n box-shadow: inset 0 0 0 var(--winui-focus-visual-secondary-thickness) var(--winui-focus-stroke-inner);\n }\n}\n\n/* High Contrast. Fluent strokes a selectable or interactive card in Highlight\n before it is touched: in useCardStyles the after key of highContrastInteractive\n is a sibling of the state it reads as, not nested inside it, so the accent\n lands at rest. WinUI spends SystemColorHighlight on\n an item's pointer-over, pressed and selected fills alone and gives a card\n stroke SystemColorWindowText, which is CanvasText here; its HighContrast\n dictionary names no item border brush at all. So the rest stroke is the same\n one a card that answers nothing already gets from the user agent.\n\n The pointer states Fluent fills with Highlight are excluded, because a stroke\n of the same colour as the fill is the borderless item WinUI draws and\n CanvasText would outline it; focus is excluded so Fluent's ring keeps the\n pseudo-element.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L464\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L80-L100\n https://github.com/microsoft/fluentui/blob/4aa1084999a8c1ac7245724ad6c76210fe80acf6/packages/react-components/react-card/library/src/components/Card/useCardStyles.styles.ts#L354-L386\n https://drafts.csswg.org/css-color-adjust/#forced-colors-properties */\n@media (forced-colors: active) {\n .fui-Card.fui-Card:not(:hover):not(:active):not([data-fui-focus-visible]):not([data-fui-focus-within]:focus-within)::after {\n border-color: CanvasText;\n }\n}\n";
@@ -0,0 +1,25 @@
1
+ /**
2
+ * States the table for one slot. Each field is the selector list naming that
3
+ * slot in that state, so a caller carries only how its own control spells the
4
+ * state -- an input's pseudo-classes, an option's ARIA attributes -- and the
5
+ * brushes stay in one place.
6
+ *
7
+ * Pointer-over and disabled restate only what moves: the rest rows already
8
+ * match those states and carry the rest of the row.
9
+ *
10
+ * The colours belong under `@media not (forced-colors: active)`, which the
11
+ * caller opens: an accent-filled indicator under forced colours would need
12
+ * forced-color-adjust: none, which this layer chooses not to take on, so forced
13
+ * colours keeps Fluent's own drawing.
14
+ */
15
+ export declare const checkboxSurfaceCss: (boxes: {
16
+ unchecked: string;
17
+ uncheckedHovered: string;
18
+ uncheckedPressed: string;
19
+ uncheckedDisabled: string;
20
+ selected: string;
21
+ selectedHovered: string;
22
+ selectedPressed: string;
23
+ disabled: string;
24
+ selectedDisabled: string;
25
+ }) => string;
@@ -0,0 +1,4 @@
1
+ export declare const checkboxMixed = "[data-winui-checked='mixed']";
2
+ export declare const checkboxNotMixed = ":not([data-winui-checked='mixed'])";
3
+ export declare const uncheckedBox: string;
4
+ export declare const choiceCss: string;
@@ -0,0 +1 @@
1
+ export declare const colorPickerCss = "\n/* ColorPickerSliderCornerRadius, which WinUI states for this control's own\n track rather than the 2px of a plain Slider.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/ColorPicker/ColorPicker_themeresources.xaml#L32 */\n.fui-ColorSlider__rail.fui-ColorSlider__rail {\n border-radius: 6px;\n}\n\n@media not (forced-colors: active) {\n /* The slider thumbs are WinUI's colour-picker slider thumb: an\n elevation-stroked disc filled with the opaque outer-thumb background and\n carrying a 10px inner dot, held through every WinUI state. The disc never\n samples the picked colour, which Fluent fills it with, so it stays legible\n over the hue and alpha gradients it rides.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/ColorPicker/ColorPicker.xaml#L435-L444\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Slider_themeresources.xaml#L18-L19\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/ColorPicker/ColorPicker_themeresources.xaml#L5 */\n .fui-ColorSlider__thumb.fui-ColorSlider__thumb {\n --winui-color-picker-inner-thumb-size: calc(var(--fui-Slider__thumb--size) * 10 / 18);\n\n background-color: var(--winui-control-solid-fill-default);\n border-color: var(--winui-control-elevation-border-color);\n box-shadow: none;\n }\n\n /* ColorSpectrum's selection ellipse is a single stroke over the spectrum: the\n elevation border above belongs to the slider thumb, a different part, and\n the ring beneath is drawn by the rest ::before below.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/ColorPicker/ColorSpectrum.xaml#L67-L69 */\n .fui-ColorArea__thumb.fui-ColorArea__thumb {\n border-color: transparent;\n box-shadow: none;\n }\n\n /* ColorSpectrum strokes its selection ellipse with SystemChromeWhiteColor,\n the same #FFFFFF in the Default, Light and HighContrast dictionaries alike,\n so it reads against any picked colour. Fluent draws it from\n colorNeutralBackground1, which this layer points at a surface fill, so in\n dark it came out a grey where WinUI is deliberately theme-invariant. WinUI\n additionally flips the ring to ChromeBlackHigh once the picked colour is\n light, which CSS cannot read.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/ColorPicker/ColorSpectrum.xaml#L69\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/dxaml/themes/generic.xaml#L223 */\n .fui-ColorArea__thumb.fui-ColorArea__thumb::before {\n border-color: #ffffff;\n }\n\n /* The slider thumb's inner dot. Fluent gives the thumb one full-bleed ring, so\n the dot is drawn as the ring's content box: the ring keeps the outer disc's\n fill and the remaining centre takes ColorPickerSliderThumbBackground. The\n dot holds ColorPickerSliderInnerThumbWidth as a share of\n SliderHorizontalThumbWidth, so it stays in proportion to whatever size\n Fluent lays the thumb out at.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/ColorPicker/ColorPicker.xaml#L442\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/ColorPicker/ColorPicker_themeresources.xaml#L33\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Slider_themeresources.xaml#L169 */\n .fui-ColorSlider__thumb.fui-ColorSlider__thumb::before {\n background-color: var(--winui-text-fill-primary);\n border-color: var(--winui-control-solid-fill-default);\n border-width: calc(\n (var(--fui-Slider__thumb--size) - var(--winui-color-picker-inner-thumb-size)) / 2\n );\n }\n\n /* ColorSpectrum's one pointer state.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/ColorPicker/ColorSpectrum.xaml#L17-L21 */\n .fui-ColorArea:hover .fui-ColorArea__thumb.fui-ColorArea__thumb {\n opacity: 0.8;\n }\n\n /* WinUI leaves both slider gradients unstroked; Fluent's neutral border on\n the alpha rail is painted out rather than removed, so the rail keeps the\n box it lays out with.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/ColorPicker/ColorPicker.xaml#L239\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/ColorPicker/ColorPicker.xaml#L252 */\n .fui-AlphaSlider__rail.fui-AlphaSlider__rail {\n border-color: transparent;\n }\n\n /* WinUI trades ColorSpectrum's outer focus stroke for the inner one once the\n picked colour is light; a CSS rule cannot read that colour, so the ring\n takes FocusStrokeColorOuter, keyed to the theme instead.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/ColorPicker/ColorSpectrum.xaml#L68-L69\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L258 */\n .fui-ColorArea__thumb.fui-ColorArea__thumb[data-fui-focus-within]:focus-within::after {\n border-color: var(--winui-focus-stroke-outer);\n }\n\n /* Only the outer stroke's colour transcribes. FocusStrokeColorInner does not:\n the white ring beneath is the thumb's rest ::before, not a second focus\n ring.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L258 */\n .fui-ColorSlider__input:focus-visible ~ .fui-ColorSlider__thumb.fui-ColorSlider__thumb {\n border-color: var(--winui-focus-stroke-outer);\n }\n\n /* The brush WinUI strokes its colour preview with. A colour swatch always\n writes --fui-SwatchPicker--borderColor from its borderColor prop, so this\n rule makes that prop inert.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/ColorPicker/ColorPicker_themeresources.xaml#L11\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L243 */\n .fui-ColorSwatch.fui-ColorSwatch {\n border-color: var(--winui-control-stroke-default);\n }\n\n /* An unselected swatch under the pointer. WinUI keeps the accent ramp for\n selection and gives a merely-hovered tile the neutral on-accent stroke, so\n Fluent's accent double ring is replaced by the swatch's own 1px edge in\n that brush -- which Fluent also has to be given back, because it zeroes the\n border with the shorthand under the pointer and takes the width and the\n style with it. Pressed is a superset of pointer-over in WinUI: it moves the\n fill, not the stroke. Hovering is the weakest of the four states Fluent\n paints on this element, so selected, disabled and focus-visible each keep\n the ring they draw for themselves.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/GridViewItem_themeresources.xaml#L26-L29\n https://github.com/microsoft/fluentui/blob/4aa1084999a8c1ac7245724ad6c76210fe80acf6/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/useColorSwatchStyles.styles.ts#L29-L36 */\n .fui-ColorSwatch.fui-ColorSwatch:not(\n [disabled],\n [aria-checked='true'],\n [aria-selected='true'],\n [data-fui-focus-visible]\n ):hover {\n border-width: 1px;\n border-style: solid;\n border-color: var(--winui-control-stroke-on-accent-tertiary);\n box-shadow: none;\n }\n\n /* A disabled control never leaves WinUI's Disabled state, and Fluent's own\n disabled variant clears only the hover ring: its pressed override resets\n the border and leaves the box-shadow standing, which Chrome still matches\n on a disabled button.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/ColorPicker/ColorPicker.xaml#L455-L474 */\n .fui-ColorSwatch.fui-ColorSwatch[disabled]:hover,\n .fui-ColorSwatch.fui-ColorSwatch[disabled]:hover:active {\n box-shadow: none;\n }\n\n /* WinUI states Disabled in this family by swapping brushes only: it stamps no\n glyph over the content and draws no foreground drop-shadow, so Fluent's\n white ProhibitedFilled is dropped and the chip is washed instead with\n AccentFillColorDisabled, the fill a disabled colour-filled WinUI surface\n takes -- an accent Button is the same case. The wash is layered over the\n colour the caller passed rather than replacing it, so the swatch still\n names its colour while it reads as inert. Both rules are colour-scoped\n together: in forced colours the wash would be a literal the system palette\n never reaches, and the glyph is then the only disabled cue left.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L38\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L242\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Button_themeresources.xaml#L8\n https://github.com/microsoft/fluentui/blob/4aa1084999a8c1ac7245724ad6c76210fe80acf6/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/useColorSwatchStyles.styles.ts#L154-L156 */\n .fui-ColorSwatch.fui-ColorSwatch[disabled] {\n background-image: linear-gradient(\n var(--winui-accent-fill-disabled),\n var(--winui-accent-fill-disabled)\n );\n }\n\n /* The glyph is addressed by position because Fluent declares a class name for\n the slot and then never merges it in, so the span carries only Griffel\n hashes. It is rendered last, after the caller's own icon slot when there is\n one.\n https://github.com/microsoft/fluentui/blob/4aa1084999a8c1ac7245724ad6c76210fe80acf6/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/useColorSwatchStyles.styles.ts#L202-L210\n https://github.com/microsoft/fluentui/blob/4aa1084999a8c1ac7245724ad6c76210fe80acf6/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/renderColorSwatch.tsx#L16-L18 */\n .fui-ColorSwatch[disabled] > span:last-child {\n display: none;\n }\n\n /* An empty swatch is a placeholder awaiting a value, which WinUI outlines\n with the strong stroke it gives an unfilled control body -- a cleared\n CheckBox is the same case -- rather than the faint stroke of a filled one.\n The stroke is solid: XAML Border has no dash concept, so no shipping WinUI\n control template can draw the dashed edge Fluent gives this swatch.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/CheckBox_themeresources.xaml#L41\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L48 */\n .fui-EmptySwatch.fui-EmptySwatch {\n border-style: solid;\n border-color: var(--winui-control-strong-stroke-default);\n }\n\n /* An empty swatch is built from its own reset, which includes none of the\n ColorSwatch base -- so it ships no focus indicator at all and fell through\n to the user agent's outline while every other swatch drew WinUI's two\n rings. The pair is stated here at the widths Fluent gives an unselected\n swatch.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L258-L259\n https://github.com/microsoft/fluentui/blob/4aa1084999a8c1ac7245724ad6c76210fe80acf6/packages/react-components/react-swatch-picker/library/src/components/EmptySwatch/useEmptySwatchStyles.styles.ts#L10-L13 */\n .fui-EmptySwatch.fui-EmptySwatch[data-fui-focus-visible] {\n outline-style: none;\n box-shadow:\n inset 0 0 0 var(--strokeWidthThick) var(--winui-focus-stroke-outer),\n inset 0 0 0 var(--strokeWidthThicker) var(--winui-focus-stroke-inner);\n }\n}\n";
@@ -0,0 +1 @@
1
+ export declare const dialogCss = "\n/* The height cap is exposed as one variable so the body can consume exactly the\n same envelope. ContentDialogMaxWidth is a keyed ThemeResource an app overrides\n in its own dictionary, so a custom property with a 548px fallback is the\n faithful shape, and the measures a dialog can ask for are the rules that set\n that property.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ContentDialog_themeresources.xaml#L6-L15\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ContentDialog_themeresources.xaml#L223 */\n.fui-DialogSurface.fui-DialogSurface {\n --fwt-dialog-max-height: min(756px, 100dvh);\n padding: 0;\n background-color: var(--winui-solid-background-fill-base);\n border-color: var(--winui-surface-stroke-default);\n min-width: 320px;\n max-width: var(--fwt-dialog-max-width, 548px);\n min-height: 184px;\n max-height: var(--fwt-dialog-max-height);\n overflow: hidden;\n}\n\n/* 720px is our own measure for the widest editing forms -- the alias, API key\n and user editors, each of which holds a list of nested records rather than a\n stack of single fields. It is chosen above both WinUI's 548px and the 600px\n cap Fluent's own DialogSurface applies\n (node_modules/@fluentui/react-dialog@9.18.2/lib/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js,\n maxWidth), and derived from neither. A window narrower than the measure takes\n it back to the window less 16px on each side, rather than letting the surface\n run to the window edge. */\n.fwt-dialog-shell--editor {\n --fwt-dialog-max-width: min(720px, calc(100vw - 32px));\n}\n\n/* Fluent moves overflow onto the whole surface here and widens three border\n edges to 4px to reserve the browser scrollbar. DialogShell keeps its\n three-band grid at every height, so only the border needs restating. */\n@media (max-height: 359px) {\n .fui-DialogSurface.fui-DialogSurface {\n border-width: 1px;\n }\n}\n\n/* WinUI doubles the stroke to 2px because the smoke layer and the dialog\n collapse onto the same system Window colour; forced colours collapse the same\n two fills but leave widths alone.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ContentDialog_themeresources.xaml#L21-L28\n https://drafts.csswg.org/css-color-adjust/#forced-colors-properties */\n@media (forced-colors: active) {\n .fui-DialogSurface.fui-DialogSurface {\n border-width: 2px;\n }\n}\n\n/* Fluent draws its focus ring two pixels outside the surface and blanks the\n surface border while it shows. The surface clip is the outermost box of the\n overlay, so a ring outside it is invisible: both strokes move indoors, and the\n blanked border takes back its rest stroke.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L54-L55\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L258-L259\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ContentDialog_themeresources.xaml#L66 */\n.fui-DialogSurface.fui-DialogSurface[data-fui-focus-visible] {\n border-color: var(--winui-surface-stroke-default);\n}\n\n.fui-DialogSurface.fui-DialogSurface[data-fui-focus-visible]::after {\n inset: 0;\n border-radius: calc(var(--winui-overlay-corner-radius) - 1px);\n box-shadow: inset 0 0 0 var(--winui-focus-visual-secondary-thickness) var(--winui-focus-stroke-inner);\n}\n\n/* The default close action is a bare button carrying Fluent's reset and no\n fui-Button class, so nothing in ../controls/button.css.ts reaches it and the\n reset itself declares only inherited colours with no pointer branch -- the\n glyph answered neither hover nor press. A close glyph inside a WinUI surface\n is TeachingTip's AlternateCloseButton: the subtle fill ramp under a\n foreground that holds primary until the press. A call site that passes a real\n Button is excluded, since that button already carries its own ramp.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TeachingTip/TeachingTip_themeresources.xaml#L12-L19\n https://github.com/microsoft/fluentui/blob/4aa1084999a8c1ac7245724ad6c76210fe80acf6/packages/react-components/react-dialog/library/src/components/DialogTitle/useDialogTitleStyles.styles.ts#L36-L52 */\n.fui-DialogTitle__action > button:not(.fui-Button) {\n border-radius: var(--winui-control-corner-radius);\n background-color: var(--winui-subtle-fill-transparent);\n}\n\n.fui-DialogTitle__action > button:not(.fui-Button):hover {\n background-color: var(--winui-subtle-fill-secondary);\n}\n\n.fui-DialogTitle__action > button:not(.fui-Button):active {\n background-color: var(--winui-subtle-fill-tertiary);\n color: var(--winui-text-fill-secondary);\n}\n\n/* The surface's second focus stroke, on the dialog's other focusable part.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L259 */\n.fui-DialogTitle__action > button:not(.fui-Button)[data-fui-focus-visible]::after {\n box-shadow: inset 0 0 0 var(--winui-focus-visual-secondary-thickness) var(--winui-focus-stroke-inner);\n}\n\n/* The body takes over the 24px ContentDialogPadding the surface gave up, and\n drops Fluent's gap: WinUI's bands abut, and the step under the title is a\n margin on the title itself. The cap sits here, less the 1px border on each\n end, because the body fills the surface edge to edge.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ContentDialog_themeresources.xaml#L18\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ContentDialog_themeresources.xaml#L228-L233 */\n.fui-DialogBody.fui-DialogBody {\n padding: 24px;\n gap: 0;\n background-color: var(--winui-layer-fill-alt);\n border-radius: var(--winui-overlay-corner-radius) var(--winui-overlay-corner-radius) 0 0;\n grid-template-rows: auto minmax(0, 1fr) auto;\n max-height: calc(var(--fwt-dialog-max-height) - 2px);\n min-height: 0;\n overflow: hidden;\n}\n\n/* The form must transmit the surface envelope without becoming a fourth sizing\n or scroll owner. */\n.fwt-dialog-shell__form {\n margin: 0;\n max-height: inherit;\n min-height: 0;\n overflow: hidden;\n}\n\n/* Fluent normally makes DialogContent the browser-scroll viewport. Here it is\n only the minmax grid cell around ScrollArea: doubled class specificity keeps\n Griffel's runtime-injected overflow-y:auto from winning by stylesheet order.\n\n Fluent also spends that cell on a focus gutter -- padding, with an equal\n negative margin putting the text back on the title's edge -- and that is\n dropped rather than transcribed. WinUI lays Title and Content out in one Grid\n under a single ContentDialogPadding of 24, with ContentDialogTitleMargin\n 0,0,0,12 the only region-specific offset in the template and no content\n margin key at all, so a bare content cell has to sit on the title's edge and\n nothing else may move it.\n https://github.com/microsoft/fluentui/blob/6dee27b023a2d989f032b4adacb2135d336a67fb/packages/react-components/react-dialog/library/src/components/DialogContent/useDialogContentStyles.styles.ts#L16-L31\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ContentDialog_themeresources.xaml#L233-L245 */\n.fui-DialogContent.fui-DialogContent {\n padding: 0;\n margin: 0;\n min-height: 0;\n overflow: hidden;\n}\n\n/* DialogShell alone re-earns the gutter, because it alone puts a scroller in\n that cell: a scrollport clips at its own edge, so a focus visual on a control\n at the content's edge needs room inside the scrollport, and the cell has to\n give that room back to the title's edge by outsetting itself the same length.\n The two halves are one compensation and neither is meaningful alone, so they\n are written together, on the two boxes DialogShell itself supplies, and a\n DialogContent that is not DialogShell's gets neither. The length is the room\n a focus visual needs outside the control it belongs to, which ../tokens.ts\n derives. */\n.fwt-dialog-shell__content.fwt-dialog-shell__content {\n margin-inline: calc(-1 * var(--winui-focus-visual-outset));\n}\n\n/* ContentDialog presents its content with TextWrapping=\"Wrap\", which breaks\n inside a word rather than letting an over-long one out of the dialog; the\n messages here name user-chosen upstreams, aliases and keys, and carry server\n text. 'anywhere' rather than 'break-word' because the content is a grid whose\n items would otherwise keep the unbroken word as their automatic minimum size\n and overflow the scrollport instead of wrapping in it.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ContentDialog_themeresources.xaml#L246\n https://drafts.csswg.org/css-text-4/#overflow-wrap-property */\n.fwt-dialog-shell__scrollport {\n padding-inline: var(--winui-focus-visual-outset);\n overflow-wrap: anywhere;\n}\n\n/* ContentDialogTitleMargin, and the Title presenter's TextWrapping=\"Wrap\" --\n several titles interpolate a user-chosen alias, key or username. Its\n MaxLines=\"2\" is not transcribed: XAML clips the rest with nothing to reveal\n it, and the surface here can afford the line.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ContentDialog_themeresources.xaml#L17\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ContentDialog_themeresources.xaml#L241 */\n.fui-DialogTitle.fui-DialogTitle {\n margin-bottom: 12px;\n overflow-wrap: anywhere;\n}\n\n/* CommandSpace spans the dialog whatever the actions' position prop says, breaks\n out of the body's padding through matching negative insets, and restates the\n separator as a top border because the band above it is not a single element on\n this side. The buttons take equal star-width columns, where Fluent sizes them\n to their content.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ContentDialog_themeresources.xaml#L248-L258\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ContentDialog_themeresources.xaml#L10-L19 */\n.fui-DialogActions.fui-DialogActions {\n grid-column: 1 / -1;\n justify-self: stretch;\n width: auto;\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: 1fr;\n justify-items: stretch;\n margin: 24px -24px -24px;\n padding: 24px;\n background-color: var(--winui-solid-background-fill-base);\n border-top: 1px solid var(--winui-card-stroke-default);\n border-radius: 0 0 var(--winui-overlay-corner-radius) var(--winui-overlay-corner-radius);\n}\n\n/* A lone button lands in WinUI's CloseColumn with PrimaryColumn still at star\n width ahead of it and the 8px SecondSpacer between the two, so it takes half\n of what the band leaves after that gap. The selector names the button's own\n class rather than the element, so a spinner or a wrapper is not half-width by\n accident.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ContentDialog_themeresources.xaml#L250-L256 */\n.fui-DialogActions > .fui-Button.fui-Button:only-child {\n width: calc(50% - 4px);\n justify-self: end;\n}\n\n/* WinUI's CommandSpace declares no width trigger, so its star-width buttons stay\n side by side however narrow the window gets; Fluent's 480px break into a\n column is deliberately kept. Fluent expresses it as flex-direction, inert\n under the display: grid above, so it is restated as a row flow.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ContentDialog_themeresources.xaml#L248-L258 */\n@media (max-width: 480px) {\n .fui-DialogActions.fui-DialogActions {\n grid-auto-flow: row;\n }\n\n .fui-DialogActions > .fui-Button.fui-Button:only-child {\n width: auto;\n justify-self: stretch;\n }\n}\n";
@@ -0,0 +1 @@
1
+ export declare const drawerCss = "\n/* WinUI's default text brush.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources.xaml#L14 */\n.fui-OverlayDrawer.fui-OverlayDrawer,\n.fui-InlineDrawer.fui-InlineDrawer {\n color: var(--winui-text-fill-primary);\n}\n\n/* AcrylicInAppFillColorDefaultBrush, flattened to its own declared fallback in\n ../tokens.ts. FlyoutPresenter carries the same brush, which is why the\n outline below is a flyout's.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/NavigationView/NavigationView.xaml#L289\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/NavigationView/NavigationView_themeresources.xaml#L5\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/FlyoutPresenter_themeresources.xaml#L5 */\n.fui-OverlayDrawer.fui-OverlayDrawer {\n background-color: var(--winui-acrylic-in-app-fill-default);\n}\n\n/* WinUI's inline pane is transparent; the colour the page behind it resolves to\n is named here instead, so the surface does not depend on whatever the drawer\n is placed over.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/NavigationView/NavigationView.xaml#L129\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/NavigationView/NavigationView_themeresources.xaml#L6\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources.xaml#L13 */\n.fui-InlineDrawer.fui-InlineDrawer {\n background-color: var(--winui-solid-background-fill-base);\n}\n\n/* An inline drawer gets no border: WinUI's expanded pane states no edge of its\n own, and the hairline at that boundary is drawn from the content side, as the\n start edge of the content card. Nothing this drawer sits beside is that card.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/NavigationView/NavigationView.xaml#L127\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/NavigationView/NavigationView.xaml#L392 */\n.fui-InlineDrawer.fui-InlineDrawer {\n border: none;\n}\n\n/* WinUI strokes all four sides of a flyout; only the page-facing edge is\n painted here, because a viewport-anchored drawer's other three run along the\n window frame and it is the one side Fluent gives a border style to. Fluent\n blanks that same border while focus is visible to complete its focus ring, so\n the override stands aside for that state.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/FlyoutPresenter_themeresources.xaml#L6-L7 */\n.fui-OverlayDrawer.fui-OverlayDrawer:not([data-fui-focus-visible]) {\n border-color: var(--winui-surface-stroke-flyout);\n}\n\n/* WinUI doubles the stroke to 2px in high contrast, where the surface fill and\n the page collapse onto the same system Window colour and the stroke is all\n that divides them. Forced colours collapse the fills the same way and leave\n widths alone, so the width is the one value restated.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/FlyoutPresenter_themeresources.xaml#L9-L12\n https://drafts.csswg.org/css-color-adjust/#forced-colors-properties */\n@media (forced-colors: active) {\n .fui-OverlayDrawer.fui-OverlayDrawer {\n border-width: 2px;\n }\n}\n\n/* The inner ring of WinUI's two-ring composite has to sit inside the outer\n ring's own border box, which the drawer's one-sided border cannot provide, so\n it is an inset shadow. Fluent draws its pseudo-element two pixels outside the\n drawer, and the drawer clips with square corners, so the pseudo-element is\n pulled onto the padding box and the pair drawn inward.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L258-L259\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L251-L253 */\n.fui-OverlayDrawer.fui-OverlayDrawer[data-fui-focus-visible]::after {\n inset: 0;\n box-shadow: inset 0 0 0 var(--winui-focus-visual-secondary-thickness) var(--winui-focus-stroke-inner);\n}\n\n/* SplitView's light dismiss layer stays hit-testable but is painted only in the\n OverlayVisible state, which LightDismissOverlayMode Auto -- the default --\n resolves to on Xbox alone; everywhere else the layer keeps the template's\n Transparent fill. The overlaying navigation pane opts in through this class,\n while the drawers that stand in for ContentDialog keep Fluent's dimmed\n backdrop.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/SplitView/SplitView_themeresources.xaml#L723\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/SplitView/SplitView_themeresources.xaml#L684-L693\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/components/controls/LightDismissOverlay/inc/LightDismissOverlayHelper.h#L12-L26 */\n.fwt-drawer-light-dismiss.fwt-drawer-light-dismiss {\n background-color: transparent;\n}\n\n/* Fluent makes every DrawerBody an unconditional browser scroll owner. Bodies\n here compose around an explicit ScrollArea, so the parent must stay a clipped\n layout cell; otherwise a one-pixel rounding overflow exposes a second native\n scrollbar beside the OverlayScrollbars viewport. Fluent adds its block padding\n back only on a first or last child, so a body following a DrawerHeader gets\n none and the clip cuts the focus ring of a control at that edge; restating\n Fluent's own first-and-last term on both ends gives the clip the same room at\n each. A production body passes !p-0 and nests its own padded ScrollArea, so\n this reaches the plain bodies alone.\n https://github.com/microsoft/fluentui/blob/6dee27b023a2d989f032b4adacb2135d336a67fb/packages/react-components/react-drawer/library/src/components/DrawerBody/useDrawerBodyStyles.styles.ts#L16-L31 */\n.fui-DrawerBody.fui-DrawerBody {\n min-height: 0;\n overflow: hidden;\n padding-block: calc(var(--spacingHorizontalXXL) + 1px);\n}\n";
@@ -0,0 +1,3 @@
1
+ export declare const fieldHorizontalRootAtom = "f1645dqt";
2
+ export declare const fieldSuccessIconAtom = "ffmvakt";
3
+ export declare const fieldCss = "\n/* Keep header and control at their intrinsic sizes so mixed controls retain the\n same 8px header gap when a parent grid stretches the Field to a taller\n sibling. */\n.fui-Field.fui-Field:not(.f1645dqt) {\n align-content: start;\n}\n\n/* WinUI gives a header no vertical padding and a flat 8px gap, where Fluent\n scales both with the field size. Fluent's horizontal orientation has no WinUI\n header to transcribe and relies on the label's vertical padding to align it\n with the control's first text line, so the horizontal root atom is negated.\n The header's own colour is left on the modern text ramp rather than taken\n from TextControlHeaderForeground: that key is on the legacy system-brush\n layer at BaseHigh, a pure black no other label in this layer wears, and a\n Field label sitting darker than the CheckBox label beside it would read as a\n defect rather than as WinUI.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L175\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L335\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/dxaml/themes/generic.xaml#L4812 */\n.fui-Field:not(.f1645dqt) > .fui-Field__label.fui-Field__label {\n padding-block: 0;\n margin-block-end: 8px;\n}\n\n/* The header's disabled step, which Fluent does not state: its Field passes the\n wrapped control's disabled state to no attribute, class or atom on the label\n slot, so the label alone stayed at its rest colour while the control beside\n it greyed out. :has on the wrapped control is the state Fluent leaves\n readable.\n\n The modern dictionary carries a header-disabled brush for every field-shaped\n control that states one -- ComboBox, DatePicker, TimePicker and\n CalendarDatePicker all key it to TextFillColorDisabled -- and only TextBox\n leaves the key to the legacy layer, so the label greys to the same step its\n control does.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/ComboBox/ComboBox_themeresources.xaml#L47\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/ComboBox/ComboBox_themeresources.xaml#L257\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/DatePicker_themeresources.xaml#L14\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/CalendarDatePicker_themeresources.xaml#L18\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L256-L260 */\n.fui-Field:has(:disabled) > .fui-Field__label.fui-Field__label,\n.fui-Field:has([aria-disabled='true']) > .fui-Field__label.fui-Field__label {\n color: var(--winui-text-fill-disabled);\n}\n\n/* WinUI paints a description line with\n SystemControlDescriptionTextForegroundBrush (../tokens.ts:\n --winui-text-base-medium) at the text control's own 14px FontSize, where\n Fluent's secondary text is the 12px caption ramp. Hint and validation message\n share one neutral base atom, so the colour is written as a redefinition of\n that token on both slots. DescriptionPresenter carries no Margin, where\n Fluent lifts its subordinate line off the control by spacingVerticalXXS, so\n the gutter is taken back out.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L340\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L186\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/dxaml/themes/generic.xaml#L36 */\n.fui-Field__hint.fui-Field__hint,\n.fui-Field__validationMessage.fui-Field__validationMessage {\n --colorNeutralForeground3: var(--winui-text-base-medium);\n font-size: var(--fontSizeBase300);\n line-height: var(--lineHeightBase300);\n margin-top: 0;\n}\n\n/* WinUI's only subordinate-text slot, Description, is a bare ContentPresenter\n with no icon column, so Fluent's validation glyph goes while its three states\n are kept and re-expressed below in WinUI's SystemFill roles.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L340 */\n.fui-Field__validationMessageIcon.fui-Field__validationMessageIcon {\n display: none;\n}\n\n/* Fluent indents the message by the column the glyph sat in, so removing the\n glyph alone leaves the words hanging off the field's leading edge. */\n.fui-Field__validationMessage.fui-Field__validationMessage {\n padding-inline-start: 0;\n}\n\n/* The required marker has no WinUI counterpart -- a TextBox header states none,\n and neither the CheckBox nor the RadioButton template carries a marker part\n beside its bare ContentPresenter -- so it is answered as an internal\n invariant instead: every other signal in this column was re-expressed in a\n WinUI SystemFill role, and leaving this one on Fluent's own red put two\n different reds in the same column of a form. Stated on the Label slot rather\n than under a Field, because Checkbox and Radio render their own label outside\n the Field label and every marker in the app is this same affordance.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L282\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/CheckBox_themeresources.xaml#L598-L613\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/RadioButton_themeresources.xaml#L366-L379 */\n.fui-Label__required.fui-Label__required {\n color: var(--winui-system-fill-critical);\n}\n\n/* Invalid is the one validation state Fluent writes into the DOM, as\n aria-invalid on the wrapped control; WinUI's counterpart is\n SystemFillColorCritical. None of the three message colours states a\n forced-colors answer, because WinUI's HighContrast dictionary poisons every\n SystemFill to #FF0000 to make a control still reading one there visible as a\n defect.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L282\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L78\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L578-L580\n https://drafts.csswg.org/css-color-adjust/#forced-colors-properties */\n.fui-Field:has([aria-invalid='true']) .fui-Field__validationMessage.fui-Field__validationMessage {\n color: var(--winui-system-fill-critical);\n}\n\n/* Warning and error both set role=\"alert\", so this rule matches invalid fields\n too and relies on the error rule above being one attribute more specific.\n WinUI's counterpart is SystemFillColorCaution.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L281\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L77 */\n.fui-Field__validationMessage.fui-Field__validationMessage[role='alert'] {\n color: var(--winui-system-fill-caution);\n}\n\n/* Success writes neither aria-invalid nor role, so it is addressed through the\n pinned glyph atom -- the glyph is hidden, not removed, and still answers a\n selector. Fluent says success in that icon alone, which this sheet takes\n away, so the message carries the state instead. WinUI's counterpart is\n SystemFillColorSuccess.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L280\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L76 */\n.fui-Field__validationMessage.fui-Field__validationMessage:has(> .fui-Field__validationMessageIcon.ffmvakt) {\n color: var(--winui-system-fill-success);\n}\n\n/* The info glyph is a subtle button in WinUI terms, and a subtle button says\n pointer with its fill: SubtleButtonBackground walks transparent, secondary,\n tertiary while SubtleButtonForeground holds TextFillColorPrimary from rest\n through PointerOver and steps one down the text ramp on Pressed. Fluent\n inverts that -- its fill stays transparent and its foreground climbs the\n brand ramp on hover, on press and for as long as the tip is open -- so both\n halves are restated here. The glyph rests one step lower than a subtle\n button's label, on colorNeutralForeground2, which ../theme.ts resolves to\n TextFillColorSecondary, so holding and then stepping once lands on secondary\n and tertiary. A flyout merely being open is a state WinUI states no\n foreground for, so the selected step is the rest colour.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Button_themeresources.xaml#L17-L24 */\n.fui-InfoButton.fui-InfoButton {\n --colorTransparentBackgroundHover: var(--winui-subtle-fill-secondary);\n --colorTransparentBackgroundPressed: var(--winui-subtle-fill-tertiary);\n --colorNeutralForeground2BrandHover: var(--winui-text-fill-secondary);\n --colorNeutralForeground2BrandPressed: var(--winui-text-fill-tertiary);\n --colorNeutralForeground2BrandSelected: var(--winui-text-fill-secondary);\n}\n\n/* Fluent renders both weights of the bundled info icon and swaps which one is\n displayed on hover and while the tip is open. Every state a subtle button\n names is a brush -- fill, foreground and stroke, and nothing else -- so the\n outline weight is pinned for all of them.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Button_themeresources.xaml#L17-L28 */\n.fui-InfoButton.fui-InfoButton .fui-Icon-filled.fui-Icon-filled {\n display: none;\n}\n\n.fui-InfoButton.fui-InfoButton .fui-Icon-regular.fui-Icon-regular {\n display: inline-flex;\n}\n\n/* A link's three enabled steps. WinUI walks a HyperlinkButton down the accent\n TEXT ramp, not the accent FILL ramp an accent button takes. Scoped to the\n default appearance, like the disabled step below, because Fluent's subtle\n link is neutral by design.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/HyperlinkButton_themeresources.xaml#L5-L7\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L297-L299\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L93-L95 */\n.fui-Link.fui-Link[data-winui-appearance='default']:not([aria-disabled='true']) {\n color: var(--winui-accent-text-fill-primary);\n}\n\n.fui-Link.fui-Link[data-winui-appearance='default']:not([aria-disabled='true']):hover {\n color: var(--winui-accent-text-fill-secondary);\n}\n\n.fui-Link.fui-Link[data-winui-appearance='default']:not([aria-disabled='true']):active {\n color: var(--winui-accent-text-fill-tertiary);\n}\n\n/* No link in this app underlines, in any state. WinUI 3 ships\n HyperlinkUnderlineVisible as False, inverting the value dxaml's generic.xaml\n still carries, and its two hyperlink forms read that flag differently:\n HyperlinkButton drops the underline everywhere, while the inline Hyperlink\n keeps it at rest. Both forms are available and the app takes the\n HyperlinkButton for all of them, so Fluent's inline prop -- which underlines\n at rest, standing for the form this app does not use -- has nothing to say\n here either.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Hyperlink_themeresources.xaml#L20\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/HyperlinkButton_themeresources.xaml#L62-L63\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/core/text/TextBlock/Hyperlink.cpp#L669-L671\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/dxaml/lib/HyperLinkButton_Partial.cpp#L207-L212\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/dxaml/themes/generic.xaml#L5926 */\n.fui-Link.fui-Link,\n.fui-Link.fui-Link:hover,\n.fui-Link.fui-Link:active,\n.fui-Link.fui-Link:focus-visible {\n text-decoration-line: none;\n}\n\n/* Which leaves the focus rect to say focus, as it does for everything else\n focusable here -- Fluent says it with a doubled underline, which this app has\n no underline to double. A link's box is drawn tight around its text, so it\n states the room the strokes need and takes the same width back out of its\n margin, leaving the line it sits in as it was. */\n.fui-Link.fui-Link {\n border-radius: var(--winui-control-corner-radius);\n margin-inline: -5px;\n padding-block: 1px;\n padding-inline: 5px;\n}\n\n.fui-Link.fui-Link:focus-visible {\n box-shadow: inset 0 0 0 var(--winui-focus-visual-depth) var(--winui-focus-stroke-inner);\n outline: var(--winui-focus-visual-primary-thickness) solid var(--winui-focus-stroke-outer);\n outline-offset: calc(-1 * var(--winui-focus-visual-primary-thickness));\n}\n\n/* A disabled link. AccentTextFillColorDisabled arrives through the accent ramp\n but carries TextFillColorDisabled's neutral fade, a different neutral from\n Fluent's own. WinUI has no subtle-hyperlink counterpart, so the subtle\n appearance stays wholly on Fluent's ramp. Fluent repeats its disabled colour\n under :hover and :active, so the override repeats there.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/HyperlinkButton_themeresources.xaml#L8\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L212-L214\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L8-L10 */\n.fui-Link.fui-Link[data-winui-appearance='default'][aria-disabled='true'],\n.fui-Link.fui-Link[data-winui-appearance='default'][aria-disabled='true']:hover,\n.fui-Link.fui-Link[data-winui-appearance='default'][aria-disabled='true']:active {\n color: var(--winui-accent-text-fill-disabled);\n}\n\n/* WinUI's HighContrast dictionary takes the hyperlink off the accent ramp onto\n system colours, and is the one theme where both hyperlink forms draw the\n underline unconditionally, so the rule above is undone here. All four colour\n steps are named rather than left to the user agent because Fluent renders an\n href-less Link as a <button>, which would take ButtonText instead of the\n hyperlink colour. A media query adds no specificity, so each selector\n repeats the one it overrides.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/HyperlinkButton_themeresources.xaml#L34-L38\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/dxaml/themes/generic.xaml#L2083\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/dxaml/themes/generic.xaml#L2097\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/dxaml/themes/generic.xaml#L2073\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/dxaml/themes/generic.xaml#L2026\n https://drafts.csswg.org/css-color-adjust/#forced-colors-properties */\n@media (forced-colors: active) {\n .fui-Link.fui-Link,\n .fui-Link.fui-Link:hover,\n .fui-Link.fui-Link:active,\n .fui-Link.fui-Link:focus-visible {\n text-decoration-line: underline;\n }\n\n .fui-Link.fui-Link[data-winui-appearance='default']:not([aria-disabled='true']) {\n color: LinkText;\n }\n\n .fui-Link.fui-Link[data-winui-appearance='default']:not([aria-disabled='true']):hover {\n color: CanvasText;\n }\n\n .fui-Link.fui-Link[data-winui-appearance='default']:not([aria-disabled='true']):active {\n color: Highlight;\n }\n\n .fui-Link.fui-Link[data-winui-appearance='default'][aria-disabled='true'],\n .fui-Link.fui-Link[data-winui-appearance='default'][aria-disabled='true']:hover,\n .fui-Link.fui-Link[data-winui-appearance='default'][aria-disabled='true']:active {\n color: GrayText;\n }\n}\n";
@@ -0,0 +1 @@
1
+ export declare const listCss: string;
@@ -0,0 +1 @@
1
+ export declare const menuCss: string;
@@ -0,0 +1 @@
1
+ export declare const messageBarCss: string;
@@ -0,0 +1 @@
1
+ export declare const navCss: string;
@@ -0,0 +1 @@
1
+ export declare const popoverCss = "\n/* WinUI's flyout has one fill and one foreground, so both are stated for every\n appearance -- the doubled class name outranks the atoms Fluent composes for\n its inverted and brand surfaces, which have no WinUI counterpart. Stating\n only the fill left an inverted or brand surface wearing a foreground meant\n for the fill it no longer has, which is unreadable in both themes.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/FlyoutPresenter_themeresources.xaml#L39\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/FlyoutPresenter_themeresources.xaml#L6\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/FlyoutPresenter_themeresources.xaml#L16\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/FlyoutPresenter_themeresources.xaml#L43\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L244 */\n.fui-PopoverSurface.fui-PopoverSurface {\n border-radius: var(--winui-overlay-corner-radius);\n border-color: var(--winui-surface-stroke-flyout);\n background-color: var(--winui-acrylic-in-app-fill-default);\n color: var(--winui-text-fill-primary);\n}\n\n/* Forced colours already collapse the fill and the stroke onto the system\n colours the HighContrast dictionary names, which leaves the stroke width and\n the elevation. Fluent paints the elevation as a filter, which is not a\n forced-colors property and so keeps painting where a box-shadow would have\n been forced away, and WinUI casts no drop shadow at all while a high\n contrast theme is active.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/FlyoutPresenter_themeresources.xaml#L9-L13\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/components/comptree/HWCompNodeWinRT.cpp#L3962-L3970\n https://drafts.csswg.org/css-color-adjust/#forced-colors-properties */\n@media (forced-colors: active) {\n .fui-PopoverSurface.fui-PopoverSurface {\n border-width: 2px;\n filter: none;\n }\n}\n";
@@ -0,0 +1 @@
1
+ export declare const progressCss: string;
@@ -0,0 +1,11 @@
1
+ export declare const REVEAL_HEADROOM = "-32px";
2
+ /**
3
+ * The timing every reveal shares and the placement gate that starts it.
4
+ * `properties` are the direction custom properties the surface's own key frames
5
+ * read, declared in the same rule so a surface states its geometry once.
6
+ */
7
+ export declare const revealAnimation: ({ root, keyframes, properties }: {
8
+ root: string;
9
+ keyframes: string;
10
+ properties: readonly string[];
11
+ }) => string;
@@ -0,0 +1 @@
1
+ export declare const scrollbarCss: string;
@@ -0,0 +1 @@
1
+ export declare const selectCss: string;
@@ -0,0 +1 @@
1
+ export declare const selectionPill: (cornerRadius: string) => string;
@@ -0,0 +1,48 @@
1
+ /** Joins selectors into the one list a rule takes. */
2
+ export declare const list: (selectors: readonly string[]) => string;
3
+ /** Crosses a list of roots with the descendants stated under each of them. */
4
+ export declare const under: (roots: readonly string[], descendants: readonly string[]) => string;
5
+ /**
6
+ * Every selector interpolated into a guard below starts a line, so the indent
7
+ * it would have been written with has to come from here.
8
+ */
9
+ export declare const nested: (selectorList: string) => string;
10
+ /**
11
+ * The pressed subject of a control that paints from its root while a nested
12
+ * input owns the activation. Neither element alone sees both presses: Chrome
13
+ * sets :active on the input for a keyboard activation without propagating it
14
+ * to the root, while a pointer capture taken on the root moves the pointer's
15
+ * hover and active chain off the input for the whole gesture. Any rule
16
+ * restating a WinUI pressed value on such a control reads this union; a rule
17
+ * that only neutralises a Fluent atom keeps Fluent's own subject, since that
18
+ * atom stops matching in exactly the same conditions.
19
+ */
20
+ export declare const pressedRoots: (root: string, input: string) => string[];
21
+ /**
22
+ * Fluent's disabledFocusable keeps the element enabled to the browser and says
23
+ * so with aria-disabled, so both spellings name the disabled visual.
24
+ */
25
+ export declare const disabledStates: string[];
26
+ /**
27
+ * WinUI's VisualStateManager never leaves Disabled, so no interaction keyframe
28
+ * can run over a disabled control. CSS has no such exclusivity: a pressed
29
+ * selector carries two pseudo-classes where the disabled one carries a single
30
+ * class-level part, so it outranks the disabled rule and source order cannot
31
+ * rescue it. Every interactive state therefore excludes both disabled
32
+ * spellings in the state itself, which keeps the exclusion attached to the
33
+ * state rather than to each rule that happens to notice the collision.
34
+ */
35
+ export declare const notDisabled: string;
36
+ /**
37
+ * The clamp a sheet states for a motion of its own under the reduced-motion
38
+ * preference. The duration is a token rather than a literal, since the reason
39
+ * it is not zero belongs with the value.
40
+ */
41
+ export declare const reducedMotion: (selectors: readonly string[], property: "animation-duration" | "transition-duration", alsoDeclared?: readonly string[]) => string;
42
+ /**
43
+ * A subject stated twice, which is how every rule in this layer outranks the
44
+ * single-class atoms Griffel composes: two class-level parts against one, with
45
+ * no id and no important. A subject Fluent gives no class of its own cannot be
46
+ * written this way, and each such rule says so where it departs.
47
+ */
48
+ export declare const doubled: (selector: string) => string;
@@ -0,0 +1,24 @@
1
+ export declare const severityFills: readonly [readonly ["error", "critical"], readonly ["warning", "caution"], readonly ["success", "success"], readonly ["info", "attention"]];
2
+ /**
3
+ * Paints a control's severity from `data-winui-intent`, which the runtime
4
+ * chokepoint in `../appearance.ts` stamps and which also puts the matching
5
+ * circle glyph in the icon slot.
6
+ *
7
+ * `card` is the element taking the severity background; `icon` is the slot
8
+ * holding the glyph. Both take the doubling convention `./selectors.ts`
9
+ * records wherever they carry a declaration.
10
+ *
11
+ * `ground` is for a card that floats. Only the Attention step of this family is
12
+ * translucent -- half in light, a twentieth in dark -- and a bar laid inline
13
+ * over the page can carry that because the page supplies the opacity. A surface
14
+ * with arbitrary content beneath it cannot: the same wash leaves buttons legible
15
+ * through the card. Passing a ground composites the tint over it, which is what
16
+ * an inline bar resolves to anyway, and leaves the three opaque steps as they
17
+ * are.
18
+ * https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L235
19
+ */
20
+ export declare const severityCss: ({ card, icon, ground }: {
21
+ card: string;
22
+ icon: string;
23
+ ground?: string;
24
+ }) => string;
@@ -0,0 +1 @@
1
+ export declare const switchCss: string;
@@ -0,0 +1 @@
1
+ export declare const tableCss = "\n/* WinUI resolves the item's normal, pointer-over and pressed foregrounds to one\n brush, so only the two moving states are pinned back to Fluent's rest value.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L23-L25\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L88 */\n.fui-TableRow.fui-TableRow:hover,\n.fui-TableRow.fui-TableRow:active {\n color: var(--winui-text-fill-primary);\n}\n\n/* WinUI states no weight for any header-shaped item, so semibold is the\n dashboard's own choice.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/dxaml/themes/generic.xaml#L9448-L9456 */\n.fui-TableHeaderCell.fui-TableHeaderCell {\n font-weight: var(--fontWeightSemibold);\n}\n\n/* Stated on the nested button rather than inherited, because Fluent's button\n reset pins the leading to normal and a header that wraps would otherwise sit\n on a different leading from the cells beside it. */\n.fui-TableHeaderCell__button.fui-TableHeaderCell__button {\n line-height: var(--lineHeightBase300);\n}\n\n/* The button slot declares `background-color: inherit`, and WinUI's cell fill\n is translucent, so the two composite into a band with a darker block inside\n it. The button gives the fill up in every state, not just the two the pointer\n names: the inherited value is wrong wherever the cell has one, including the\n horizontal padding the button does not cover.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L17-L25 */\n.fui-TableHeaderCell .fui-TableHeaderCell__button.fui-TableHeaderCell__button {\n background-color: var(--winui-subtle-fill-transparent);\n}\n\n/* The edge itself is Fluent's, since a ListView draws no separator. Only the\n colour is stated, so the sizes that declare no bottom edge keep none.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L143\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L347 */\n.fui-TableRow.fui-TableRow {\n border-bottom-color: var(--winui-divider-stroke-default);\n}\n\n/* The ring's own colour is restated rather than Fluent's focus-stroke token, so\n a Button, Link or Menu trigger inside a cell keeps the ring it draws outside\n the table.\n\n Both strokes are drawn inside the element's bounds: every table here sits in\n a rounded clipping host that would cut an offsetless outline, so pulling it\n in by the primary thickness seats the pair inside the clip, with the inner\n stroke riding the remainder of the focus visual's depth. Insetting the host\n instead is wrong at both ends -- the performance table has to meet its host's\n rounded border, and a gutter in the API key table would stop the row's fill\n short of the card edge.\n\n Under forced colours the user agent drops the inset shadow and forces the\n outline onto CanvasText, so no colour is needed there.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L29-L30\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L94\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L248\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L250\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L252\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L144\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L348\n https://github.com/microsoft/microsoft-ui-xaml/blob/543310634592831f8f2638301ece05d2d2dbea39/src/dxaml/xcp/components/FocusRect/FocusRectManager.cpp#L173-L174\n https://drafts.csswg.org/css-color-adjust/#forced-colors-properties */\n.fui-TableRow.fui-TableRow[data-fui-focus-visible],\n.fui-TableCell.fui-TableCell[data-fui-focus-visible],\n.fui-TableSelectionCell.fui-TableSelectionCell[data-fui-focus-visible],\n.fui-TableHeaderCell.fui-TableHeaderCell[data-fui-focus-within]:focus-within {\n box-shadow: inset 0 0 0 var(--winui-focus-visual-depth) var(--winui-focus-stroke-inner);\n outline-color: var(--winui-focus-stroke-outer);\n outline-offset: calc(-1 * var(--winui-focus-visual-primary-thickness));\n}\n\n/* Fluent's selected-row appearance replaces the row's surface; WinUI stays on\n the subtle ramp it uses for the pointer. The fill and foreground are restated\n on all three states a selected row can be in, since Fluent's interactive\n atoms outrank the appearance's.\n\n A row can be marked selected two independent ways -- aria-selected, which a\n DataGrid row also carries, and the appearance prop, which reaches the DOM\n only through the stamp ../appearance.ts writes -- and Fluent paints a brand\n or neutral appearance from its own ramps either way. Both are named here, in\n an :is so the rules keep the weight they had.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L20\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L26-L28 */\n.fui-TableBody .fui-TableRow.fui-TableRow:is([aria-selected='true'], [data-winui-appearance='brand'], [data-winui-appearance='neutral']) {\n background-color: var(--winui-subtle-fill-secondary);\n color: var(--winui-text-fill-primary);\n}\n\n/* https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L21 */\n.fui-TableBody .fui-TableRow.fui-TableRow:is([aria-selected='true'], [data-winui-appearance='brand'], [data-winui-appearance='neutral']):hover {\n background-color: var(--winui-subtle-fill-tertiary);\n}\n\n/* https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L22 */\n.fui-TableBody .fui-TableRow.fui-TableRow:is([aria-selected='true'], [data-winui-appearance='brand'], [data-winui-appearance='neutral']):active {\n background-color: var(--winui-subtle-fill-secondary);\n}\n\n/* WinUI's leading selection indicator is deliberately not restated: it exists\n because a ListViewItem has nothing else to mark selection with, while these\n rows carry a selection control in their first cell. */\n\n/* WinUI's text styles all wrap, and XAML's TextWrapping=\"Wrap\" breaks inside a\n word when the word alone overruns the line -- WrapWholeWords is the opt-in\n that does not. A cell here holds a name its operator chose and ids a server\n returned, so the word that overruns is the common case, and a table track\n keeps an unbroken word as its automatic minimum size: without this the column\n widens past the table instead of wrapping in it. A cell that trims rather\n than wraps declares `white-space: nowrap`, which leaves no wrap opportunity\n for this to take.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBlock_themeresources.xaml#L15\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/core/text/RichTextServices/TextFormatter/LsTextLine.cpp#L1093-L1098\n https://drafts.csswg.org/css-text-4/#overflow-wrap-property */\n.fui-TableCell.fui-TableCell {\n overflow-wrap: anywhere;\n}\n\n/* WinUI holds one foreground across normal, pointer-over and pressed.\n `aria-sort` is written exactly when the cell is sortable, which keeps this\n off the header cells that do not respond to a click.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L23-L25 */\n.fui-TableHeaderCell.fui-TableHeaderCell[aria-sort]:hover,\n.fui-TableHeaderCell.fui-TableHeaderCell[aria-sort]:active {\n color: var(--winui-text-fill-primary);\n}\n\n/* Every pointer and selection fill on a ListViewItem collapses onto Highlight\n with a HighlightText foreground. Fluent's own answer is a single-class atom\n that the pinned foreground above outranks, so without this the row would lose\n its one forced-colours state rather than gain WinUI's. The header needs none:\n forced colours repaints every `color` it reaches onto CanvasText, and the\n check box in a selection cell keeps Fluent's drawing, for the reason\n ./choice.css.ts writes down for every check box.\n\n A media query carries no specificity, so each selector repeats the shape of\n the rule it answers.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ListViewItem_themeresources.xaml#L83-L93\n https://drafts.csswg.org/css-color-adjust/#forced-colors-properties */\n@media (forced-colors: active) {\n .fui-TableBody .fui-TableRow.fui-TableRow:hover,\n .fui-TableBody .fui-TableRow.fui-TableRow:active,\n .fui-TableBody .fui-TableRow.fui-TableRow:is([aria-selected='true'], [data-winui-appearance='brand'], [data-winui-appearance='neutral']),\n .fui-TableBody .fui-TableRow.fui-TableRow:is([aria-selected='true'], [data-winui-appearance='brand'], [data-winui-appearance='neutral']):hover,\n .fui-TableBody .fui-TableRow.fui-TableRow:is([aria-selected='true'], [data-winui-appearance='brand'], [data-winui-appearance='neutral']):active {\n background-color: Highlight;\n color: HighlightText;\n }\n}\n";
@@ -0,0 +1 @@
1
+ export declare const tabsCss = "\n/* TabViewItemHeaderForegroundPointerOver resolves to the same\n TextFillColorSecondary as rest, so the pointer alone carries the state.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView_themeresources.xaml#L15\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView_themeresources.xaml#L20 */\n.fui-TabList:not([data-winui-appearance$='-circular']) .fui-Tab:enabled:hover .fui-Tab__content.fui-Tab__content,\n.fui-TabList:not([data-winui-appearance$='-circular']) .fui-Tab:enabled:hover .fui-Tab__icon.fui-Tab__icon {\n color: var(--winui-text-fill-secondary);\n}\n\n/* https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView_themeresources.xaml#L13\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView_themeresources.xaml#L18 */\n.fui-TabList:not([data-winui-appearance$='-circular']) .fui-Tab:enabled:active .fui-Tab__content.fui-Tab__content,\n.fui-TabList:not([data-winui-appearance$='-circular']) .fui-Tab:enabled:active .fui-Tab__icon.fui-Tab__icon {\n color: var(--winui-text-fill-tertiary);\n}\n\n/* https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView_themeresources.xaml#L14 */\n.fui-TabList:not([data-winui-appearance$='-circular']) .fui-Tab[aria-selected='true'] .fui-Tab__content.fui-Tab__content {\n color: var(--winui-text-fill-primary);\n}\n\n/* https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView_themeresources.xaml#L19 */\n.fui-TabList:not([data-winui-appearance$='-circular']) .fui-Tab[aria-selected='true'] .fui-Tab__icon.fui-Tab__icon {\n color: var(--winui-text-fill-primary);\n}\n\n/* Selection holds the primary fill through both pointer states in WinUI, but\n Fluent moves it in both, hence these two combinations.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView.xaml#L354-L372\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView.xaml#L373-L391 */\n.fui-TabList:not([data-winui-appearance$='-circular']) .fui-Tab[aria-selected='true']:enabled:hover .fui-Tab__content.fui-Tab__content,\n.fui-TabList:not([data-winui-appearance$='-circular']) .fui-Tab[aria-selected='true']:enabled:hover .fui-Tab__icon.fui-Tab__icon,\n.fui-TabList:not([data-winui-appearance$='-circular']) .fui-Tab[aria-selected='true']:enabled:active .fui-Tab__content.fui-Tab__content,\n.fui-TabList:not([data-winui-appearance$='-circular']) .fui-Tab[aria-selected='true']:enabled:active .fui-Tab__icon.fui-Tab__icon {\n color: var(--winui-text-fill-primary);\n}\n\n/* The subtle chip drops Fluent's tinted-accent fill in all three of its\n selected states and takes the selected foreground the inline strip already\n uses; the label and icon inherit it through the circular base. Selection\n still outranks the pointer, as above.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/SelectorBar/SelectorBar_themeresources.xaml#L21-L25\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/SelectorBar/SelectorBar_themeresources.xaml#L18\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/TabView/TabView_themeresources.xaml#L19 */\n.fui-TabList[data-winui-appearance='subtle-circular'] .fui-Tab[aria-selected='true'],\n.fui-TabList[data-winui-appearance='subtle-circular'] .fui-Tab[aria-selected='true']:enabled:hover,\n.fui-TabList[data-winui-appearance='subtle-circular'] .fui-Tab[aria-selected='true']:enabled:active {\n background-color: transparent;\n color: var(--winui-text-fill-primary);\n}\n\n/* Repainted only outside High Contrast: Fluent's forced-colors rules hold these\n pseudo-elements on Highlight and ButtonText, and a media query carries no\n specificity, so our rules would otherwise win inside that mode.\n https://github.com/microsoft/fluentui/blob/6dee27b023a2d989f032b4adacb2135d336a67fb/packages/react-components/react-tabs/library/src/components/Tab/useTabStyles.styles.ts#L359-L366\n https://github.com/microsoft/fluentui/blob/6dee27b023a2d989f032b4adacb2135d336a67fb/packages/react-components/react-tabs/library/src/components/Tab/useTabStyles.styles.ts#L453-L463 */\n@media not (forced-colors: active) {\n /* Every unselected Pivot state collapses SelectedPipe, so Fluent's neutral\n selection-preview bar is nulled out; it contributes only a fill.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Pivot_themeresources.xaml#L536-L538\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Pivot_themeresources.xaml#L559-L561 */\n .fui-Tab.fui-Tab:hover::before,\n .fui-Tab.fui-Tab:active::before {\n background-color: transparent;\n }\n\n /* SelectedPipe takes its fill once from the template and no visual state\n overrides it, so Fluent's hover and pressed steps collapse onto the one\n accent fill.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Pivot_themeresources.xaml#L587\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Pivot_themeresources.xaml#L55\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Pivot_themeresources.xaml#L189 */\n .fui-Tab.fui-Tab::after,\n .fui-Tab.fui-Tab:enabled:hover::after,\n .fui-Tab.fui-Tab:enabled:active::after {\n background-color: var(--winui-accent-fill-default);\n }\n\n /* A disabled tab collapses the pipe outright rather than greying it.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Pivot_themeresources.xaml#L499-L501 */\n .fui-Tab.fui-Tab:disabled::after {\n background-color: transparent;\n }\n}\n\n/* Pivot floats the pipe clear of the header's bottom edge with a 2px margin\n where Fluent sits it flush, and states its thickness once as 3px. Horizontal\n only: Fluent's vertical strip reuses the bottom inset as the far edge of a\n left-edge bar, and there is no vertical Pivot to transcribe. Unscoped by tab\n size: Pivot has a single header size, so the one float and the one thickness\n cover Fluent's three, and only the small strip moves, since Fluent's medium\n and large already resolve to the same 3px.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Pivot_themeresources.xaml#L587 */\n.fui-TabList[aria-orientation='horizontal'] > .fui-Tab.fui-Tab::after {\n bottom: 2px;\n height: 3px;\n}\n\n/* Pivot collapses every unselected pipe rather than moving one, so it states no\n timing for a travel and WinUI's general motion tokens stand in. The\n no-preference wrapper is insurance: Fluent's reduced-motion rule already sets\n transition-property to none.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L602-L603 */\n@media (prefers-reduced-motion: no-preference) {\n .fui-Tab.fui-Tab::after {\n transition-duration: var(--winui-control-normal-animation-duration);\n transition-timing-function: var(--winui-control-fast-out-slow-in-easing);\n }\n}\n\n/* Selection does not move the label's weight, in any appearance: Pivot states\n FontWeight once as a style setter that no visual state can reach, and\n SelectorBarItem pins it to Normal. The placeholder holds the width the label\n would take once selected, so it follows the label back to regular weight\n rather than padding every tab by the semibold delta.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Pivot_themeresources.xaml#L478\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/SelectorBar/SelectorBar.xaml#L58 */\n.fui-Tab[aria-selected='true'] .fui-Tab__content.fui-Tab__content,\n.fui-Tab__content--reserved-space.fui-Tab__content--reserved-space {\n font-weight: var(--fontWeightRegular);\n}\n";
@@ -0,0 +1 @@
1
+ export declare const textInputCss = "\n/* WinUI's padding and border carry a text control to 33 and a ComboBox to 34,\n using the WinUI 3 controls dictionary rather than the legacy generic.xaml.\n One shared 34 is our choice: a row mixing an Input with a Combobox is the\n common case, and growing a field keeps its content on its neighbour's\n baseline where shrinking one would not. ./choice.css.ts and ./switch.css.ts\n take the same number.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources.xaml#L10-L12\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/ComboBox/ComboBox_themeresources.xaml#L327\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/ComboBox/ComboBox_themeresources.xaml#L341\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/ComboBox/ComboBox_themeresources.xaml#L342\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/dxaml/themes/generic.xaml#L96\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/dxaml/themes/generic.xaml#L173-L175 */\n.fui-Input.fui-Input,\n.fui-Combobox.fui-Combobox {\n min-height: 34px;\n}\n\n/* Fluent reserves a 2px band at the bottom of a Textarea root so the browser's\n resize grip cannot sit on the focus strip. Our Textarea withholds the resize\n prop, so there is no grip, and the band would otherwise leave bare fill under\n the last line and carry the focus strip 2px further down than the strip of a\n single-line field standing on the same baseline. WinUI draws multi-line and\n single-line from the one TextBox template: one ScrollViewer filling\n BorderElement under a uniform TextControlThemePadding, no grip, and a focus\n underline that is the border's own bottom edge thickening.\n https://github.com/microsoft/fluentui/blob/4aa1084999a8c1ac7245724ad6c76210fe80acf6/packages/react-components/react-textarea/library/src/components/Textarea/useTextareaStyles.styles.ts#L20-L22\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L194\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L296-L303\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L336-L337 */\n.fui-Textarea.fui-Textarea {\n padding-bottom: 0;\n}\n\n/* Redefining Background1 reaches exactly the appearances the state rules below\n name, because those are the ones whose atoms read it.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L23\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L130 */\n.fui-Input.fui-Input,\n.fui-Textarea.fui-Textarea {\n --colorNeutralBackground1: var(--winui-control-fill-default);\n}\n\n/* Excludes both states that outrank PointerOver: a disabled field, whose Fluent\n atom this would otherwise outrank, and a focused one.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L24\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L131\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L275-L290 */\n.fui-Input.fui-Input:is([data-winui-appearance='outline'],[data-winui-appearance='filled-lighter'],[data-winui-appearance='filled-lighter-shadow']):hover:not(:focus-within):not(:has(> .fui-Input__input:disabled)),\n.fui-Textarea.fui-Textarea:is([data-winui-appearance='outline'],[data-winui-appearance='filled-lighter'],[data-winui-appearance='filled-lighter-shadow']):hover:not(:focus-within):not(:has(> .fui-Textarea__textarea:disabled)) {\n background-color: var(--winui-control-fill-secondary);\n}\n\n/* A disabled field cannot take focus, so no exclusion is needed here.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L25\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L132\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L291-L300 */\n.fui-Input.fui-Input:is([data-winui-appearance='outline'],[data-winui-appearance='filled-lighter'],[data-winui-appearance='filled-lighter-shadow']):focus-within,\n.fui-Textarea.fui-Textarea:is([data-winui-appearance='outline'],[data-winui-appearance='filled-lighter'],[data-winui-appearance='filled-lighter-shadow']):focus-within {\n background-color: var(--winui-control-fill-input-active);\n}\n\n/* A text control has no pressed state -- Pressed is Focused -- so the second\n selector respends the colour on the strip Fluent darkens when the pointer\n goes down inside a focused field; Fluent's rule for that combination ties the\n first selector on weight, so only naming the combination outranks it. Stated\n on the strip rather than the token Fluent reads, so it cannot inherit into\n whatever a caller puts in the content slots.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L57-L65\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L164-L172\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/core/native/text/Controls/TextBoxBase.cpp#L3551-L3555\n https://github.com/microsoft/fluentui/blob/4aa1084999a8c1ac7245724ad6c76210fe80acf6/packages/react-components/react-input/library/src/components/Input/useInputStyles.styles.ts#L109-L112\n https://github.com/microsoft/fluentui/blob/4aa1084999a8c1ac7245724ad6c76210fe80acf6/packages/react-components/react-textarea/library/src/components/Textarea/useTextareaStyles.styles.ts#L86-L89 */\n.fui-Input.fui-Input::after,\n.fui-Input.fui-Input:focus-within:active::after,\n.fui-Textarea.fui-Textarea::after,\n.fui-Textarea.fui-Textarea:focus-within:active::after {\n border-bottom-color: var(--winui-accent-base);\n}\n\n/* Disabled keeps a fill where Fluent empties it to the transparent background.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L26\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L133\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L261-L263 */\n.fui-Input.fui-Input:is([data-winui-appearance='outline'],[data-winui-appearance='filled-lighter'],[data-winui-appearance='filled-lighter-shadow']):has(> .fui-Input__input:disabled),\n.fui-Textarea.fui-Textarea:is([data-winui-appearance='outline'],[data-winui-appearance='filled-lighter'],[data-winui-appearance='filled-lighter-shadow']):has(> .fui-Textarea__textarea:disabled) {\n background-color: var(--winui-control-fill-disabled);\n}\n\n/* WinUI gives PointerOver the same brush as rest, so both Fluent hover strokes\n point back at the rest pair.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L28\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L48-L56\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L135\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L155-L163 */\n.fui-Input.fui-Input,\n.fui-Textarea.fui-Textarea {\n --colorNeutralStroke1Hover: var(--winui-control-stroke-default);\n --colorNeutralStrokeAccessibleHover: var(--winui-control-strong-stroke-default);\n}\n\n/* Focus flattens the stroke, the accent living only in the bottom gradient\n stop. Fluent reaches that state through its Pressed pair, and the foundation\n already gives colorNeutralStroke1Pressed the flat stroke, so only the\n accessible half is restated. The bottom edge needs no restatement: the accent\n strip above covers it while focused, including the compound brand colour\n Textarea alone puts there.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L29\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L57-L65\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L136\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L164-L172\n https://github.com/microsoft/fluentui/blob/4aa1084999a8c1ac7245724ad6c76210fe80acf6/packages/react-components/react-textarea/library/src/components/Textarea/useTextareaStyles.styles.ts#L136-L139 */\n.fui-Input.fui-Input,\n.fui-Textarea.fui-Textarea {\n --colorNeutralStrokeAccessiblePressed: var(--winui-control-stroke-default);\n}\n\n/* One step lighter than the dedicated disabled stroke the foundation installs\n for the rest of the library.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L30\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L137\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L264-L266 */\n.fui-Input.fui-Input,\n.fui-Textarea.fui-Textarea {\n --colorNeutralStrokeDisabled: var(--winui-control-stroke-default);\n}\n\n/* A rejected value does not recolour the field. Shipped WinUI 3 has no\n field-level error affordance at all: the input-validation design is present\n in the dxaml templates, but the API is stripped from the release WinMD, the\n XAML compiler skips the INotifyDataErrorInfo bridge once that type probe\n fails, and the WinUI 3 dictionaries replace those templates with ones that\n carry no error state -- there is even a build target named\n DeleteInputValidate to scrub leftovers. Nothing under controls/dev assigns a\n SystemFill role to a BorderBrush in any state; InfoBar, the one shipped error\n surface, keeps the severity-neutral card stroke and says error in its fill,\n its icon and its text. So the message beside the field carries the state --\n ./field.css.ts paints it SystemFillColorCritical -- and the stroke holds its\n rest value, which is the redefinition below.\n\n The bottom edge cannot ride that redefinition: Fluent's invalid atom writes\n all four longhands from the one token, so the accessible bottom stroke is\n restated. It is guarded against the two states that outrank Invalid, and\n Fluent's own atom is likewise written against :not(:focus-within).\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/dll/Microsoft.UI.Xaml.Common.targets#L391\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/tools/UpdateThemeResources.ps1\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/inc/FeatureFlags.h#L20-L31\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/src/XamlCompiler/BuildTasks/CompileXamlInternal.cs#L1912\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L178\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/InfoBar/InfoBar_themeresources.xaml#L20\n https://github.com/microsoft/fluentui/blob/4aa1084999a8c1ac7245724ad6c76210fe80acf6/packages/react-components/react-input/library/src/components/Input/useInputStyles.styles.ts#L163-L167 */\n.fui-Input.fui-Input,\n.fui-Textarea.fui-Textarea {\n --colorPaletteRedBorder2: var(--colorNeutralStroke1);\n}\n\n.fui-Input.fui-Input:has(> .fui-Input__input[aria-invalid='true']):not(:focus-within):not(:has(> .fui-Input__input:disabled)),\n.fui-Textarea.fui-Textarea:has(> .fui-Textarea__textarea[aria-invalid='true']):not(:focus-within):not(:has(> .fui-Textarea__textarea:disabled)) {\n border-bottom-color: var(--colorNeutralStrokeAccessible);\n}\n\n/* WinUI holds the placeholder one step more prominent than Fluent's Foreground4\n through hover and focus; its disabled step already arrives through Fluent's\n own disabled atom on the inner control.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L35-L38\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L142-L145 */\n.fui-Input.fui-Input,\n.fui-Textarea.fui-Textarea {\n --colorNeutralForeground4: var(--winui-text-fill-secondary);\n}\n\n/* The affordances flanking the field take the colour WinUI gives the control's\n own inner buttons. Their hover and pressed steps stay with whatever component\n a caller puts in the slot, and their disabled step stays with Fluent, whose\n atom on the slot outranks this redefinition. Textarea has no such slots.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L45\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L152 */\n.fui-Input.fui-Input {\n --colorNeutralForeground3: var(--winui-text-fill-secondary);\n}\n\n/* WinUI keys TextControlForegroundDisabled to TemporaryTextFillColorDisabled,\n one step off TextFillColorDisabled, splitting what Fluent reads from a single\n variable for both disabled text and disabled placeholder. The placeholder side\n is already right, so the text side is a declaration rather than a\n redefinition.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L34\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L141\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L145 */\n.fui-Input__input.fui-Input__input:disabled,\n.fui-Textarea__textarea.fui-Textarea__textarea:disabled {\n color: var(--winui-temporary-text-fill-disabled);\n}\n\n";
@@ -0,0 +1 @@
1
+ export declare const textCss = "\n/* WinUI names exactly one divider brush, so only Fluent's default appearance --\n the one reading colorNeutralStroke2 -- has something to move onto. That\n appearance reaches the DOM as a hashed atom, so the token it reads is\n redeclared rather than the class named, and it is declared on the two\n pseudo-elements that consume it instead of on the root, which keeps the remap\n off caller-supplied divider children.\n\n Light already agrees, so this is a dark-theme correction: the theme layer\n maps colorNeutralStroke2 to the card outline, which in dark is black, while\n WinUI's divider is a white wash.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L53\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L257\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L471\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/AppBarSeparator_themeresources.xaml#L28-L48 */\n.fui-Divider.fui-Divider::before,\n.fui-Divider.fui-Divider::after {\n --colorNeutralStroke2: var(--winui-divider-stroke-default);\n}\n\n/* Selection highlight. WinUI keys the band behind selected text to the accent\n and the glyphs over it to TextOnAccentFillColorSelectedText, and both\n dictionaries state the same pair, so the highlight does not flip with the\n theme. Every text-editing style restates the background half and no template\n names the foreground half; the web has one selection per document, so both\n are stated once here, which also reaches static text.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L11\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L215\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L425\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/Common_themeresources_any.xaml#L452\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L183 */\n::selection {\n background-color: var(--winui-accent-fill-selected-text-background);\n color: var(--winui-text-on-accent-fill-selected-text);\n}\n";
@@ -0,0 +1 @@
1
+ export declare const toastCss: string;
@@ -0,0 +1 @@
1
+ export declare const toolbarCss = "\n/* A command bar item's label runs at 12, two steps below the 14 Fluent's button\n reset uses: AppBarButton states it on its own TextLabel and\n SplitButtonCommandBarStyle repeats it as a Setter, in neither case from a\n visual state, so one value covers every state and both schemes. The selector\n also catching a plain Button, a MenuButton trigger or either half of a\n SplitButton hosted in a toolbar is the intent -- WinUI states this typography\n by host, not by control -- and so is its reaching a toolbar at any Fluent\n size. The line box stays Fluent's 20px: neither control states a LineHeight,\n and taking the 16px step that pairs with 12px would shrink the item from 32px\n to 28, further from the 40px command bar row than Fluent's 32 already is.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/dxaml/themes/generic.xaml#L19402-L19406\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/SplitButton/SplitButton_themeresources.xaml#L104-L119 */\n.fui-Toolbar .fui-Button.fui-Button {\n font-size: var(--fontSizeBase200);\n}\n";
@@ -0,0 +1 @@
1
+ export declare const tooltipCss = "\n/* The doubled class name outranks the atoms Fluent composes for its inverted\n surface; pinning the fill alone would leave that appearance's inverted\n foreground standing on our own fill.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ToolTip_themeresources.xaml#L43\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ToolTip_themeresources.xaml#L44\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ToolTip_themeresources.xaml#L46\n\n ToolTipBorderPadding is 9,6,9,8, read in XAML's left, top, right, bottom\n order.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ToolTip_themeresources.xaml#L50\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ToolTip_themeresources.xaml#L76\n\n ToolTipMaxWidth is 320.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ToolTip_themeresources.xaml#L51\n\n The shadow's derivation is recorded at the token in ../tokens.ts. It is\n written as a filter because that is the property Fluent spends here, and a\n box-shadow would leave both painted. */\n.fui-Tooltip__content.fui-Tooltip__content {\n border-color: var(--winui-surface-stroke-flyout);\n background-color: var(--winui-acrylic-in-app-fill-default);\n color: var(--winui-text-fill-primary);\n padding: 6px 9px 8px 9px;\n max-width: 320px;\n filter: drop-shadow(0 4px 9px var(--winui-tooltip-shadow-color));\n}\n\n/* Forced colours already produce ToolTip's HighContrast fill, stroke and\n foreground. Only the shadow needs an answer: a filter is not a forced-colors\n property, and WinUI casts no drop shadow while a high contrast theme is\n active.\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/ToolTip_themeresources.xaml#L16-L27\n https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/dxaml/xcp/components/comptree/HWCompNodeWinRT.cpp#L3962-L3970\n https://drafts.csswg.org/css-color-adjust/#forced-colors-properties */\n@media (forced-colors: active) {\n .fui-Tooltip__content.fui-Tooltip__content {\n filter: none;\n }\n}\n";
@@ -0,0 +1,2 @@
1
+ export declare const focusRectStrokes = "\n box-shadow: inset 0 0 0 var(--winui-focus-visual-depth) var(--winui-focus-stroke-inner);\n outline: var(--winui-focus-visual-primary-thickness) solid var(--winui-focus-stroke-outer);\n outline-offset: calc(-1 * var(--winui-focus-visual-primary-thickness));\n";
2
+ export declare const focusRectCss = "\n.winui-focus-rect:focus-visible,\n.winui-focus-rect-within :focus-visible {\n box-shadow: inset 0 0 0 var(--winui-focus-visual-depth) var(--winui-focus-stroke-inner);\n outline: var(--winui-focus-visual-primary-thickness) solid var(--winui-focus-stroke-outer);\n outline-offset: calc(-1 * var(--winui-focus-visual-primary-thickness));\n}\n";
@@ -0,0 +1 @@
1
+ export declare const winuiCss: string;
@@ -0,0 +1,29 @@
1
+ export declare const CONTROL_NORMAL_ANIMATION_MS = 250;
2
+ export declare const CONTROL_FAST_ANIMATION_MS = 167;
3
+ export declare const CONTROL_FASTER_ANIMATION_MS = 83;
4
+ export declare const CONTROL_FAST_OUT_SLOW_IN_EASING = "cubic-bezier(0, 0, 0, 1)";
5
+ export declare const PANE_SLIDE_MS = 350;
6
+ export declare const PANE_SLIDE_OUT_MS = 120;
7
+ export declare const PANE_SLIDE_EASING = "cubic-bezier(0.1, 0.9, 0.2, 1)";
8
+ export declare const EXPAND_ANIMATION_MS = 333;
9
+ export declare const COLLAPSE_ANIMATION_MS = 167;
10
+ export declare const CHEVRON_TURN_MS: number;
11
+ export declare const CHEVRON_TURN_EASING = "cubic-bezier(0.167, 0.167, 0, 1)";
12
+ export declare const REPOSITION_ANIMATION_MS = 367;
13
+ export declare const REPOSITION_EASING = "cubic-bezier(0.1, 0.9, 0.2, 1)";
14
+ export declare const REPOSITION_DELETE_DELAY_MS = 60;
15
+ export declare const POPUP_SLIDE_MS = 367;
16
+ export declare const POP_IN_OFFSET_PX = 40;
17
+ export declare const POPUP_FADE_MS = 83;
18
+ export declare const POPUP_FADE_DELAY_MS = 83;
19
+ export declare const POPUP_HIDE_MS = 83;
20
+ export declare const POPUP_SLIDE_EASING = "cubic-bezier(0.1, 0.9, 0.2, 1)";
21
+ export declare const INDICATOR_DURATION_MS = 600;
22
+ export declare const INDICATOR_POSITION_SNAP = 0.333;
23
+ export declare const INDICATOR_STRETCH_EASING = "cubic-bezier(0.9, 0.1, 1, 0.2)";
24
+ export declare const INDICATOR_SETTLE_EASING = "cubic-bezier(0.1, 0.9, 0.2, 1)";
25
+ export declare const PAGE_LEAVE_MS = 150;
26
+ export declare const PAGE_ENTER_MS = 300;
27
+ export declare const PAGE_ENTER_OFFSET_PX = 140;
28
+ export declare const PAGE_LEAVE_EASING = "cubic-bezier(0.7, 0, 1, 0.5)";
29
+ export declare const PAGE_ENTER_EASING = "cubic-bezier(0.1, 0.9, 0.2, 1)";
@@ -0,0 +1,2 @@
1
+ export declare const PAGE_LEAVE_ANIMATION = "fwt-page-leave";
2
+ export declare const pageTransitionCss = "\n /* The legs are strictly sequential, so the entering animation fills forwards:\n a delayed animation's default fill leaves the element at its own resting\n style, overlapping the two pages for the length of the delay. Incoming\n opacity is two discrete key frames that never interpolate, as in the\n source. */\n .fwt-page-leaving {\n animation: fwt-page-leave var(--winui-page-leave-duration)\n var(--winui-page-leave-easing) forwards;\n pointer-events: none;\n }\n .fwt-page-entering {\n animation: fwt-page-enter var(--winui-page-enter-duration)\n var(--winui-page-enter-easing) var(--winui-page-leave-duration) forwards;\n opacity: 0;\n }\n @keyframes fwt-page-leave { to { opacity: 0; } }\n @keyframes fwt-page-enter {\n from { opacity: 1; translate: 0 var(--winui-page-enter-offset); }\n to { opacity: 1; translate: none; }\n }\n\n /* Only the resting position is stated here; ../../routes/dashboard.tsx starts\n the reload entrance on the element, because a CSS animation takes its start\n time from the frame its style was recalculated in rather than the frame it\n is first painted in -- this frame is recalculated mid-hydration, so 84ms of\n its 300 had already run by the time it reached the screen. That script also\n adds this class, so nothing holds the frame down unless the thing that\n lifts it already exists, and the animation's forwards fill outranks this\n declaration afterwards. */\n .fwt-page-entrance {\n translate: 0 var(--winui-page-enter-offset);\n }\n\n /* Both legs are clamped rather than dropped so the pair still runs in order\n and still fires; the reload entrance is skipped instead, because script\n starts it and script can ask. Arriving from below is motion animation by\n WCAG's definition, which turns on perceived position.\n https://github.com/w3c/wcag/blob/900ea026b967bc306a2cdbe0c586330a508d6759/guidelines/terms/21/motion-animation.html#L3-L4 */\n @media (prefers-reduced-motion: reduce) {\n .fwt-page-leaving { animation-duration: 0.01ms; }\n .fwt-page-entering {\n animation-delay: 0.01ms;\n animation-duration: 0.01ms;\n }\n }\n";
@@ -0,0 +1,3 @@
1
+ import type { FluentComponents } from './wrap';
2
+ export declare const createToastPresence: (components: FluentComponents) => import("@fluentui/react-components").PresenceComponent<{}>;
3
+ export declare const withWinuiMotion: (components: FluentComponents) => FluentComponents;
@@ -0,0 +1 @@
1
+ export declare const progressIndeterminateCss: (first: string, second: string) => string;
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Tracks one stack of elements across layout changes.
3
+ *
4
+ * Call the returned function from a layout effect with the stack in document
5
+ * order, on every render: it is the comparison against the previous call that
6
+ * detects a move, so a call that finds nothing changed is not a wasted one.
7
+ */
8
+ export declare const createReposition: () => (elements: readonly HTMLElement[]) => void;
@@ -0,0 +1 @@
1
+ export declare const winuiResetCss = "\n*,\n*::before,\n*::after {\n background-clip: padding-box;\n}\n";
@@ -0,0 +1,2 @@
1
+ import type { FluentComponents } from './wrap';
2
+ export declare const withWinuiDrag: (components: FluentComponents) => FluentComponents;