@orbit-work/ui 0.1.2-preview.0 → 0.1.2

package/dist/office.css

@@ -0,0 +1,1146 @@
+/* OfficePreview and third-party document renderer styles.
+ *
+ * This is an additive profile: import styles/core.css first. The selectors
+ * below are scoped to public OfficePreview parts or third-party DOM that the
+ * component owns. x-spreadsheet is bundled here because it is not a core UI
+ * dependency.
+ */
+
+@layer vendor {
+
+/* packages/components/styles/xspreadsheet.css
+ *
+ * x-spreadsheet 样式表，拷贝自 vue-office：
+ * https://github.com/501351981/vue-office
+ * core/packages/vue-excel/src/index.css
+ *
+ * 这是 x-data-spreadsheet 的 index.less 编译产物，vue-office 在其基础上补了两条
+ * 只读模式的修正（隐藏 bottombar 首个「+」菜单项、容器撑满高度）。选择器全部由
+ * x-data-spreadsheet 运行时生成（cssPrefix = 'x-spreadsheet'），不要重命名。
+ *
+ * 与上游 dist/xspreadsheet.css 的差异：vue-office 这份剥掉了 toolbar 和 icon
+ * sprite 相关规则（只读模式用不到，且 icon 依赖 svg 雪碧图资源）。
+ *
+ * 相对 vue-office 原文的改动仅两处，都是为了不污染宿主应用：
+ *   1. 删掉 `body { margin: 0 }`
+ *   2. 删掉 `form fieldset` / `form fieldset label` / `form fieldset select`
+ * 其余规则的**选择器与顺序**逐字保留，颜色值在 DS 2.0 P5 全部换成 var(--ow-*)。
+ *
+ * ── 双主题两域划分（改色前务必读完）─────────────────────────────────
+ * x-spreadsheet 用 canvas 绘制单元格，网格/表头/文字颜色是 JS 常量（#fff 单元格、
+ * #f4f5f8 表头、#e6e6e6 网格线），CSS 改不动，所以本文件按「贴不贴 canvas」分两域：
+ *
+ *   A 纸面恒定域 —— 压在 canvas 上的 DOM 浮层（容器底、选区框、剪贴虚线、自动填充
+ *     角柄、编辑器、列宽/行高 resizer、滚动条槽、打印页卡）。canvas 恒为浅档，这些
+ *     浮层必须同档，否则暗色主题下浮层与网格错配（这是 vue-office 那份不敢改色的
+ *     原因）。取 §2 恒定域 token --ow-paper（浅/暗同值 #FFFFFF）与品牌墨 --ow-navy，
+ *     在 .x-spreadsheet 上一次性映射成 --ow-xs-* 本域别名，下文不再出现裸色值。
+ *     allowlist 已按 paper 语境登记 styles/xspreadsheet.css。
+ *
+ *   B 壳域 —— 不贴 canvas 的应用外壳（bottombar sheet 页签、右键菜单/下拉/建议框、
+ *     筛选面板、日历、按钮、表单、模态与 toast、打印外框）。这些随主题走标准语义
+ *     token：表头 --ow-surface-2、线 --ow-border、文字 --ow-text/-2/-3、弹层
+ *     --ow-popover-bg + --ow-hover-pop/--ow-press-pop + --ow-shadow-pop。
+ *
+ * z-index 保持第三方原值：它们是 x-spreadsheet 内部的相对层序（overlayer 10 /
+ * resizer 11 / scrollbar 12 / editor 20 / dropdown 200），换成 --ow-z-* 会打乱。
+ * 组件侧的补充适配见 components.css 里的 .ow-office-preview / [data-slot="excel-sheet"] 段。
+ */
+
+.x-spreadsheet {
+  /* A 域别名：只在这里做一次「DS token → 纸面恒定域」映射（见头注释）。 */
+  --ow-xs-paper: var(--ow-paper);
+  --ow-xs-ink: var(--ow-navy);
+  --ow-xs-line: color-mix(in srgb, var(--ow-navy) 14%, var(--ow-paper));
+  --ow-xs-sel-fill: color-mix(in srgb, var(--ow-navy) 10%, transparent);
+  --ow-xs-sel-ghost: color-mix(in srgb, var(--ow-navy) 40%, transparent);
+  --ow-xs-gesture: color-mix(in srgb, var(--ow-navy) 20%, transparent);
+  font-size: var(--ow-fs-ui);
+  line-height: normal;
+  user-select: none;
+  -moz-user-select: none;
+  font-family: var(--ow-font-sans);
+  box-sizing: content-box;
+  background: var(--ow-xs-paper);
+  /* 纸上墨色：编辑器 textarea 用 color: inherit，不给恒定墨色的话暗色主题下
+     会继承出浅色文字，压在恒亮网格上白底白字。 */
+  color: var(--ow-xs-ink);
+  /* 网格区的原生滚动条跟着纸面走浅档，别让宿主暗主题把滚动条画成深色。 */
+  color-scheme: light;
+  -webkit-font-smoothing: antialiased;
+}
+.x-spreadsheet textarea {
+  font: var(--ow-font-weight-normal) var(--ow-fs-ui) var(--ow-font-sans);
+}
+.x-spreadsheet-sheet {
+  position: relative;
+  overflow: hidden;
+}
+.x-spreadsheet-table {
+  vertical-align: bottom;
+}
+.x-spreadsheet-tooltip {
+  font-family: inherit;
+  position: absolute;
+  padding: 5px 10px;
+  color: var(--ow-tooltip-text);
+  border-radius: var(--ow-radius-2xs);
+  background: var(--ow-tooltip-bg);
+  box-shadow: var(--ow-shadow-tooltip);
+  font-size: var(--ow-fs-caption);
+  z-index: 201;
+}
+.x-spreadsheet-tooltip:before {
+  pointer-events: none;
+  position: absolute;
+  left: calc(50% - 4px);
+  top: -4px;
+  content: "";
+  width: 8px;
+  height: 8px;
+  background: inherit;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  z-index: 1;
+}
+.x-spreadsheet-color-palette {
+  padding: 5px;
+}
+.x-spreadsheet-color-palette table {
+  margin: 0;
+  padding: 0;
+  border-collapse: separate;
+  border-spacing: 2px;
+  background: var(--ow-popover-bg);
+}
+.x-spreadsheet-color-palette table td {
+  margin: 0;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+.x-spreadsheet-color-palette table td:hover {
+  border-color: var(--ow-border-strong);
+}
+.x-spreadsheet-color-palette table td .x-spreadsheet-color-palette-cell {
+  width: 16px;
+  height: 16px;
+}
+.x-spreadsheet-border-palette {
+  padding: 6px;
+}
+.x-spreadsheet-border-palette table {
+  margin: 0;
+  padding: 0;
+  border-collapse: separate;
+  border-spacing: 0;
+  background: var(--ow-popover-bg);
+  table-layout: fixed;
+}
+.x-spreadsheet-border-palette table td {
+  margin: 0;
+}
+.x-spreadsheet-border-palette .x-spreadsheet-border-palette-left {
+  border-right: 1px solid var(--ow-border);
+  padding-right: 6px;
+}
+.x-spreadsheet-border-palette .x-spreadsheet-border-palette-left .x-spreadsheet-border-palette-cell {
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  text-align: center;
+}
+.x-spreadsheet-border-palette .x-spreadsheet-border-palette-left .x-spreadsheet-border-palette-cell:hover {
+  background-color: var(--ow-hover-pop);
+}
+.x-spreadsheet-border-palette .x-spreadsheet-border-palette-right {
+  padding-left: 6px;
+}
+.x-spreadsheet-border-palette .x-spreadsheet-border-palette-right .x-spreadsheet-line-type {
+  position: relative;
+  left: 0;
+  top: -3px;
+}
+.x-spreadsheet-dropdown {
+  position: relative;
+}
+.x-spreadsheet-dropdown .x-spreadsheet-dropdown-content {
+  position: absolute;
+  z-index: 200;
+  background: var(--ow-popover-bg);
+  border: 1px solid var(--ow-border);
+  border-radius: var(--ow-radius-menu);
+  box-shadow: var(--ow-shadow-pop);
+}
+.x-spreadsheet-dropdown.bottom-left .x-spreadsheet-dropdown-content {
+  top: calc(100% + 5px);
+  left: 0;
+}
+.x-spreadsheet-dropdown.bottom-right .x-spreadsheet-dropdown-content {
+  top: calc(100% + 5px);
+  right: 0;
+}
+.x-spreadsheet-dropdown.top-left .x-spreadsheet-dropdown-content {
+  bottom: calc(100% + 5px);
+  left: 0;
+}
+.x-spreadsheet-dropdown.top-right .x-spreadsheet-dropdown-content {
+  bottom: calc(100% + 5px);
+  right: 0;
+}
+.x-spreadsheet-dropdown .x-spreadsheet-dropdown-title {
+  padding: 0 5px;
+  display: inline-block;
+}
+/* resizer **/
+.x-spreadsheet-resizer {
+  position: absolute;
+  z-index: 11;
+}
+.x-spreadsheet-resizer .x-spreadsheet-resizer-hover {
+  background-color: var(--ow-xs-gesture);
+}
+.x-spreadsheet-resizer .x-spreadsheet-resizer-line {
+  position: absolute;
+}
+.x-spreadsheet-resizer.horizontal {
+  cursor: row-resize;
+}
+.x-spreadsheet-resizer.horizontal .x-spreadsheet-resizer-line {
+  border-bottom: 2px dashed var(--ow-xs-ink);
+  left: 0;
+  bottom: 0;
+}
+.x-spreadsheet-resizer.vertical {
+  cursor: col-resize;
+}
+.x-spreadsheet-resizer.vertical .x-spreadsheet-resizer-line {
+  border-right: 2px dashed var(--ow-xs-ink);
+  top: 0;
+  right: 0;
+}
+/* scrollbar */
+.x-spreadsheet-scrollbar {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background-color: var(--ow-xs-paper);
+  opacity: 0.9;
+  z-index: 12;
+}
+.x-spreadsheet-scrollbar.horizontal {
+  right: 15px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+.x-spreadsheet-scrollbar.horizontal > div {
+  height: 1px;
+  background: var(--ow-xs-line);
+}
+.x-spreadsheet-scrollbar.vertical {
+  bottom: 15px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.x-spreadsheet-scrollbar.vertical > div {
+  width: 1px;
+  background: var(--ow-xs-line);
+}
+/* @{css-prefix}-overlayer */
+.x-spreadsheet-overlayer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 10;
+}
+.x-spreadsheet-overlayer .x-spreadsheet-overlayer-content {
+  position: absolute;
+  overflow: hidden;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+}
+.x-spreadsheet-editor,
+.x-spreadsheet-selector {
+  box-sizing: content-box;
+  position: absolute;
+  overflow: hidden;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+/* @{css-prefix}-selector */
+.x-spreadsheet-selector .hide-input {
+  position: absolute;
+  z-index: 0;
+}
+.x-spreadsheet-selector .hide-input input {
+  padding: 0;
+  width: 0;
+  border: none !important;
+}
+/* 选区框：语义上等同 --ow-selection-bg，但暗档 selection-bg 是近白色，压在恒亮
+   网格上不可见，所以这里取 A 域恒定墨（= selection-bg 的浅档定值）。 */
+.x-spreadsheet-selector .x-spreadsheet-selector-area {
+  position: absolute;
+  border: 2px solid var(--ow-xs-ink);
+  background: var(--ow-xs-sel-fill);
+  z-index: 5;
+}
+.x-spreadsheet-selector .x-spreadsheet-selector-clipboard,
+.x-spreadsheet-selector .x-spreadsheet-selector-autofill {
+  position: absolute;
+  background: transparent;
+  z-index: 100;
+}
+.x-spreadsheet-selector .x-spreadsheet-selector-clipboard {
+  border: 2px dashed var(--ow-xs-ink);
+}
+.x-spreadsheet-selector .x-spreadsheet-selector-autofill {
+  border: 1px dashed var(--ow-xs-sel-ghost);
+}
+.x-spreadsheet-selector .x-spreadsheet-selector-corner {
+  pointer-events: auto;
+  position: absolute;
+  cursor: crosshair;
+  font-size: 0;
+  height: 5px;
+  width: 5px;
+  right: -5px;
+  bottom: -5px;
+  border: 2px solid var(--ow-xs-paper);
+  background: var(--ow-xs-ink);
+}
+.x-spreadsheet-editor {
+  z-index: 20;
+}
+.x-spreadsheet-editor .x-spreadsheet-editor-area {
+  position: absolute;
+  text-align: left;
+  background: var(--ow-xs-paper);
+  border: 2px solid var(--ow-xs-ink);
+  line-height: 0;
+  z-index: 100;
+  pointer-events: auto;
+}
+.x-spreadsheet-editor .x-spreadsheet-editor-area textarea {
+  box-sizing: content-box;
+  border: none;
+  padding: 0 3px;
+  outline: none;
+  resize: none;
+  text-align: start;
+  overflow-y: hidden;
+  font: var(--ow-font-weight-normal) var(--ow-fs-ui) var(--ow-font-sans);
+  background: var(--ow-xs-paper);
+  color: inherit;
+  white-space: normal;
+  word-wrap: break-word;
+  line-height: 22px;
+  margin: 0;
+}
+.x-spreadsheet-editor .x-spreadsheet-editor-area .textline {
+  overflow: hidden;
+  visibility: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.x-spreadsheet-item {
+  user-select: none;
+  background: 0;
+  border: 1px solid transparent;
+  outline: none;
+  height: 26px;
+  color: var(--ow-text);
+  line-height: 26px;
+  list-style: none;
+  padding: 2px 10px;
+  cursor: default;
+  text-align: left;
+  overflow: hidden;
+}
+/* §6 禁统一透明度禁用态：逐 token 给禁用色。 */
+.x-spreadsheet-item.disabled {
+  pointer-events: none;
+  color: var(--ow-disabled-text);
+}
+.x-spreadsheet-item:hover {
+  background: var(--ow-hover-pop);
+}
+.x-spreadsheet-item:active {
+  background: var(--ow-press-pop);
+}
+.x-spreadsheet-item.active {
+  background: var(--ow-hover-pop);
+  font-weight: var(--ow-font-weight-medium);
+}
+.x-spreadsheet-item:focus-visible {
+  outline: var(--ow-focus-ring-w) solid var(--ow-focus-ring);
+  outline-offset: calc(-1 * var(--ow-focus-ring-w));
+}
+.x-spreadsheet-item.divider {
+  height: 0;
+  padding: 0;
+  margin: 5px 0;
+  border: none;
+  border-bottom: 1px solid var(--ow-border);
+}
+/* 行尾快捷键属 §7 读数：mono + tabular-nums。 */
+.x-spreadsheet-item .label {
+  float: right;
+  color: var(--ow-text-3);
+  font-family: var(--ow-font-mono);
+  font-variant-numeric: tabular-nums;
+  font-size: 1em;
+}
+.x-spreadsheet-item.state,
+.x-spreadsheet-header.state {
+  padding-left: 35px !important;
+  position: relative;
+}
+.x-spreadsheet-item.state:before,
+.x-spreadsheet-header.state:before {
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  left: 12px;
+  top: calc(50% - 5px);
+  background: var(--ow-control-off);
+  border-radius: var(--ow-radius-2xs);
+}
+/* §15 无彩选中：勾选态取 --ow-control-on，不用品牌色。 */
+.x-spreadsheet-item.state.checked:before,
+.x-spreadsheet-header.state.checked:before {
+  background: var(--ow-control-on);
+}
+.x-spreadsheet-checkbox {
+  position: relative;
+  display: inline-block;
+  backface-visibility: hidden;
+  outline: 0;
+  vertical-align: baseline;
+  font-style: normal;
+  font-size: 1rem;
+  line-height: 1em;
+}
+.x-spreadsheet-checkbox > input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0 !important;
+  outline: 0;
+  z-index: -1;
+}
+.x-spreadsheet-suggest,
+.x-spreadsheet-contextmenu,
+.x-spreadsheet-sort-filter {
+  position: absolute;
+  box-shadow: var(--ow-shadow-pop);
+  background: var(--ow-popover-bg);
+  border: 1px solid var(--ow-border);
+  border-radius: var(--ow-radius-menu);
+  color: var(--ow-text);
+  z-index: 100;
+  width: 260px;
+  pointer-events: auto;
+  overflow: auto;
+}
+.x-spreadsheet-suggest {
+  width: 200px;
+}
+.x-spreadsheet-filter {
+  border: 1px solid var(--ow-border);
+  border-radius: var(--ow-radius-2xs);
+  font-size: var(--ow-fs-caption);
+  margin: 10px;
+}
+/* 表头坐嵌套井：§5 surface-2。 */
+.x-spreadsheet-filter .x-spreadsheet-header {
+  padding: 0.5em 0.75em;
+  background: var(--ow-surface-2);
+  color: var(--ow-text);
+  border-bottom: 1px solid var(--ow-border);
+  border-left: 1px solid transparent;
+}
+.x-spreadsheet-filter .x-spreadsheet-body {
+  height: 200px;
+  overflow-y: auto;
+}
+.x-spreadsheet-filter .x-spreadsheet-body .x-spreadsheet-item {
+  height: 20px;
+  line-height: 20px;
+}
+.x-spreadsheet-sort-filter .x-spreadsheet-buttons {
+  margin: 10px;
+}
+.x-spreadsheet-bottombar {
+  height: 40px;
+  padding: 0 30px;
+  text-align: left;
+  background: var(--ow-surface-2);
+  display: flex;
+  position: relative;
+  border-top: 1px solid var(--ow-border);
+}
+.x-spreadsheet-bottombar .x-spreadsheet-menu > li {
+  line-height: 40px;
+  height: 40px;
+  padding-top: 0;
+  padding-bottom: 0;
+  vertical-align: middle;
+  border-right: 1px solid var(--ow-border);
+}
+.x-spreadsheet-menu {
+  display: flex;
+  overflow-x: auto;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  user-select: none;
+}
+/* sheet 页签：R1 双编码 —— 当前页签既升面（surface，与表格同档、视觉上与纸面连成
+   一块）又加字重，颜色只是第二编码。§9 唯一缓动 ease-beacon + 120ms hover 档。 */
+.x-spreadsheet-menu > li {
+  float: left;
+  line-height: 1.25em;
+  padding: 0.785em 1em;
+  margin: 0;
+  vertical-align: middle;
+  text-align: left;
+  color: var(--ow-text-2);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--ow-dur-1) var(--ow-ease-beacon), color var(--ow-dur-1) var(--ow-ease-beacon);
+  font-weight: var(--ow-font-weight-normal);
+}
+.x-spreadsheet-menu > li:hover {
+  background-color: var(--ow-hover);
+  color: var(--ow-text);
+}
+.x-spreadsheet-menu > li:active {
+  background-color: var(--ow-press);
+}
+.x-spreadsheet-menu > li:focus-visible {
+  outline: var(--ow-focus-ring-w) solid var(--ow-focus-ring);
+  outline-offset: calc(-1 * var(--ow-focus-ring-w));
+}
+.x-spreadsheet-menu > li.active {
+  background-color: var(--ow-surface);
+  color: var(--ow-text);
+  font-weight: var(--ow-font-weight-medium);
+}
+.x-spreadsheet-menu > li .x-spreadsheet-dropdown {
+  display: inline-block;
+}
+.x-spreadsheet-print {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 100;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.x-spreadsheet-print-bar {
+  background: var(--ow-surface-2);
+  border-bottom: 1px solid var(--ow-border);
+  height: 60px;
+  line-height: 60px;
+  padding: 0 30px;
+}
+.x-spreadsheet-print-bar .-title {
+  color: var(--ow-text);
+  font-weight: var(--ow-font-weight-medium);
+  font-size: 1.2em;
+  float: left;
+}
+.x-spreadsheet-print-bar .-right {
+  float: right;
+  margin-top: 12px;
+}
+.x-spreadsheet-print-content {
+  display: flex;
+  flex: auto;
+  flex-direction: row;
+  /* 纸张衬底走 --ow-mat（04 预览域「纸面/媒体衬底」口径），随主题走。 */
+  background: var(--ow-mat);
+  height: calc(100% - 60px);
+}
+.x-spreadsheet-print-content .-sider {
+  flex: 0 0 300px;
+  width: 300px;
+  border-left: 1px solid var(--ow-border);
+  background: var(--ow-surface);
+}
+.x-spreadsheet-print-content .-content {
+  flex: auto;
+  overflow-x: auto;
+  overflow-y: scroll;
+  height: 100%;
+}
+.x-spreadsheet-canvas-card-wraper {
+  margin: 40px 20px;
+}
+/* 打印页卡也贴 canvas（打印用的还是那张画布），属 A 域恒定纸面。 */
+.x-spreadsheet-canvas-card {
+  background: var(--ow-xs-paper, var(--ow-paper));
+  margin: auto;
+  page-break-before: auto;
+  page-break-after: always;
+  box-shadow: var(--ow-shadow-modal);
+}
+.x-spreadsheet-calendar {
+  color: var(--ow-text);
+  background: var(--ow-popover-bg);
+  user-select: none;
+}
+.x-spreadsheet-calendar .calendar-header {
+  font-weight: 700;
+  line-height: 30px;
+  text-align: center;
+  width: 100%;
+  float: left;
+  background: var(--ow-surface-2);
+}
+.x-spreadsheet-calendar .calendar-header .calendar-header-left {
+  padding-left: 5px;
+  float: left;
+}
+.x-spreadsheet-calendar .calendar-header .calendar-header-right {
+  float: right;
+}
+.x-spreadsheet-calendar .calendar-header .calendar-header-right a {
+  padding: 3px 0;
+  margin-right: 2px;
+  border-radius: var(--ow-radius-2xs);
+}
+.x-spreadsheet-calendar .calendar-header .calendar-header-right a:hover {
+  background: var(--ow-hover-pop);
+}
+.x-spreadsheet-calendar .calendar-body {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+.x-spreadsheet-calendar .calendar-body th,
+.x-spreadsheet-calendar .calendar-body td {
+  width: 14.28571429%;
+  min-width: 32px;
+  text-align: center;
+  font-weight: 700;
+  line-height: 30px;
+  padding: 0;
+}
+.x-spreadsheet-calendar .calendar-body td > .cell:hover {
+  background: var(--ow-hover-pop);
+}
+.x-spreadsheet-calendar .calendar-body td > .cell:active {
+  background: var(--ow-press-pop);
+}
+/* §15 无彩选中；R1 双编码：底色之外再加字重。 */
+.x-spreadsheet-calendar .calendar-body td > .cell.active,
+.x-spreadsheet-calendar .calendar-body td > .cell.active:hover {
+  background: var(--ow-control-on);
+  color: var(--ow-control-on-glyph);
+  font-weight: var(--ow-font-weight-medium);
+}
+.x-spreadsheet-calendar .calendar-body td > .cell.disabled {
+  pointer-events: none;
+  color: var(--ow-disabled-text);
+}
+.x-spreadsheet-datepicker {
+  box-shadow: var(--ow-shadow-pop);
+  border: 1px solid var(--ow-border);
+  border-radius: var(--ow-radius-menu);
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  top: calc(100% + 5px);
+  z-index: 10;
+  width: auto;
+}
+.x-spreadsheet-buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+.x-spreadsheet-buttons .x-spreadsheet-button {
+  margin-left: 8px;
+}
+.x-spreadsheet-button {
+  display: inline-block;
+  border-radius: var(--ow-radius-action);
+  line-height: 1em;
+  min-height: 1em;
+  white-space: nowrap;
+  text-align: center;
+  cursor: pointer;
+  font-size: 1em;
+  font-weight: var(--ow-font-weight-medium);
+  padding: 0.75em 1em;
+  color: var(--ow-btn-secondary-fg);
+  background: var(--ow-btn-secondary-bg);
+  border: 1px solid var(--ow-btn-secondary-border);
+  text-decoration: none;
+  font-family: var(--ow-font-sans);
+  outline: none;
+  vertical-align: baseline;
+  zoom: 1;
+  user-select: none;
+  transition: background-color var(--ow-dur-1) var(--ow-ease-beacon);
+}
+.x-spreadsheet-button.active,
+.x-spreadsheet-button:hover {
+  background-color: var(--ow-btn-secondary-hover);
+  color: var(--ow-btn-secondary-fg);
+}
+.x-spreadsheet-button:active {
+  background-color: var(--ow-btn-secondary-press);
+}
+.x-spreadsheet-button:focus-visible {
+  outline: var(--ow-focus-ring-w) solid var(--ow-focus-ring);
+  outline-offset: var(--ow-focus-ring-offset);
+}
+.x-spreadsheet-button:disabled,
+.x-spreadsheet-button.disabled {
+  pointer-events: none;
+  color: var(--ow-disabled-text);
+  background: var(--ow-disabled-bg);
+  border-color: var(--ow-disabled-border);
+}
+.x-spreadsheet-button.primary {
+  color: var(--ow-btn-primary-fg);
+  background-color: var(--ow-btn-primary-bg);
+  border-color: transparent;
+}
+.x-spreadsheet-button.primary:hover,
+.x-spreadsheet-button.primary.active {
+  color: var(--ow-btn-primary-fg);
+  background-color: var(--ow-btn-primary-hover);
+}
+.x-spreadsheet-button.primary:active {
+  background-color: var(--ow-btn-primary-press);
+}
+.x-spreadsheet-button.primary:disabled,
+.x-spreadsheet-button.primary.disabled {
+  color: var(--ow-btn-primary-disabled-fg);
+  background: var(--ow-btn-primary-disabled-bg);
+}
+.x-spreadsheet-form-input {
+  font-size: 1em;
+  position: relative;
+  font-weight: var(--ow-font-weight-normal);
+  display: inline-flex;
+  color: var(--ow-input-text);
+}
+.x-spreadsheet-form-input input {
+  z-index: 1;
+  margin: 0;
+  max-width: 100%;
+  flex: 1 0 auto;
+  outline: 0;
+  -webkit-tap-highlight-color: transparent;
+  text-align: left;
+  line-height: 30px;
+  height: 30px;
+  padding: 0 8px;
+  color: var(--ow-input-text);
+  background: var(--ow-input-bg);
+  border: 1px solid var(--ow-input-border);
+  border-radius: var(--ow-radius-control);
+  transition: border-color var(--ow-dur-1) var(--ow-ease-beacon);
+}
+.x-spreadsheet-form-input input::placeholder {
+  color: var(--ow-placeholder);
+}
+.x-spreadsheet-form-input input:hover:not(:disabled) {
+  border-color: var(--ow-input-border-hover);
+}
+/* R3：输入类 focus 只变边框色，不画外环（键盘环只属按钮与链接）。 */
+.x-spreadsheet-form-input input:focus {
+  border-color: var(--ow-input-border-focus);
+}
+.x-spreadsheet-form-input input:disabled {
+  color: var(--ow-input-disabled-text);
+  background: var(--ow-input-disabled-bg);
+  border-color: var(--ow-disabled-border);
+}
+.x-spreadsheet-form-select {
+  position: relative;
+  display: inline-block;
+  background: var(--ow-input-bg);
+  border: 1px solid var(--ow-input-border);
+  border-radius: var(--ow-radius-control);
+  cursor: pointer;
+  color: var(--ow-input-text);
+  user-select: none;
+  transition: border-color var(--ow-dur-1) var(--ow-ease-beacon);
+}
+.x-spreadsheet-form-select:hover {
+  border-color: var(--ow-input-border-hover);
+}
+.x-spreadsheet-form-select:focus-within {
+  border-color: var(--ow-input-border-focus);
+}
+.x-spreadsheet-form-select .input-text {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 60px;
+  width: auto;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 8px;
+}
+.x-spreadsheet-form-fields {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.x-spreadsheet-form-fields .x-spreadsheet-form-field {
+  flex: 0 1 auto;
+}
+.x-spreadsheet-form-fields .x-spreadsheet-form-field .label {
+  display: inline-block;
+  margin: 0 10px 0 0;
+}
+.x-spreadsheet-form-field {
+  display: block;
+  vertical-align: middle;
+  margin-left: 10px;
+  margin-bottom: 10px;
+}
+.x-spreadsheet-form-field:first-child {
+  margin-left: 0;
+}
+/* 功能色族 danger→error 随上游改名（BLUEPRINT 验收裁决 6）。 */
+.x-spreadsheet-form-field.error .x-spreadsheet-form-select,
+.x-spreadsheet-form-field.error input {
+  border-color: var(--ow-error);
+}
+.x-spreadsheet-form-field .tip {
+  color: var(--ow-error);
+  font-size: 0.9em;
+}
+.x-spreadsheet-dimmer {
+  display: none;
+  position: absolute;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  vertical-align: middle;
+  background-color: var(--ow-scrim);
+  opacity: 0;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+  transition: background-color 0.5s linear;
+  user-select: none;
+  z-index: 1000;
+}
+.x-spreadsheet-dimmer.active {
+  display: block;
+  opacity: 1;
+}
+/* §5 toast＝popover 待遇不反色、不半透明；模态另加 --ow-shadow-modal + --ow-scrim。 */
+.x-spreadsheet-modal,
+.x-spreadsheet-toast {
+  font-size: var(--ow-fs-ui);
+  position: fixed;
+  z-index: 1001;
+  text-align: left;
+  line-height: 1.25em;
+  min-width: 360px;
+  color: var(--ow-text);
+  font-family: var(--ow-font-sans);
+  border-radius: var(--ow-radius-card);
+  border: 1px solid var(--ow-border);
+  background-color: var(--ow-popover-bg);
+  background-clip: padding-box;
+  box-shadow: var(--ow-shadow-pop);
+}
+.x-spreadsheet-modal {
+  border-radius: var(--ow-radius-modal);
+  box-shadow: var(--ow-shadow-modal);
+}
+.x-spreadsheet-toast {
+  background-color: var(--ow-popover-bg);
+}
+.x-spreadsheet-modal-header,
+.x-spreadsheet-toast-header {
+  font-weight: var(--ow-font-weight-semibold);
+  background-clip: padding-box;
+  background-color: var(--ow-surface-2);
+  border-bottom: 1px solid var(--ow-border);
+  border-radius: var(--ow-radius-card) var(--ow-radius-card) 0 0;
+}
+
+.x-spreadsheet-toast-header {
+  color: var(--ow-warning-on-tint);
+}
+.x-spreadsheet-modal-header {
+  border-bottom: 1px solid var(--ow-border);
+  background: var(--ow-surface-2);
+  border-radius: var(--ow-radius-modal) var(--ow-radius-modal) 0 0;
+  font-size: 1.0785em;
+}
+.x-spreadsheet-modal-header,
+.x-spreadsheet-modal-content,
+.x-spreadsheet-toast-header,
+.x-spreadsheet-toast-content {
+  padding: 0.75em 1em;
+}
+
+/* 只读模式：bottombar 的首个菜单项是「+ 新建 sheet」，预览场景下隐藏 */
+.x-spreadsheet-menu li:first-child {
+  display: none;
+}
+}
+
+@layer components {
+  [data-slot="office-preview"] [data-ow-part="empty"] svg {
+    width: 32px;
+    height: 32px;
+  }
+
+  [data-slot="office-preview"] [data-slot="excel-sheet"] {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  [data-slot="office-preview"] [data-slot="excel-sheet"] .x-spreadsheet {
+    width: 100% !important;
+  }
+
+  [data-slot="office-preview"] [data-slot="excel-sheet"] .x-spreadsheet-bottombar {
+    border-top-color: var(--ow-border-strong);
+  }
+
+  [data-slot="office-preview"] [data-ow-part="content"] .ow-docx-body {
+    max-width: 100%;
+  }
+
+  [data-slot="office-preview"] [data-ow-part="content"] .ow-docx-body-wrapper,
+  [data-slot="office-preview"] [data-ow-part="content"] .docx-wrapper {
+    background: var(--ow-bg) !important;
+    padding: 10px !important;
+  }
+
+  [data-slot="office-preview"] [data-ow-part="content"] .ow-docx-body-wrapper > section.docx,
+  [data-slot="office-preview"] [data-ow-part="content"] .ow-docx-body-wrapper > section.ow-docx-body,
+  [data-slot="office-preview"] [data-ow-part="content"] .docx-wrapper > section.docx,
+  [data-slot="office-preview"] [data-ow-part="content"] .docx-wrapper > section.ow-docx-body {
+    --ow-docx-paper: var(--ow-paper);
+    background: var(--ow-docx-paper) !important;
+    margin-bottom: 5px !important;
+    box-shadow: none !important;
+  }
+
+  @media screen and (max-width: 800px) {
+    [data-slot="office-preview"] [data-ow-part="content"] .ow-docx-body-wrapper,
+    [data-slot="office-preview"] [data-ow-part="content"] .docx-wrapper {
+      padding: 0 !important;
+    }
+
+    [data-slot="office-preview"] [data-ow-part="content"] .ow-docx-body-wrapper > section.docx,
+    [data-slot="office-preview"] [data-ow-part="content"] .docx-wrapper > section.docx {
+      width: 100% !important;
+      padding: 10px !important;
+      margin-bottom: 0;
+    }
+  }
+
+  [data-slot="office-preview"] [data-ow-part="content"] .pptx-preview-wrapper {
+    max-width: 100%;
+  }
+
+  [data-slot="office-preview"] [data-ow-part="pptx-body"][data-ow-state="collapsed"] {
+    grid-template-columns: 1fr !important;
+  }
+
+  [data-slot="office-preview"] [data-ow-part="pptx-body"][data-ow-state="collapsed"] [data-ow-part="pptx-main"] {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  [data-slot="office-preview"] [data-ow-part="pptx-body"][data-ow-state="collapsed"] [data-ow-part="pptx-thumbs"] {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 32px;
+    padding: 10px 0;
+    overflow: visible;
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    z-index: 10;
+    scrollbar-width: none;
+
+    transition:
+      width var(--ow-dur-2) var(--ow-ease-beacon), padding var(--ow-dur-2) var(--ow-ease-beacon),
+      background var(--ow-dur-2) var(--ow-ease-beacon), box-shadow var(--ow-dur-2) var(--ow-ease-beacon),
+      border-radius var(--ow-dur-2) var(--ow-ease-beacon);
+  }
+
+  [data-slot="office-preview"] [data-ow-part="pptx-body"][data-ow-state="collapsed"] [data-ow-part="pptx-thumbs"] > * {
+    display: block;
+    width: 16px;
+    height: 2px;
+    min-height: 2px;
+    max-height: 2px;
+    background: var(--ow-border-strong);
+    border-radius: var(--ow-radius-2xs);
+    padding: 0;
+    border: none;
+    overflow: hidden;
+    flex-shrink: 0;
+    cursor: pointer;
+    transition: background var(--ow-dur-1) var(--ow-ease-beacon), width var(--ow-dur-1) var(--ow-ease-beacon);
+  }
+
+  [data-slot="office-preview"]
+    [data-ow-part="pptx-body"][data-ow-state="collapsed"]
+    [data-ow-part="pptx-thumbs"]
+    > [data-ow-state="active"] {
+    background: var(--ow-text);
+    width: 20px;
+    height: 3px;
+    min-height: 3px;
+    max-height: 3px;
+  }
+
+  [data-slot="office-preview"]
+    [data-ow-part="pptx-body"][data-ow-state="collapsed"]
+    [data-ow-part="pptx-thumbs"]
+    > *
+    > * {
+    display: none;
+  }
+
+  [data-slot="office-preview"]
+    [data-ow-part="pptx-body"][data-ow-state="collapsed"]
+    [data-ow-part="pptx-thumbs"]:hover {
+    width: 160px;
+    height: auto;
+    max-height: 80vh;
+    padding: var(--ow-space-3, 12px) var(--ow-space-2, 8px);
+    overflow-y: auto;
+    background: color-mix(in srgb, var(--ow-popover-bg) 82%, transparent);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    box-shadow: var(--ow-shadow-pop);
+    display: flex;
+    flex-direction: column;
+    gap: var(--ow-space-2, 8px);
+    align-items: stretch;
+    justify-content: flex-start;
+    cursor: default;
+    border-radius: var(--ow-radius-lg);
+    scrollbar-width: thin;
+
+    animation: ow-pptx-drawer-in var(--ow-dur-2) var(--ow-ease-beacon);
+  }
+
+  [data-slot="office-preview"]
+    [data-ow-part="pptx-body"][data-ow-state="collapsed"]
+    [data-ow-part="pptx-thumbs"]:hover
+    > * {
+    display: grid;
+    grid-template-columns: 32px minmax(0, 1fr);
+    align-items: center;
+    width: auto;
+    height: auto;
+    min-height: auto;
+    max-height: none;
+    background: none;
+    border-radius: var(--ow-radius-md);
+    overflow: visible;
+    padding: var(--ow-space-2, 8px);
+    border: none;
+  }
+
+  [data-slot="office-preview"]
+    [data-ow-part="pptx-body"][data-ow-state="collapsed"]
+    [data-ow-part="pptx-thumbs"]:hover
+    > [data-ow-state="active"] {
+    background: var(--ow-selected-bg);
+    width: auto;
+    height: auto;
+    min-height: auto;
+    max-height: none;
+  }
+
+  [data-slot="office-preview"]
+    [data-ow-part="pptx-body"][data-ow-state="collapsed"]
+    [data-ow-part="pptx-thumbs"]:hover
+    > *
+    > * {
+    display: block;
+  }
+
+  @keyframes ow-pptx-drawer-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  [data-slot="office-preview"] [data-slot="pptx-thumb"][data-ow-state="active"] [data-ow-part="slide"] {
+    border-color: var(--ow-control-on);
+  }
+
+  [data-slot="office-preview"] [data-slot="pptx-thumb"] [data-ow-part="slide"] > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform-origin: top left;
+    pointer-events: none;
+  }
+
+  [data-theme="dark"] [data-slot="office-preview"] [data-ow-part="pptx-thumbs"] {
+    background: color-mix(in srgb, var(--ow-graphite) 78%, transparent);
+    border-right-color: var(--ow-border);
+  }
+
+  [data-theme="dark"]
+    [data-slot="office-preview"]
+    [data-slot="pptx-thumb"][data-ow-state="active"]
+    [data-ow-part="slide"] {
+    border-color: var(--ow-control-on);
+  }
+
+  [data-theme="dark"] [data-slot="office-preview"] [data-slot="pptx-thumb"] [data-ow-part="slide"] {
+    background: var(--ow-surface-2);
+    border-color: var(--ow-border-strong);
+  }
+
+  [data-theme="dark"]
+    [data-slot="office-preview"]
+    [data-ow-part="pptx-body"][data-ow-state="collapsed"]
+    [data-ow-part="pptx-thumbs"]:hover {
+    background: color-mix(in srgb, var(--ow-graphite) 88%, transparent);
+    box-shadow: var(--ow-shadow-pop);
+  }
+
+  [data-theme="dark"]
+    [data-slot="office-preview"]
+    [data-ow-part="pptx-body"][data-ow-state="collapsed"]
+    [data-ow-part="pptx-thumbs"]:hover
+    > [data-ow-state="active"] {
+    background: var(--ow-selected-bg);
+  }
+}