@pstrikez/fluent-winui-theme 0.1.2 → 0.2.0

package/dist/winui/controls/dialog.css.d.ts

@@ -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";
+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/* 960px is likewise our own measure, for a dialog whose content is a table or\n   a side-by-side comparison rather than a form -- a preview of rows to be\n   changed, or source and target text in two columns -- where the editor\n   measure would wrap every row. Same window inset as the editor measure. */\n.fwt-dialog-shell--wide {\n  --fwt-dialog-max-width: min(960px, 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";

package/dist/winui/controls/spin-button.css.d.ts

@@ -0,0 +1 @@
+export declare const spinButtonCss = "\n/* Grid: field, up, down. The field column is minmax(0, 1fr) so a long value\n   cannot push the buttons out of the border. The root takes the field's 34px\n   row (see ./text-input.css.ts) and NumberBoxMinWidth 120 for the whole box.\n   Fluent's 24px end column, its column gap and its half-height rows give way;\n   the buttons bring their own 4px margins.\n   https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/NumberBox/NumberBox_themeresources.xaml#L34\n   https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/NumberBox/NumberBox.xaml#L33\n   https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/NumberBox/NumberBox.xaml#L109-L111 */\n.fui-SpinButton.fui-SpinButton {\n  grid-template-columns: minmax(0, 1fr) auto auto;\n  grid-template-rows: minmax(0, 1fr);\n  column-gap: 0;\n  min-height: 34px;\n  min-width: 120px;\n}\n\n.fui-SpinButton__input.fui-SpinButton__input {\n  grid-area: 1 / 1 / 2 / 2;\n  min-width: 0;\n}\n\n/* Up is Margin 4 and down is 0,4,4,4, so the pair sits 4px from the edge and\n   from each other, each at least 32 wide and as tall as the field less the\n   margins. Fluent's buttons are absolutely positioned 16px halves with their\n   own padding and a corner on one side only; all of that is replaced. The\n   corner radius is the control's.\n   https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/NumberBox/NumberBox.xaml#L174-L175\n   https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/NumberBox/NumberBox.xaml#L185-L189 */\n.fui-SpinButton__incrementButton.fui-SpinButton__incrementButton,\n.fui-SpinButton__decrementButton.fui-SpinButton__decrementButton {\n  position: static;\n  grid-row: 1;\n  align-self: stretch;\n  box-sizing: border-box;\n  width: auto;\n  min-width: 32px;\n  height: auto;\n  padding: 0;\n  font-size: 12px;\n  border-radius: var(--winui-control-corner-radius);\n}\n\n.fui-SpinButton__incrementButton.fui-SpinButton__incrementButton {\n  grid-column: 2;\n  margin: 4px;\n}\n\n.fui-SpinButton__decrementButton.fui-SpinButton__decrementButton {\n  grid-column: 3;\n  margin: 4px 4px 4px 0;\n}\n\n/* Redefining Background1 reaches the appearances the state rules below name.\n   https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L23 */\n.fui-SpinButton.fui-SpinButton {\n  --colorNeutralBackground1: var(--winui-control-fill-default);\n}\n\n/* Hover, focus and disabled fills, with a text control's precedence: disabled\n   over focused over pointer-over.\n   https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L24-L26 */\n.fui-SpinButton.fui-SpinButton:is([data-winui-appearance='outline'],[data-winui-appearance='filled-lighter']):hover:not(:focus-within):not(:has(> .fui-SpinButton__input:disabled)) {\n  background-color: var(--winui-control-fill-secondary);\n}\n\n.fui-SpinButton.fui-SpinButton:is([data-winui-appearance='outline'],[data-winui-appearance='filled-lighter']):focus-within {\n  background-color: var(--winui-control-fill-input-active);\n}\n\n.fui-SpinButton.fui-SpinButton:is([data-winui-appearance='outline'],[data-winui-appearance='filled-lighter']):has(> .fui-SpinButton__input:disabled) {\n  background-color: var(--winui-control-fill-disabled);\n}\n\n/* The strip is the accent while focused, including while pressed. Strokes:\n   hover keeps the rest pair, focus flattens it, disabled sits one step lighter\n   than the foundation's disabled stroke, and a rejected value does not recolour\n   the field (see ./text-input.css.ts for why).\n   https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L28-L30\n   https://github.com/microsoft/microsoft-ui-xaml/blob/188f602b27cdb47572b28c380e9c087b02e1ccee/controls/dev/CommonStyles/TextBox_themeresources.xaml#L57-L65 */\n.fui-SpinButton.fui-SpinButton::after,\n.fui-SpinButton.fui-SpinButton:focus-within:active::after {\n  border-bottom-color: var(--winui-accent-base);\n}\n\n.fui-SpinButton.fui-SpinButton {\n  --colorNeutralStroke1Hover: var(--winui-control-stroke-default);\n  --colorNeutralStrokeAccessibleHover: var(--winui-control-strong-stroke-default);\n  --colorNeutralStrokeAccessiblePressed: var(--winui-control-stroke-default);\n  --colorNeutralStrokeDisabled: var(--winui-control-stroke-default);\n  --colorPaletteRedBorder2: var(--colorNeutralStroke1);\n}\n\n.fui-SpinButton.fui-SpinButton:has(> .fui-SpinButton__input[aria-invalid='true']):not(:focus-within):not(:has(> .fui-SpinButton__input:disabled))::before {\n  border-bottom-color: var(--colorNeutralStrokeAccessible);\n}\n\n/* Placeholder, text and button glyph colours. The inner buttons take\n   TextControlButtonForeground: secondary at rest and hovered, tertiary pressed,\n   where Fluent's ramp has them one step lighter. Their backgrounds\n   (transparent, SubtleFill secondary, tertiary) are already what the foundation\n   maps Fluent's subtle backgrounds to.\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#L40-L47 */\n.fui-SpinButton.fui-SpinButton {\n  --colorNeutralForeground4: var(--winui-text-fill-secondary);\n  --colorNeutralForeground3: var(--winui-text-fill-secondary);\n  --colorNeutralForeground3Hover: var(--winui-text-fill-secondary);\n  --colorNeutralForeground3Pressed: var(--winui-text-fill-tertiary);\n}\n\n.fui-SpinButton__input.fui-SpinButton__input:disabled {\n  color: var(--winui-temporary-text-fill-disabled);\n}\n";