SearSuite
← All packages

API reference

@searsuite/sear-plugin-web-toolbar

Web Sheet toolbar controls built on typed commands and observations.

9 exportsderived from source

classSearWebToolbarsource ↗
class SearWebToolbar extends SearToolbar

Browser DOM toolbar implementation for the sheet editor.

constructorconstructor
SearWebToolbar(searCore: SearCoreSheet, platform: Platform, embeddedEditor: SheetEmbeddedEditor, clipboard: SheetClipboard, userInteraction: UserInteractionService, commands?: SheetCommandBus, history?: SheetHistoryStatusProvider, queries?: SheetQueryRegistry, observations?: ObservationRegistry, fileDownload?: FileDownload): SearWebToolbar

Constructs the toolbar adapter for one sheet editor.

searCore: SearCoreSheet
platform: Platform
embeddedEditor: SheetEmbeddedEditor
clipboard: SheetClipboard
userInteraction: UserInteractionService
commands: SheetCommandBus
history: SheetHistoryStatusProvider
queries: SheetQueryRegistry
observations: ObservationRegistry
fileDownload: FileDownload
propertysymbolstatic
readonly symbol: typeof symbol

DI token for resolving the web toolbar adapter.

methoddestroy
destroy(): void

Removes DOM nodes and subscriptions owned by the toolbar.

methodmount
mount(target: unknown): void

Mounts the toolbar into a host DOM element.

target: unknown
classWebFormulaBarsource ↗
class WebFormulaBar extends SearFormulaBar

Web formula input surface backed by the Sheet editor's own edit session.

constructorconstructor
WebFormulaBar(platform: Platform, commands: SheetCommandBus, queries: SheetQueryRegistry, observations: ObservationRegistry, core: SearCoreSheet): WebFormulaBar
platform: Platform
commands: SheetCommandBus
queries: SheetQueryRegistry
observations: ObservationRegistry
core: SearCoreSheet
propertysymbolstatic
readonly symbol: typeof symbol
methoddestroy
destroy(): void
methodmount
mount(target: unknown): void
target: unknown
classWebSheetClipboardsource ↗
class WebSheetClipboard extends SheetClipboard

Browser Clipboard API adapter; DOM events never cross this boundary.

constructorconstructor
WebSheetClipboard(): WebSheetClipboard
methodread
read(): Promise<SheetClipboardPayload | null>
methodwrite
write(payload: SheetClipboardPayload): Promise<void>
payload: SheetClipboardPayload
Inherited members 1

Inherited from SheetClipboard.

variableTOOLBAR_CSSsource ↗
TOOLBAR_CSS: "\n.sear-sheet-context-menu { position: fixed; z-index: 10020; min-width: 148px; padding: 4px; background: #fff; color: #222; border: 1px solid #dcdde5; border-radius: 6px; box-shadow: 0 8px 24px #0002; font: 13px sans-serif; }\n.sear-sheet-context-menu button { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 3px; background: transparent; color: inherit; text-align: left; cursor: pointer; }\n.sear-sheet-context-menu button:hover, .sear-sheet-context-menu button:focus-visible { background: #eef3ff; outline: 0; }\n.sear-cell-border-menu { position: fixed; z-index: 10000; display: flex; gap: 16px; box-sizing: border-box; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; padding: 12px; background: #fff; color: #222; border: 1px solid #dcdde5; border-radius: 8px; box-shadow: 0 8px 24px #0002; font: 14px sans-serif; }\n.sear-cell-border-presets { display: grid; grid-template-columns: repeat(3, 42px); gap: 4px; }\n.sear-cell-border-presets button { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #303438; cursor: pointer; }\n.sear-cell-border-presets button:hover { background: #eef0f2; }\n.sear-cell-border-presets button:focus-visible { outline: 2px solid #386ef6; }\n.sear-cell-border-controls { width: 164px; display: flex; flex-direction: column; gap: 16px; }\n.sear-cell-border-controls label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n.sear-cell-border-controls input { width: 114px; height: 32px; padding: 3px; border: 1px solid #dcdde5; border-radius: 4px; background: white; cursor: pointer; }\n.sear-cell-border-controls select { width: 114px; height: 32px; border: 1px solid #dcdde5; border-radius: 4px; background: white; color: #222; }\n.sear-cell-border-preview { display: grid; place-items: center; height: 32px; border-top: 1px solid #eef0f2; }\n@media (max-width: 360px) {\n .sear-cell-border-menu { flex-direction: column; box-sizing: border-box; width: calc(100vw - 16px); }\n .sear-cell-border-presets { grid-template-columns: repeat(5, 42px); }\n .sear-cell-border-controls { width: 100%; }\n}\n.sear-toolbar {\n --wd3-level-1: rgba(23, 24, 28, 0.94);\n --wd3-level-2: rgba(23, 24, 28, 0.62);\n --wd3-level-3: rgba(23, 24, 28, 0.4);\n --wd3-line: rgba(23, 26, 29, 0.08);\n --wd3-hover: rgba(23, 26, 29, 0.06);\n --wd3-active: rgba(63, 133, 255, 0.1);\n --wd3-blue: #256cfb;\n box-sizing: border-box;\n width: 100%;\n min-height: 80px;\n background: #fff;\n color: var(--wd3-level-1);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", Arial, sans-serif;\n font-size: 12px;\n user-select: none;\n overflow: hidden;\n}\n\n.sear-toolbar *,\n.sear-toolbar *::before,\n.sear-toolbar *::after {\n box-sizing: border-box;\n}\n\n.sear-toolbar .we-toolbar-wrapper {\n height: 80px;\n padding: 0;\n border-bottom: 1px solid var(--wd3-line);\n background: #fff;\n overflow: visible;\n}\n\n.sear-toolbar .style__LineWrap-wd3__sc-qvsygq-2 {\n display: flex;\n align-items: stretch;\n gap: 0;\n height: 80px;\n padding: 6px 8px 5px;\n overflow-x: auto;\n overflow-y: visible;\n white-space: nowrap;\n}\n\n.sear-toolbar .style__LineWrap-wd3__sc-qvsygq-2::-webkit-scrollbar {\n height: 3px;\n}\n\n.sear-toolbar .style__LineWrap-wd3__sc-qvsygq-2::-webkit-scrollbar-thumb {\n background: rgba(23, 26, 29, 0.18);\n border-radius: 2px;\n}\n\n.sear-toolbar .style__Group-wd3__sc-qvsygq-3,\n.sear-toolbar .wd3-toolbar-more {\n position: relative;\n display: flex;\n align-items: center;\n gap: 2px;\n min-width: max-content;\n padding: 0 8px;\n}\n\n.sear-toolbar .style__Group-wd3__sc-qvsygq-3::after,\n.sear-toolbar .wd3-toolbar-more::after {\n content: \"\";\n position: absolute;\n top: 8px;\n right: 0;\n width: 1px;\n height: 52px;\n background: var(--wd3-line);\n}\n\n.sear-toolbar .style__GroupRows-wd3__sc-qvsygq-4 {\n flex-direction: column;\n justify-content: center;\n gap: 4px;\n}\n\n.sear-toolbar .style__Row-wd3__sc-qvsygq-5 {\n display: flex;\n align-items: center;\n height: 28px;\n gap: 2px;\n}\n\n.sear-toolbar .style__ItemWrap-wd3__sc-qvsygq-6 {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 24px;\n height: 28px;\n}\n\n.sear-toolbar .render-items__MeasureWrap-wd3__sc-1etwew8-0,\n.sear-toolbar .slot__TBItemSlotWrap-wd3__sc-1p9e5wr-0 {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n\n.sear-toolbar button,\n.sear-toolbar .wd3-toolbar-item-select {\n border: 0;\n appearance: none;\n font: inherit;\n color: inherit;\n}\n\n.sear-toolbar .wd3-toolbar-item {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n background: transparent;\n color: var(--wd3-level-1);\n cursor: default;\n outline: none;\n}\n\n.sear-toolbar .wd3-toolbar-icon-button.small,\n.sear-toolbar .wd3-toolbar-icon-menu.small {\n width: 24px;\n height: 24px;\n}\n\n.sear-toolbar .wd3-toolbar-split-btn-host {\n width: 34px;\n height: 24px;\n}\n\n.sear-toolbar .wd3-toolbar-icon-button.large,\n.sear-toolbar .wd3-toolbar-icon-menu.large {\n min-width: 32px;\n height: 66px;\n padding: 4px 0 3px;\n flex-direction: column;\n}\n\n.sear-toolbar .wd3-toolbar-icon-menu.large {\n padding-left: 2px;\n padding-right: 2px;\n}\n\n.sear-toolbar .wd3-toolbar-item:not(.disabled):hover,\n.sear-toolbar .wd3-toolbar-item-select:hover,\n.sear-toolbar .wd3-icon-button:hover {\n background: var(--wd3-hover);\n}\n\n.sear-toolbar .wd3-toolbar-item:not(.disabled):active,\n.sear-toolbar .wd3-toolbar-item-select:active,\n.sear-toolbar .wd3-icon-button:active {\n background: var(--wd3-active);\n}\n\n.sear-toolbar .wd3-toolbar-item-active {\n background: var(--wd3-active);\n color: var(--wd3-blue);\n}\n\n.sear-toolbar .wd3-toolbar-item.disabled {\n color: var(--wd3-level-3);\n opacity: 0.38;\n}\n\n.sear-toolbar .styled__Content-wd3__sc-18mbnsa-2,\n.sear-toolbar .styled__IconWithArrowWrap-wd3__sc-1vmuis-1 {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n min-height: 20px;\n line-height: 0;\n}\n\n.sear-toolbar .wd3-toolbar-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n color: currentColor;\n}\n\n.sear-toolbar .small .wd3-toolbar-icon,\n.sear-toolbar .wd3-toolbar-split-left {\n width: 20px;\n height: 20px;\n}\n\n.sear-toolbar svg {\n display: block;\n flex: 0 0 auto;\n}\n\n.sear-toolbar .small .wd3-toolbar-icon > svg,\n.sear-toolbar .wd3-toolbar-split-left > svg {\n width: 16px;\n height: 16px;\n}\n\n.sear-toolbar .wd3-toolbar-title {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 28px;\n padding-top: 2px;\n color: var(--wd3-level-2);\n font-size: 11px;\n line-height: 14px;\n}\n\n.sear-toolbar .wd3-tb-title-content {\n max-width: 54px;\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: normal;\n}\n\n.sear-toolbar .wd3-tb-title-content-nowrap {\n white-space: nowrap;\n}\n\n.sear-toolbar .wd3-select {\n position: relative;\n justify-content: space-between;\n height: 24px;\n min-width: 0;\n padding: 0 4px 0 8px;\n border: 1px solid transparent;\n border-radius: 4px;\n background: transparent;\n font-size: 12px;\n line-height: 22px;\n}\n\n.sear-toolbar .wd3-select-normal-value,\n.sear-toolbar .wd3-select-input-value {\n min-width: 0;\n overflow: hidden;\n color: var(--wd3-level-1);\n text-align: left;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.sear-toolbar .wd3_select_arrow,\n.sear-toolbar .wd3-toolbar-split-btn-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 9px;\n margin-left: 3px;\n color: var(--wd3-level-3);\n}\n\n.sear-toolbar .wd3-toolbar-split-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 34px;\n height: 24px;\n overflow: visible;\n line-height: 0;\n}\n\n.sear-toolbar .wd3-toolbar-split-left {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.sear-toolbar .style__Grow-wd3__sc-qvsygq-0 {\n flex: 1 1 auto;\n min-width: 16px;\n}\n\n.sear-toolbar .wd3-toolbar-mode-switch-wrap {\n position: relative;\n display: flex;\n align-items: center;\n height: 28px;\n align-self: center;\n}\n\n.sear-toolbar .wd3-icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 6px;\n background: transparent;\n}\n\n.sear-toolbar-insert-popovers {\n position: fixed;\n inset: 0;\n z-index: 9999;\n pointer-events: none;\n}\n\n.sear-toolbar-popovers {\n position: fixed;\n inset: 0;\n z-index: 9999;\n pointer-events: none;\n}\n\n.sear-toolbar-insert-popover {\n position: fixed;\n pointer-events: auto;\n}\n\n.sear-toolbar-popover {\n position: fixed;\n pointer-events: auto;\n}\n\n.sear-toolbar-insert-popover .wd3-popover,\n.sear-toolbar-popover .wd3-popover {\n overflow: hidden;\n border: 1px solid rgba(23, 26, 29, 0.12);\n border-radius: 16px;\n background: #fff;\n box-shadow:\n 0 14px 38px rgba(23, 26, 29, 0.14),\n 0 2px 6px rgba(23, 26, 29, 0.08);\n}\n\n.sear-toolbar-insert-popover .wd3-menu,\n.sear-toolbar-popover .wd3-menu {\n display: flex;\n flex-direction: column;\n padding: 4px 10px 4px 6px;\n color: rgba(23, 24, 28, 0.82);\n font-size: 13px;\n font-weight: 400;\n line-height: 1;\n}\n.sear-toolbar-popover .wd3-menu { max-height: calc(100vh - 16px); overflow-y: auto; }\n\n.sear-toolbar-insert-popover .wd3-menu {\n width: 180px;\n}\n\n.sear-toolbar-insert-popover:nth-child(n + 2) .wd3-menu {\n width: 200px;\n}\n\n.sear-toolbar-insert-popover:nth-child(3) .wd3-menu {\n width: 202px;\n}\n\n.sear-toolbar-insert-popover .wd3-listitem,\n.sear-toolbar-popover .wd3-listitem {\n display: flex;\n align-items: center;\n min-height: 28px;\n border-radius: 6px;\n cursor: default;\n font-weight: 400;\n}\n\n.sear-toolbar-popover button.wd3-listitem {\n width: 100%;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n text-align: left;\n font: inherit;\n}\n\n.sear-toolbar-popover button[aria-disabled=\"true\"] {\n color: #8b9297;\n cursor: not-allowed;\n}\n\n.sear-toolbar-insert-popover .wd3-listitem:hover,\n.sear-toolbar-insert-popover .wd3-listitem-active,\n.sear-toolbar-popover .wd3-listitem:hover,\n.sear-toolbar-popover .wd3-listitem-active {\n background: rgba(23, 26, 29, 0.05);\n}\n\n.sear-toolbar-insert-popover .styled__Container-wd3__sc-2oqy5e-3,\n.sear-toolbar-popover .styled__Container-wd3__sc-2oqy5e-3 {\n display: flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n}\n\n.sear-toolbar-insert-popover .styled__Prefix-wd3__sc-2oqy5e-4,\n.sear-toolbar-popover .styled__Prefix-wd3__sc-2oqy5e-4 {\n display: inline-flex;\n flex: 0 0 32px;\n align-items: center;\n justify-content: center;\n color: rgba(23, 24, 28, 0.78);\n}\n\n.sear-toolbar-popover .sear-toolbar-popover-prefix {\n flex-basis: 24px;\n}\n\n.sear-toolbar-insert-popover .styled__Prefix-wd3__sc-2oqy5e-4 svg,\n.sear-toolbar-popover .styled__Prefix-wd3__sc-2oqy5e-4 svg {\n width: 16px;\n height: 16px;\n}\n\n.sear-toolbar-insert-popover .styled__Content-wd3__sc-2oqy5e-6,\n.sear-toolbar-popover .styled__Content-wd3__sc-2oqy5e-6 {\n display: inline-flex;\n flex: 1 1 auto;\n align-items: center;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.sear-toolbar-insert-popover .styled__Suffix-wd3__sc-2oqy5e-5,\n.sear-toolbar-popover .styled__Suffix-wd3__sc-2oqy5e-5 {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n margin-left: 6px;\n color: rgba(23, 24, 28, 0.66);\n}\n\n.sear-toolbar-popover .styled__Suffix-wd3__sc-2oqy5e-5 {\n font-size: 11px;\n}\n\n.sear-toolbar-insert-popover .styled__SuffixWrapper-wd3__sc-1p5lith-0 {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 10px;\n height: 16px;\n}\n\n.sear-toolbar-popover .styled__Suffix-wd3__sc-2oqy5e-5 svg,\n.sear-toolbar-insert-popover .styled__SuffixWrapper-wd3__sc-1p5lith-0 svg {\n width: 8px;\n height: 16px;\n}\n\n.sear-toolbar-insert-popover .styled__Divider-wd3__sc-2oqy5e-1,\n.sear-toolbar-popover .styled__Divider-wd3__sc-2oqy5e-1 {\n height: 1px;\n margin: 4px 0;\n background: rgba(23, 26, 29, 0.12);\n}\n\n.sear-toolbar-popover .wd3-listitem-selected {\n color: rgba(37, 108, 251, 0.95);\n}\n\n.sear-toolbar-color-menu {\n padding: 10px;\n color: rgba(23, 24, 28, 0.82);\n font-size: 13px;\n font-weight: 400;\n}\n\n.sear-toolbar-color-title {\n height: 22px;\n padding: 0 2px;\n color: rgba(23, 24, 28, 0.62);\n font-size: 12px;\n line-height: 22px;\n}\n\n.sear-toolbar-color-grid {\n display: grid;\n grid-template-columns: repeat(8, 20px);\n gap: 6px;\n margin-top: 4px;\n}\n\n.sear-toolbar-color-swatch {\n width: 20px;\n height: 20px;\n padding: 0;\n border: 1px solid rgba(23, 26, 29, 0.14);\n border-radius: 4px;\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);\n cursor: default;\n}\n\n.sear-toolbar-color-swatch:hover {\n border-color: rgba(37, 108, 251, 0.82);\n box-shadow:\n inset 0 0 0 1px rgba(255, 255, 255, 0.72),\n 0 0 0 2px rgba(37, 108, 251, 0.12);\n}\n\n.sear-toolbar-color-swatch-selected {\n outline: 2px solid #256cfb;\n outline-offset: 1px;\n}\n\n.sear-toolbar-color-swatch-default {\n position: relative;\n background: #fff;\n}\n\n.sear-toolbar-color-swatch-default::after {\n position: absolute;\n top: 9px;\n left: 1px;\n width: 18px;\n height: 1px;\n background: #fe0300;\n content: '';\n transform: rotate(-45deg);\n}\n\n.sear-toolbar-insert-popover .wd3-shortcuts {\n display: inline-flex;\n align-items: center;\n gap: 3px;\n}\n\n.sear-toolbar-insert-popover .wd3-shortcuts kbd {\n min-width: 19px;\n height: 19px;\n padding: 0 5px;\n border: 1px solid rgba(107, 114, 148, 0.24);\n border-radius: 4px;\n background: #fff;\n box-shadow: 0 1px 3px rgba(23, 26, 29, 0.12);\n color: rgba(107, 114, 148, 0.92);\n font: inherit;\n font-size: 10px;\n line-height: 17px;\n text-align: center;\n}\n\n.sear-toolbar-insert-popover .wd3-badge-new {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 16px;\n margin-left: 7px;\n padding: 0 5px;\n border-radius: 3px;\n background: #ffe9dc;\n color: #ff7a45;\n font-size: 9px;\n line-height: 16px;\n}\n\n.sear-number-format-dialog {\n width: min(920px, calc(100vw - 32px));\n height: min(680px, calc(100vh - 32px));\n padding: 0;\n overflow: hidden;\n border: 1px solid #d9dde3;\n border-radius: 8px;\n background: #fff;\n color: #20242a;\n box-shadow: 0 18px 56px rgba(24, 31, 42, 0.2);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", Arial, sans-serif;\n}\n\n.sear-number-format-dialog::backdrop {\n background: rgba(24, 31, 42, 0.36);\n}\n\n.sear-number-format-dialog > header,\n.sear-number-format-dialog > footer {\n display: flex;\n align-items: center;\n padding: 18px 24px;\n}\n\n.sear-number-format-dialog > header {\n justify-content: space-between;\n border-bottom: 1px solid #edf0f3;\n}\n\n.sear-number-format-dialog > header h2 {\n margin: 0;\n font-size: 22px;\n font-weight: 600;\n letter-spacing: 0;\n}\n\n.sear-number-format-dialog__close {\n width: 32px;\n height: 32px;\n padding: 0;\n border: 0;\n background: transparent;\n color: #4f5660;\n font-size: 30px;\n font-weight: 300;\n line-height: 28px;\n cursor: pointer;\n}\n\n.sear-number-format-dialog__body {\n display: grid;\n grid-template-columns: 190px minmax(0, 1fr);\n height: calc(100% - 137px);\n min-height: 0;\n padding: 18px 24px 0;\n gap: 28px;\n}\n\n.sear-number-format-dialog__categories {\n display: flex;\n min-height: 0;\n padding: 8px;\n overflow-y: auto;\n flex-direction: column;\n border: 1px solid #d9dde3;\n border-radius: 6px;\n}\n\n.sear-number-format-dialog__categories button {\n min-height: 38px;\n padding: 7px 12px;\n border: 0;\n border-radius: 5px;\n background: transparent;\n color: #2d333b;\n font: inherit;\n font-size: 15px;\n text-align: left;\n cursor: pointer;\n}\n\n.sear-number-format-dialog__categories button:hover {\n background: #f2f4f7;\n}\n\n.sear-number-format-dialog__categories button.is-active {\n background: #e9f1ff;\n color: #256cfb;\n}\n\n.sear-number-format-dialog__panel {\n display: grid;\n min-width: 0;\n min-height: 0;\n overflow-y: auto;\n align-content: start;\n grid-template-columns: 1fr;\n gap: 10px;\n padding: 0 4px 16px 0;\n}\n\n.sear-number-format-dialog__panel > label,\n.sear-number-format-dialog__section-title {\n color: #5d6570;\n font-size: 13px;\n font-weight: 500;\n}\n\n.sear-number-format-dialog__preview {\n display: flex;\n min-height: 54px;\n align-items: center;\n padding: 0 16px;\n overflow: hidden;\n border: 1px solid #d6dae0;\n border-radius: 6px;\n background: #f7f8fa;\n color: #20242a;\n font-size: 22px;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.sear-number-format-dialog__section-title {\n margin-top: 8px;\n}\n\n.sear-number-format-dialog__presets {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 8px;\n}\n\n.sear-number-format-dialog__preset {\n display: grid;\n min-width: 0;\n min-height: 54px;\n padding: 8px 10px;\n border: 1px solid #d9dde3;\n border-radius: 6px;\n background: #fff;\n color: #282e36;\n text-align: left;\n cursor: pointer;\n}\n\n.sear-number-format-dialog__preset:hover {\n border-color: #9dbdff;\n background: #f7faff;\n}\n\n.sear-number-format-dialog__preset.is-active {\n border-color: #256cfb;\n background: #edf4ff;\n box-shadow: inset 0 0 0 1px #256cfb;\n}\n\n.sear-number-format-dialog__preset span {\n overflow: hidden;\n font-size: 14px;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.sear-number-format-dialog__preset code {\n overflow: hidden;\n color: #69717d;\n font-size: 12px;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.sear-number-format-dialog__custom {\n box-sizing: border-box;\n width: 100%;\n height: 38px;\n padding: 7px 10px;\n border: 1px solid #cbd1d9;\n border-radius: 5px;\n color: #20242a;\n font: 13px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;\n}\n\n.sear-number-format-dialog > footer {\n justify-content: flex-end;\n gap: 10px;\n border-top: 1px solid #edf0f3;\n}\n\n.sear-number-format-dialog__button {\n min-width: 82px;\n min-height: 38px;\n padding: 7px 18px;\n border: 1px solid #cbd1d9;\n border-radius: 5px;\n background: #fff;\n color: #2d333b;\n font: inherit;\n font-size: 14px;\n cursor: pointer;\n}\n\n.sear-number-format-dialog__button.is-primary {\n border-color: #256cfb;\n background: #256cfb;\n color: #fff;\n}\n\n@media (max-width: 680px) {\n .sear-number-format-dialog__body {\n grid-template-columns: 126px minmax(0, 1fr);\n gap: 12px;\n padding-inline: 12px;\n }\n\n .sear-number-format-dialog__presets {\n grid-template-columns: 1fr;\n }\n}\n\n.sear-toolbar__toast {\n position: fixed;\n bottom: 24px;\n left: 50%;\n z-index: 10000;\n padding: 9px 16px;\n border-radius: 6px;\n background: rgba(54, 55, 56, 0.96);\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);\n color: #fff;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", Arial, sans-serif;\n font-size: 13px;\n line-height: 18px;\n pointer-events: none;\n transform: translateX(-50%);\n}\n\n.sear-toolbar-duplicate-dialog {\n position: fixed;\n inset: 0;\n z-index: 9999;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(12, 16, 24, 0.18);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", Arial, sans-serif;\n}\n\n.sear-toolbar-duplicate-panel {\n position: relative;\n width: 360px;\n max-width: calc(100vw - 32px);\n padding: 22px 20px 18px;\n border: 1px solid rgba(23, 26, 29, 0.08);\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 18px 48px rgba(16, 24, 40, 0.18);\n color: rgba(23, 24, 28, 0.94);\n}\n\n.sear-toolbar-duplicate-close {\n position: absolute;\n top: 14px;\n right: 14px;\n width: 28px;\n height: 28px;\n border: 0;\n background: transparent;\n color: rgba(23, 24, 28, 0.62);\n font: 26px/28px Arial, sans-serif;\n}\n\n.sear-toolbar-duplicate-title {\n margin: 0 36px 18px 0;\n font-size: 20px;\n font-weight: 600;\n line-height: 28px;\n}\n\n.sear-toolbar-duplicate-row,\n.sear-toolbar-duplicate-column {\n display: flex;\n align-items: center;\n gap: 10px;\n min-height: 34px;\n font-size: 15px;\n}\n\n.sear-toolbar-duplicate-row select {\n height: 28px;\n padding: 0 24px 0 8px;\n border: 1px solid #d7dce2;\n border-radius: 4px;\n background: #fff;\n font: inherit;\n}\n\n.sear-toolbar-duplicate-columns {\n max-height: 180px;\n margin: 12px 0;\n padding: 8px;\n overflow: auto;\n border: 1px solid rgba(23, 26, 29, 0.08);\n border-radius: 6px;\n}\n\n.sear-toolbar-duplicate-actions {\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n margin-top: 18px;\n}\n\n.sear-toolbar-duplicate-actions button {\n min-width: 76px;\n min-height: 36px;\n border: 1px solid #d7dce2;\n border-radius: 5px;\n background: #fff;\n color: rgba(23, 24, 28, 0.94);\n font: inherit;\n font-size: 14px;\n}\n\n.sear-toolbar-duplicate-actions [data-role=\"confirm\"] {\n border-color: #256cfb;\n background: #256cfb;\n color: #fff;\n}\n\n.sear-cell-highlight-overlay {\n position: fixed;\n inset: 0;\n z-index: 10000;\n display: grid;\n place-items: center;\n background: rgba(12, 16, 24, 0.2);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", Arial, sans-serif;\n}\n.sear-sheet-sort-overlay { position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center; background: #1118; }\n.sear-sheet-filter-overlay { position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center; background: #1118; }\n.sear-sheet-filter-panel { position: relative; box-sizing: border-box; width: min(400px, calc(100vw - 24px)); max-height: min(85vh, 700px); overflow: auto; padding: 20px; border: 1px solid #dfe3e9; border-radius: 6px; background: #fff; color: #202329; box-shadow: 0 18px 48px #0003; font: 14px sans-serif; }\n.sear-sheet-filter-panel h2 { margin: 0 32px 16px 0; font-size: 17px; }\n.sear-sheet-filter-close { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border: 0; background: transparent; font-size: 22px; cursor: pointer; }\n.sear-sheet-filter-panel > label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }\n.sear-sheet-filter-panel select, .sear-sheet-filter-panel input[type=\"text\"], .sear-sheet-filter-panel input[type=\"date\"], .sear-sheet-filter-panel input[type=\"search\"] { box-sizing: border-box; width: 100%; min-width: 0; height: 34px; padding: 5px 8px; border: 1px solid #cbd2da; border-radius: 4px; background: #fff; color: inherit; font: inherit; }\n.sear-sheet-filter-panel > label select { width: 75%; }\n.sear-sheet-filter-sorting { display: flex; gap: 8px; margin-top: 14px; }\n.sear-sheet-filter-sorting button { flex: 1; min-height: 32px; border: 1px solid #dfe3e9; border-radius: 4px; background: #fff; cursor: pointer; }\n.sear-sheet-filter-sorting button:hover { background: #f3f6fa; }\n.sear-sheet-filter-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; border-bottom: 1px solid #dfe3e9; }\n.sear-sheet-filter-tabs button { min-height: 36px; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; }\n.sear-sheet-filter-tabs button[aria-selected=\"true\"] { border-bottom-color: #256cfb; color: #1769d2; }\n.sear-sheet-filter-body { display: grid; gap: 10px; padding-top: 14px; }\n.sear-sheet-filter-value-controls { display: flex; gap: 14px; }\n.sear-sheet-filter-value-controls button { border: 0; background: transparent; color: #1769d2; cursor: pointer; }\n.sear-sheet-filter-values { max-height: 240px; overflow: auto; border: 1px solid #e5e8ed; border-radius: 4px; }\n.sear-sheet-filter-values label { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 8px; }\n.sear-sheet-filter-values label[hidden] { display: none; }\n.sear-sheet-filter-values label span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.sear-sheet-filter-values label small { color: #69717c; }\n.sear-sheet-filter-values label button { border: 0; background: transparent; color: #1769d2; cursor: pointer; }\n.sear-sheet-filter-limit { margin: 0; color: #69717c; font-size: 12px; }\n.sear-sheet-filter-panel > .sear-sheet-filter-auto { display: inline-flex; justify-content: flex-start; align-items: center; gap: 7px; margin-top: 10px; }\n.sear-sheet-filter-status { min-height: 16px; margin: 8px 0 0; color: #b42318; font-size: 12px; }\n.sear-sheet-filter-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }\n.sear-sheet-filter-actions button { min-height: 34px; padding: 0 10px; border: 1px solid #cbd2da; border-radius: 4px; background: #fff; cursor: pointer; }\n.sear-sheet-filter-actions button:last-child { border-color: #256cfb; background: #256cfb; color: #fff; }\n.sear-sheet-filter-actions button:disabled { opacity: .45; cursor: default; }\n.sear-sheet-sort-panel { position: relative; box-sizing: border-box; width: min(520px, calc(100vw - 24px)); max-height: min(80vh, 680px); overflow: auto; padding: 22px; border: 1px solid #dfe3e9; border-radius: 6px; background: #fff; color: #202329; box-shadow: 0 18px 48px #0003; font: 14px sans-serif; }\n.sear-sheet-sort-panel h2 { margin: 0 32px 18px 0; font-size: 17px; font-weight: 600; }\n.sear-sheet-sort-close { position: absolute; top: 12px; right: 14px; width: 28px; height: 28px; border: 0; background: transparent; font-size: 23px; cursor: pointer; }\n.sear-sheet-sort-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }\n.sear-sheet-sort-criteria { display: grid; gap: 8px; }\n.sear-sheet-sort-criterion { display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr) 30px; align-items: center; gap: 8px; }\n.sear-sheet-sort-criterion select, .sear-sheet-sort-criterion input { box-sizing: border-box; min-width: 0; width: 100%; height: 34px; padding: 4px 8px; border: 1px solid #cbd2da; border-radius: 4px; background: #fff; color: inherit; font: inherit; }\n.sear-sheet-sort-criterion button { width: 30px; height: 30px; border: 0; background: transparent; font-size: 20px; cursor: pointer; }\n.sear-sheet-sort-criterion button:disabled { color: #b8bec6; cursor: default; }\n.sear-sheet-sort-add { margin-top: 14px; padding: 5px 0; border: 0; background: transparent; color: #1769d2; font: inherit; cursor: pointer; }\n.sear-sheet-sort-status { min-height: 18px; margin: 8px 0 0; color: #b42318; font-size: 12px; }\n.sear-sheet-sort-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }\n.sear-sheet-sort-actions button { min-width: 72px; height: 34px; border: 1px solid #cbd2da; border-radius: 4px; background: #fff; color: inherit; font: inherit; cursor: pointer; }\n.sear-sheet-sort-actions [data-role=\"confirm\"] { border-color: #256cfb; background: #256cfb; color: #fff; }\n@media (max-width: 440px) { .sear-sheet-sort-criterion { grid-template-columns: 1fr 1fr 30px; } .sear-sheet-sort-criterion span { grid-column: 1 / -1; } }\n\n.sear-cell-highlight-panel {\n position: relative;\n box-sizing: border-box;\n width: min(440px, calc(100vw - 32px));\n max-height: calc(100vh - 32px);\n overflow: auto;\n padding: 22px;\n border: 1px solid #dfe3e8;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 18px 48px rgba(16, 24, 40, 0.18);\n color: #17181c;\n font-size: 14px;\n}\n\n.sear-cell-highlight-panel h2 { margin: 0 40px 18px 0; font-size: 18px; font-weight: 600; }\n.sear-cell-highlight-close { position: absolute; top: 14px; right: 14px; border: 0; background: none; font-size: 24px; cursor: pointer; }\n.sear-cell-highlight-panel select,\n.sear-cell-highlight-details input:not([type=\"checkbox\"]) {\n width: 100%;\n height: 34px;\n padding: 0 9px;\n border: 1px solid #cbd2da;\n border-radius: 4px;\n background: #fff;\n color: inherit;\n font: inherit;\n}\n.sear-cell-highlight-details { display: grid; gap: 10px; margin-top: 12px; }\n.sear-cell-highlight-details input[hidden] { display: none; }\n.sear-cell-highlight-details label { display: flex; align-items: center; gap: 8px; min-height: 28px; cursor: pointer; }\n.sear-cell-highlight-details input[type=\"checkbox\"] { width: 16px; height: 16px; margin: 0; accent-color: #256cfb; }\n.sear-cell-highlight-styles { margin: 18px 0 0; padding: 0; border: 0; }\n.sear-cell-highlight-styles legend { margin-bottom: 8px; }\n.sear-cell-highlight-styles label { display: flex; align-items: center; gap: 9px; min-height: 32px; cursor: pointer; }\n.sear-cell-highlight-swatch { display: inline-block; flex: none; width: 32px; height: 20px; border: 1px solid #cbd2da; border-radius: 2px; }\n.sear-cell-highlight-swatch.redFill { background: #fbc8cf; }\n.sear-cell-highlight-swatch.yellowFill { background: #fce3a1; }\n.sear-cell-highlight-swatch.greenFill { background: #c9edd1; }\n.sear-cell-highlight-swatch.redBorder { border: 2px solid #bc0e1d; }\n.sear-cell-highlight-swatch.redText { position: relative; }\n.sear-cell-highlight-swatch.redText::after { content: \"A\"; display: block; color: #be0e1e; text-align: center; line-height: 18px; }\n.sear-cell-highlight-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }\n.sear-cell-highlight-actions button { min-width: 72px; height: 34px; border: 1px solid #cbd2da; border-radius: 4px; background: #fff; color: inherit; font: inherit; cursor: pointer; }\n.sear-cell-highlight-actions [data-role=\"confirm\"] { border-color: #256cfb; background: #256cfb; color: #fff; }\n.sear-cell-highlight-list { min-height: 100px; max-height: 300px; overflow: auto; margin-top: 12px; border-top: 1px solid #e6e9ed; }\n.sear-cell-highlight-list p { color: #737984; }\n.sear-cell-highlight-rule { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid #e6e9ed; }\n.sear-cell-highlight-rule span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.sear-cell-highlight-rule button { width: 28px; height: 28px; border: 0; background: transparent; font-size: 19px; cursor: pointer; }\n.sear-validation-panel { width: min(440px, calc(100vw - 24px)); }\n.sear-validation-feedback { position: fixed; z-index: 10020; display: flex; align-items: flex-start; gap: 10px; width: min(270px, calc(100vw - 16px)); padding: 12px 14px; background: #fff; color: #30343a; border: 1px solid #e8eaed; border-radius: 7px; box-shadow: 0 3px 12px rgba(0, 0, 0, .12); pointer-events: none; box-sizing: border-box; }\n.sear-validation-feedback__icon { display: grid; place-items: center; flex: 0 0 27px; width: 27px; height: 27px; border-radius: 50%; background: #ff873d; color: #fff; font-weight: 700; }\n.sear-validation-feedback strong { display: block; margin: 0 0 2px; color: #fa5b2d; font-size: 15px; line-height: 22px; }\n.sear-validation-feedback__message { margin: 0; font-size: 14px; line-height: 21px; overflow-wrap: anywhere; }\n.sear-validation-tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid #e6e9ed; }\n.sear-validation-tabs button { min-height: 34px; padding: 0 10px; border: 0; background: transparent; color: #26313d; cursor: pointer; }\n.sear-validation-fields { display: grid; gap: 12px; }\n.sear-validation-fields[hidden], .sear-validation-field[hidden], .sear-validation-fields label[hidden] { display: none; }\n.sear-validation-field { display: grid; gap: 5px; color: #28313b; }\n.sear-validation-field input, .sear-validation-field select, .sear-validation-option input:not([type=\"color\"]) {\n box-sizing: border-box; width: 100%; min-width: 0; height: 34px; padding: 4px 8px;\n border: 1px solid #cbd2da; border-radius: 4px; background: #fff; color: #17181c; font: inherit;\n}\n.sear-validation-fields > label:not(.sear-validation-field) { display: flex; align-items: center; gap: 7px; }\n.sear-validation-options { display: grid; gap: 8px; max-height: 180px; overflow: auto; }\n.sear-validation-option { display: grid; grid-template-columns: minmax(0, 1fr) 34px 28px; align-items: center; gap: 6px; }\n.sear-validation-option input[type=\"color\"] { width: 34px; height: 30px; padding: 2px; border: 1px solid #cbd2da; border-radius: 4px; }\n.sear-validation-option button { width: 28px; height: 28px; border: 0; background: transparent; font-size: 20px; cursor: pointer; }\n.sear-validation-fields > button { justify-self: start; border: 0; background: transparent; color: #1769d2; cursor: pointer; }\n.sear-validation-panel .sear-cell-highlight-rule button { width: auto; min-width: 28px; padding: 0 4px; font-size: 13px; }\n.sear-cell-data-visual-panel { max-height: min(80vh, 720px); overflow: auto; }\n.sear-cell-data-visual-field { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 10px 0; }\n.sear-cell-data-visual-field select { min-width: 0; }\n.sear-cell-data-visual-field input[type=\"number\"] { width: 86px; min-width: 0; padding: 7px; border: 1px solid #cbd2da; border-radius: 4px; }\n.sear-cell-data-visual-field input[type=\"color\"] { width: 44px; height: 30px; padding: 1px; border: 1px solid #cbd2da; background: #fff; cursor: pointer; }\n.sear-cell-data-visual-field[hidden] { display: none; }\n.sear-freeze-menu { position: fixed; z-index: 10025; width: 212px; padding: 5px 0; background: #fff; color: #25272d; border: 1px solid #dedfe3; border-radius: 6px; box-shadow: 0 8px 22px rgba(0, 0, 0, .16); }\n.sear-freeze-menu button { display: block; width: 100%; min-height: 34px; padding: 7px 14px; border: 0; background: transparent; color: inherit; font: 13px/20px inherit; text-align: left; white-space: nowrap; cursor: pointer; }\n.sear-freeze-menu button:hover:not(:disabled), .sear-freeze-menu button:focus-visible { background: #f1f5fb; outline: 0; }\n.sear-freeze-menu button:disabled { color: #a5a7ad; cursor: default; }\n.sear-freeze-menu__divider { height: 1px; margin: 5px 0; background: #e8e9ec; }\n"

CSS injected by SearWebToolbar for the web toolbar and its popovers.

variableWebSheetAdapterDefaultssource ↗
WebSheetAdapterDefaults: { clipboard: typeof WebSheetClipboard; createTextShaper: (context: RenderContext): WebTextShaper; fileDownload: typeof WebFileDownload; userInteraction: typeof WebUserInteractionService }

Web implementations supplied by a Sheet host at its composition root.

functionensureSheetToolbarCommandssource ↗
ensureSheetToolbarCommands(commands: SheetCommandBus, core: SearCoreSheet): void

Ensures web toolbar hosts receive the official sheet command surface.

commands: SheetCommandBus
core: SearCoreSheet
functionregisterSheetToolbarCommandssource ↗
registerSheetToolbarCommands(commands: SheetCommandBus, core: SearCoreSheet): void

Registers official sheet commands needed by web toolbar hosts.

commands: SheetCommandBus
core: SearCoreSheet
classHeadlessToolbarsource ↗
class HeadlessToolbar extends SearToolbar

Toolbar implementation for hosts without a UI surface.

constructorconstructor
HeadlessToolbar(): HeadlessToolbar
propertysymbolstatic
readonly symbol: symbol

DI token for resolving HeadlessToolbar.

methoddestroy
destroy(): void

Releases resources owned by SearToolbar.

methodmount
mount(_target: unknown): void

Attaches this adapter to its host surface.

_target: unknown
classSearToolbarsource ↗
class SearToolbar

Platform-neutral toolbar lifecycle contract.

constructorconstructor
SearToolbar(): SearToolbar
propertysymbolstatic
readonly symbol: symbol

DI token for resolving SearToolbar.

methoddestroy
destroy(): void

Releases resources owned by SearToolbar.

methodmount
mount(target: unknown): void

Attaches this adapter to its host surface.

target: unknown