/* ============================================ TextControl Styles ============================================ All CSS that is referenced ONLY by TextControl.razor lives here. Loaded as a separate global stylesheet (NOT Blazor-isolated) because the rules pierce into FluentUI web components (fluent-text-field, fluent-text-area) via descendant selectors and ::part() pseudo- elements. CSS isolation cannot reach these elements — they are emitted by child Blazor components and do not receive the parent component's [b-xxx] scope attribute. */ /* ============================================ TextControl — Plain Cell Defaults ============================================ By default, TextControl renders as a borderless, transparent cell that fills its parent container. This makes it a drop-in for grid cells and other containers that supply their own visual treatment. Hosts that want a standalone text-area look should add their own border/background via ClassParameter or a wrapping container. !important is required because FAST shadow DOM internal styles override external ::part() rules at normal cascade priority. */ .sc-ui-text-control { width: 100%; height: 100%; } /* ---- Single-line (fluent-text-field) ---- */ .sc-ui-text-control fluent-text-field { width: 100%; height: 100%; min-width: 0; display: block; } .sc-ui-text-control fluent-text-field::part(root) { border: none !important; background: transparent !important; padding: 0 !important; height: 100%; } .sc-ui-text-control fluent-text-field::part(control) { padding: 2px 4px; height: 100%; } /* ---- Multi-line (fluent-text-area) ---- fluent-text-area's shadow DOM applies its border via design tokens on the host element (--neutral-stroke-rest) and internal styles on a non-exposed div. Override at the host level + ::part selectors. Use the same pattern that works for fluent-text-field. --design-unit and --stroke-width are zeroed to collapse padding on the unreachable div.control wrapper between ::part(root) and ::part(control) — without this, the scrollbar sits inset from the cell edge. */ .sc-ui-text-control fluent-text-area { width: 100%; height: 100%; min-width: 0; display: block; --design-unit: 0; --stroke-width: 0; --neutral-stroke-rest: transparent; --neutral-stroke-hover: transparent; --neutral-stroke-active: transparent; --neutral-stroke-focus: transparent; --neutral-fill-input-rest: transparent; --neutral-fill-input-hover: transparent; --neutral-fill-input-active: transparent; --neutral-fill-input-focus: transparent; } .sc-ui-text-control fluent-text-area::part(root) { border: none !important; background: transparent !important; padding: 0 !important; height: 100%; box-shadow: none !important; display: flex !important; flex-direction: column !important; } .sc-ui-text-control fluent-text-area::part(control) { padding: 2px 4px; resize: none; overflow-y: auto; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; height: 100% !important; border: none !important; box-shadow: none !important; background: transparent !important; } /* ============================================ TextControl — Horizontal Images Stretch Behavior ============================================ Unlike ChoiceControl (which shrink-wraps to its picker's intrinsic width so the right-side image hugs the widget), TextControl intentionally KEEPS width: 100% even when horizontal images are present. Rationale: - A text input's primary value is visible-character count; the more horizontal room, the less the user has to scroll. - A right-side image at the container's right edge is a well-established pattern (search icon, clear button, unit suffix) — see browser address bar, IDE search boxes, etc. - Image-less TextControl variants already stretch full-width; keeping image variants consistent avoids visual surprise. The base .sc-ui-text-control width: 100% / height: 100% (and child fluent-text-field / fluent-text-area width: 100%) already produce the correct stretched layout. The flex: 1 / min-width: 0 rule below ensures the input flex-grows between the left and right images inside the .sc-ui-image-horizontal flex row instead of collapsing to its intrinsic width and leaving a gap before the right image. */ .sc-ui-text-control.sc-ui-image-horizontal fluent-text-field, .sc-ui-text-control.sc-ui-image-horizontal fluent-text-area { flex: 1; min-width: 0; } /* ============================================ TextControl — Recessed Input Cue (Opt-In) ============================================ Default TextControl is borderless/transparent for grid/spreadsheet cells. Opt in to a visible "input pocket" cue via either: - Metadata: DisplayFlagsEnum.ShowRecessed - Component: ShowRecessedParameter="true" Why outline + FAST tokens: - outline renders OUTSIDE the host box, ignoring shadow DOM — identical effect on fluent-text-field and fluent-text-area with no ::part() overrides or !important. - --neutral-stroke-strong-rest and --neutral-foreground-rest are NOT zeroed by the textarea transparent baseline (only --neutral-stroke-rest and --neutral-fill-input-* are), so they adapt to whichever theme FluentDesignTheme is rendering — light OR dark, OS-driven OR app-forced. - color-mix() converts the foreground token to a faint translucent fill that works against any background. */ .sc-ui-text-control-recessed fluent-text-field, .sc-ui-text-control-recessed fluent-text-area { outline: 1px solid rgba(0, 0, 0, 0.18); outline-offset: -1px; border-radius: 4px; background-color: color-mix(in srgb, var(--neutral-foreground-rest, #808080) 6%, transparent); transition: outline-color 0.15s ease; } /* ============================================ TextControl — Recessed Editable (Light Mode White Pocket) ============================================ The base .sc-ui-text-control-recessed rule above uses a faint translucent fill derived from --neutral-foreground-rest. That reads well for readonly (both themes) and for editable in DARK mode, but in LIGHT mode editable inputs should look like a true white "input pocket" with a slight sunken cue. Scope is intentionally narrow: - :not([readonly]) — preserves the readonly look exactly. - light-dark(white, ) — preserves dark mode exactly by re-asserting the same color-mix() value the base rule already uses. - inset box-shadow only in light mode (transparent in dark) provides the subtle sunken edge without touching the outline. */ .sc-ui-text-control-recessed fluent-text-field:not([readonly]), .sc-ui-text-control-recessed fluent-text-area:not([readonly]) { background-color: light-dark( #ffffff, color-mix(in srgb, var(--neutral-foreground-rest, #808080) 6%, transparent) ); } /* ============================================ TextControl — Recessed Readonly (Dark Mode De-emphasis) ============================================ In LIGHT mode, the base translucent fill on a white card already reads as a muted, non-editable surface — leave it alone. In DARK mode, the base translucent fill is visually identical to the editable variant (both derive from --neutral-foreground-rest), making readonly indistinguishable from editable. Differentiate by removing the input-pocket affordance: - transparent fill (flush with the card) - very faint outline (chrome nearly disappears) - dimmed foreground (reads as informational, still ≥ AA contrast) - default cursor (no text caret affordance) Scope is intentionally narrow: - [readonly] only — editable variants are untouched. - light-dark(, ) — light mode re-asserts the exact base values so nothing changes there. - No hover/focus rules — readonly should not react. */ .sc-ui-text-control-recessed fluent-text-field[readonly], .sc-ui-text-control-recessed fluent-text-area[readonly] { background-color: light-dark( color-mix(in srgb, var(--neutral-foreground-rest, #808080) 6%, transparent), transparent ); outline-color: light-dark( rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.08) ); cursor: default; } .sc-ui-text-control-recessed fluent-text-field[readonly]::part(control), .sc-ui-text-control-recessed fluent-text-area[readonly]::part(control) { color: light-dark( var(--neutral-foreground-rest), rgba(255, 255, 255, 0.72) ); cursor: default; }