ooxml-ui 0.29.1 → 0.29.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -6
- package/dist/{chunk-V6W5DKJ6.js → chunk-4TSBX6J3.js} +1 -1
- package/dist/{chunk-BDKMSBK6.js → chunk-4VKD3COE.js} +36 -36
- package/dist/{chunk-4VQ6S7QJ.js → chunk-C66U34OA.js} +1 -1
- package/dist/{chunk-GHQPE2LA.js → chunk-NEDNYLXX.js} +13 -13
- package/dist/{chunk-KAPSBHAS.js → chunk-QHY7U7KK.js} +4 -4
- package/dist/controls.js +2 -2
- package/dist/docx.js +21 -21
- package/dist/index.js +5 -5
- package/dist/presence.js +1 -1
- package/dist/smartart.js +1 -1
- package/dist/teams.js +3 -3
- package/dist/visio.js +6 -6
- package/dist/xlsx.js +10 -10
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -46,7 +46,7 @@ strip, backstage, account, find bar, print preview, ruler), `presence/`, `smarta
|
|
|
46
46
|
private field behind a hand-written accessor.
|
|
47
47
|
- **Text is exact.** Text-bearing elements are written without whitespace between nodes, because
|
|
48
48
|
consumers compare `textContent`. `oxfmt` is set to `htmlWhitespaceSensitivity: "strict"` for
|
|
49
|
-
`
|
|
49
|
+
`src/ui/src` (not `teams/`) so it never adds whitespace to a template; `glyph.ts` opts out of
|
|
50
50
|
the formatter with `// prettier-ignore` because it reflows `<svg>` regardless.
|
|
51
51
|
- **`ribbon-section` and `keytips`** keep imperative DOM on purpose: the section patches light-DOM
|
|
52
52
|
children keyed by id (so focus and a product's tags survive), and keytips attaches a badge layer to
|
|
@@ -194,7 +194,7 @@ a dark scheme keeps working.
|
|
|
194
194
|
for framework bindings and editor tooling. Properties and attributes are read from the live classes;
|
|
195
195
|
events are the names each element fires, taken from its source, so an event dispatched under a name
|
|
196
196
|
built at run time would be missing. A test fails while the file is out of date: run
|
|
197
|
-
`bun run --cwd
|
|
197
|
+
`bun run --cwd src/ui gen:manifest` after changing an element.
|
|
198
198
|
|
|
199
199
|
`office-ui-smartart` shows the drawing the producing application cached; it never lays out a
|
|
200
200
|
diagram itself. Preset outlines it cannot draw are rendered as rectangles, gradient and pattern
|
|
@@ -212,10 +212,10 @@ become aliases of `office-ui-*`.
|
|
|
212
212
|
|
|
213
213
|
```
|
|
214
214
|
bun install
|
|
215
|
-
bun run --cwd
|
|
216
|
-
bun run --cwd
|
|
217
|
-
bun run build && bun run --cwd
|
|
218
|
-
bun run --cwd
|
|
215
|
+
bun run --cwd src/ui typecheck
|
|
216
|
+
bun run --cwd src/ui test
|
|
217
|
+
bun run build && bun run --cwd src/ui build # core first: the declarations read ../../dist
|
|
218
|
+
bun run --cwd src/ui test:package
|
|
219
219
|
```
|
|
220
220
|
|
|
221
221
|
## Documentation
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { OfficeElement, controlStyles, definer } from './chunk-ZWBP2WTC.js';
|
|
2
2
|
import { html } from 'lit';
|
|
3
3
|
|
|
4
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
4
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/presence/presence.css?raw
|
|
5
5
|
var presence_default = ":host {\n display: inline-flex;\n align-items: center;\n}\nul {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n}\nli {\n margin-inline-start: calc(-1 * var(--office-space-1-5));\n}\nli:first-child {\n margin-inline-start: 0;\n}\nbutton,\n.more {\n box-sizing: border-box;\n display: inline-grid;\n place-items: center;\n width: var(--office-target-size);\n height: var(--office-target-size);\n padding: 0;\n border-radius: 50%;\n border: var(--office-border-width-thick) solid var(--office-avatar-color);\n background: var(--office-surface);\n color: var(--office-foreground);\n font: 600 var(--office-font-size-xs) var(--office-font);\n cursor: pointer;\n}\n.more {\n cursor: default;\n border-color: var(--office-border);\n}\nbutton:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: calc(var(--office-focus-offset) / 2);\n z-index: 1;\n}\nbutton[data-status='idle'] {\n opacity: 0.7;\n}\nbutton[data-status='away'] {\n opacity: 0.45;\n border-style: dashed;\n}\n@media (forced-colors: active) {\n button,\n .more {\n border-color: CanvasText;\n background: Canvas;\n color: CanvasText;\n }\n button:focus-visible {\n outline-color: Highlight;\n }\n}\n";
|
|
6
6
|
|
|
7
7
|
// src/presence/presence.ts
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createIconSvg, paintIcon, getIcon } from './chunk-HZ422LTR.js';
|
|
2
|
-
import { initialsOf } from './chunk-
|
|
2
|
+
import { initialsOf } from './chunk-4TSBX6J3.js';
|
|
3
3
|
import { OfficeElement, controlStyles, definer, valueOn, flag, present, triState, withTokens } from './chunk-ZWBP2WTC.js';
|
|
4
4
|
import { tok, OFFICE_TOKENS } from './chunk-7Q7ZS2CC.js';
|
|
5
5
|
import { html, LitElement, nothing, render, svg } from 'lit';
|
|
@@ -20,7 +20,7 @@ function glyph(name, className = "glyph", hidden = false) {
|
|
|
20
20
|
>${found ? svg`<path d=${found.d}></path>` : ""}</svg>`;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
23
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/dialog/dialog-footer.css?raw
|
|
24
24
|
var dialog_footer_default = ":host {\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n}\n:host([hidden]) {\n display: none !important;\n}\nsvg {\n flex: none;\n width: var(--office-icon-size);\n height: var(--office-icon-size);\n fill: none;\n stroke: currentColor;\n stroke-width: var(--office-icon-stroke);\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n.footer {\n box-sizing: border-box;\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: var(--office-space-2);\n}\nbutton {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--office-space-1-5);\n min-width: var(--office-control-height);\n min-height: var(--office-control-height-lg);\n padding: var(--office-space-1-5) var(--office-space-3-5);\n border: var(--office-border-width) solid var(--office-border);\n border-radius: var(--office-radius-md);\n background: var(--office-surface);\n color: var(--office-foreground);\n font: 500 var(--office-font-size)/1.2 var(--office-font);\n cursor: pointer;\n touch-action: manipulation;\n}\nbutton:hover:not(:disabled) {\n background: var(--office-selected);\n}\nbutton.primary {\n border-color: var(--office-accent);\n background: var(--office-accent);\n color: var(--office-accent-foreground);\n}\nbutton.primary:hover:not(:disabled) {\n opacity: 0.9;\n background: var(--office-accent);\n}\nbutton.warning {\n border-color: var(--office-warning);\n background: var(--office-warning);\n color: var(--office-warning-foreground);\n}\nbutton.warning:hover:not(:disabled) {\n opacity: 0.9;\n background: var(--office-warning);\n}\nbutton.danger {\n border-color: var(--office-danger);\n background: var(--office-danger);\n color: var(--office-danger-foreground);\n}\nbutton.danger:hover:not(:disabled) {\n opacity: 0.9;\n background: var(--office-danger);\n}\nbutton.start {\n margin-right: auto;\n}\nbutton.busy::before {\n content: '';\n width: var(--office-icon-size-sm);\n height: var(--office-icon-size-sm);\n border: var(--office-border-width-thick) solid currentColor;\n border-right-color: transparent;\n border-radius: 50%;\n animation: office-footer-spin var(--office-duration-spin) linear infinite;\n}\n@keyframes office-footer-spin {\n to {\n transform: rotate(360deg);\n }\n}\n@media (prefers-reduced-motion: reduce) {\n button.busy::before {\n animation: none;\n }\n}\nbutton:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n}\nbutton:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: var(--office-focus-offset);\n}\n@media (pointer: coarse), (max-width: 767px) {\n button {\n min-width: var(--office-target-size-touch);\n min-height: var(--office-target-size-touch);\n }\n}\n@media (forced-colors: active) {\n button,\n button.primary,\n button.warning,\n button.danger {\n border-color: ButtonText;\n background: ButtonFace;\n color: ButtonText;\n }\n button:hover:not(:disabled) {\n background: Highlight;\n color: HighlightText;\n }\n button.primary {\n border-width: var(--office-border-width-thick);\n }\n button:focus-visible {\n outline-color: Highlight;\n }\n}\n";
|
|
25
25
|
|
|
26
26
|
// src/dialog/dialog-footer.ts
|
|
@@ -74,7 +74,7 @@ var OfficeUiDialogFooter = class extends OfficeElement {
|
|
|
74
74
|
};
|
|
75
75
|
var defineDialogFooter = definer("office-ui-dialog-footer", () => OfficeUiDialogFooter);
|
|
76
76
|
|
|
77
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
77
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/notices/toasts.css?raw
|
|
78
78
|
var toasts_default = ":host {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 70%;\n pointer-events: none;\n}\n:host([hidden]) {\n display: none !important;\n}\n[hidden] {\n display: none !important;\n}\nsvg {\n flex: none;\n width: var(--office-icon-size);\n height: var(--office-icon-size);\n fill: none;\n stroke: currentColor;\n stroke-width: var(--office-icon-stroke);\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n.header,\n.toast,\n.overflow {\n pointer-events: auto;\n}\n.header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 var(--office-space-1);\n color: var(--office-muted-foreground);\n font: 600 var(--office-font-size-xs)/1.4 var(--office-font);\n}\n.toast {\n box-sizing: border-box;\n display: flex;\n align-items: flex-start;\n gap: var(--office-space-2);\n padding: var(--office-space-2) var(--office-space-2-5);\n margin-top: var(--office-space-2);\n border: var(--office-border-width) solid var(--office-border);\n border-radius: var(--office-radius-md);\n background: var(--office-popover);\n color: var(--office-foreground);\n box-shadow: var(--office-shadow-lg);\n font: var(--office-font-size-sm)/1.4 var(--office-font);\n}\n.toast svg {\n width: var(--office-icon-size-md);\n height: var(--office-icon-size-md);\n margin-top: var(--office-space-px);\n}\n.toast[data-severity='warning'] svg {\n color: var(--office-warning);\n}\n.toast[data-severity='info'] svg {\n color: var(--office-info);\n}\n.message {\n flex: 1;\n min-width: 0;\n margin: 0;\n overflow-wrap: anywhere;\n}\n.overflow {\n margin: var(--office-space-2) 0 0;\n text-align: center;\n color: var(--office-muted-foreground);\n font: var(--office-font-size-xs) var(--office-font);\n}\nbutton {\n box-sizing: border-box;\n flex: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--office-control-height);\n min-height: var(--office-control-height);\n padding: var(--office-space-0) var(--office-space-1);\n border: 0;\n border-radius: var(--office-radius);\n background: transparent;\n color: var(--office-muted-foreground);\n font: inherit;\n cursor: pointer;\n touch-action: manipulation;\n}\nbutton:hover {\n background: var(--office-surface);\n color: var(--office-foreground);\n}\n.dismiss-all {\n font-weight: 500;\n text-decoration: underline;\n text-underline-offset: var(--office-space-0);\n}\nbutton:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: calc(var(--office-focus-offset) / 2);\n}\n@media (pointer: coarse) {\n button {\n min-width: var(--office-target-size-touch);\n min-height: var(--office-target-size-touch);\n }\n}\n@media (forced-colors: active) {\n .toast {\n border-color: CanvasText;\n background: Canvas;\n color: CanvasText;\n }\n .toast svg,\n button {\n color: ButtonText;\n }\n button:hover {\n background: Highlight;\n color: HighlightText;\n }\n button:focus-visible {\n outline-color: Highlight;\n }\n}\n";
|
|
79
79
|
|
|
80
80
|
// src/notices/toasts.ts
|
|
@@ -142,7 +142,7 @@ var OfficeUiToasts = class extends OfficeElement {
|
|
|
142
142
|
};
|
|
143
143
|
var defineToasts = definer("office-ui-toasts", () => OfficeUiToasts);
|
|
144
144
|
|
|
145
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
145
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/notices/paste-options.css?raw
|
|
146
146
|
var paste_options_default = ":host {\n position: fixed;\n z-index: 1100;\n display: block;\n}\n:host([hidden]) {\n display: none !important;\n}\n.toolbar {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: var(--office-space-0);\n padding: var(--office-space-1);\n border: var(--office-border-width) solid var(--office-border);\n border-radius: var(--office-radius);\n background: var(--office-popover);\n box-shadow: var(--office-shadow-lg);\n font: var(--office-font-size-xs)/1.2 var(--office-font);\n}\nbutton {\n box-sizing: border-box;\n min-height: var(--office-control-height);\n padding: var(--office-space-1) var(--office-space-2);\n border: 0;\n border-radius: var(--office-radius);\n background: transparent;\n color: var(--office-foreground);\n font: inherit;\n white-space: nowrap;\n cursor: pointer;\n touch-action: manipulation;\n}\nbutton:hover {\n background: var(--office-surface);\n}\nbutton:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: calc(var(--office-focus-offset) / 2);\n}\n@media (pointer: coarse) {\n button {\n min-height: var(--office-target-size-touch);\n min-width: var(--office-target-size-touch);\n }\n}\n@media (forced-colors: active) {\n .toolbar {\n border-color: CanvasText;\n background: Canvas;\n }\n button {\n color: ButtonText;\n }\n button:hover {\n background: Highlight;\n color: HighlightText;\n }\n button:focus-visible {\n outline-color: Highlight;\n }\n}\n";
|
|
147
147
|
|
|
148
148
|
// src/notices/paste-options.ts
|
|
@@ -229,7 +229,7 @@ var OfficeUiPasteOptions = class extends OfficeElement {
|
|
|
229
229
|
};
|
|
230
230
|
var definePasteOptions = definer("office-ui-paste-options", () => OfficeUiPasteOptions);
|
|
231
231
|
|
|
232
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
232
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/notices/read-only-banner.css?raw
|
|
233
233
|
var read_only_banner_default = ":host {\n display: block;\n flex: none;\n}\n:host([hidden]) {\n display: none !important;\n}\n[hidden] {\n display: none !important;\n}\nsvg {\n flex: none;\n width: var(--office-icon-size-md);\n height: var(--office-icon-size-md);\n fill: none;\n stroke: currentColor;\n stroke-width: var(--office-icon-stroke);\n stroke-linecap: round;\n stroke-linejoin: round;\n color: var(--office-notice-accent);\n}\n.banner {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: var(--office-space-3);\n padding: var(--office-space-1-5) var(--office-space-4);\n border-bottom: var(--office-border-width) solid var(--office-notice-border);\n background: var(--office-notice-background);\n color: var(--office-notice-foreground);\n font: var(--office-font-size-sm)/1.4 var(--office-font);\n}\n.text {\n flex: 1 1 auto;\n min-width: 0;\n margin: 0;\n}\n.form {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--office-space-2);\n}\n.sr-only {\n position: absolute;\n width: var(--office-space-px);\n height: var(--office-space-px);\n margin: calc(-1 * var(--office-space-px));\n padding: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\nbutton,\ninput {\n font: inherit;\n}\nbutton {\n box-sizing: border-box;\n flex: none;\n min-height: var(--office-control-height);\n padding: var(--office-space-1) var(--office-space-3);\n border: var(--office-border-width) solid transparent;\n border-radius: var(--office-radius);\n background: transparent;\n color: inherit;\n font-weight: 500;\n cursor: pointer;\n touch-action: manipulation;\n}\nbutton.primary {\n border-color: color-mix(in srgb, var(--office-notice-accent) 50%, transparent);\n}\nbutton:hover {\n background: color-mix(in srgb, var(--office-notice-accent) 15%, transparent);\n}\nbutton:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\nbutton:focus-visible,\ninput:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: calc(var(--office-focus-offset) / 2);\n}\ninput {\n box-sizing: border-box;\n min-height: var(--office-control-height);\n padding: var(--office-space-1) var(--office-space-2);\n border: var(--office-border-width) solid\n color-mix(in srgb, var(--office-notice-accent) 40%, transparent);\n border-radius: var(--office-radius);\n background: var(--office-background);\n color: var(--office-foreground);\n}\n.error {\n flex: none;\n color: var(--office-danger);\n}\n@media (pointer: coarse) {\n button,\n input {\n min-height: var(--office-target-size-touch);\n min-width: var(--office-target-size-touch);\n }\n}\n@media (forced-colors: active) {\n .banner {\n border-bottom-color: CanvasText;\n background: Canvas;\n color: CanvasText;\n }\n svg,\n .error {\n color: CanvasText;\n }\n button,\n input {\n border-color: ButtonText;\n color: ButtonText;\n background: ButtonFace;\n }\n button:focus-visible,\n input:focus-visible {\n outline-color: Highlight;\n }\n}\n";
|
|
234
234
|
|
|
235
235
|
// src/notices/read-only-banner.ts
|
|
@@ -345,7 +345,7 @@ var defineReadOnlyBanner = definer(
|
|
|
345
345
|
() => OfficeUiReadOnlyBanner
|
|
346
346
|
);
|
|
347
347
|
|
|
348
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
348
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/form/radio.css?raw
|
|
349
349
|
var radio_default = "/* Tokens: --office-checkbox-size, --office-radio-dot-size and their -touch variants. */\n:host {\n display: inline-grid;\n box-sizing: border-box;\n width: var(--office-checkbox-size);\n height: var(--office-checkbox-size);\n flex: none;\n place-items: center;\n border: var(--office-border-width) solid var(--office-checkbox-border);\n border-radius: 50%;\n background: var(--office-checkbox-background);\n cursor: pointer;\n vertical-align: middle;\n}\n:host([checked]) {\n border-color: var(--office-checkbox-accent);\n}\n:host(:focus-visible) {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: var(--office-focus-offset);\n}\n:host([disabled]) {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.dot {\n display: none;\n width: var(--office-radio-dot-size);\n height: var(--office-radio-dot-size);\n border-radius: 50%;\n background: var(--office-checkbox-accent);\n}\n:host([checked]) .dot {\n display: block;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n :host {\n width: var(--office-checkbox-size-touch);\n height: var(--office-checkbox-size-touch);\n }\n .dot {\n width: var(--office-radio-dot-size-touch);\n height: var(--office-radio-dot-size-touch);\n }\n}\n@media (forced-colors: active) {\n :host {\n border-color: CanvasText;\n background: Canvas;\n forced-color-adjust: auto;\n }\n :host([checked]) {\n border-color: Highlight;\n }\n .dot {\n background: Highlight;\n }\n :host([disabled]) {\n border-color: GrayText;\n }\n :host([disabled]) .dot {\n background: GrayText;\n }\n :host(:focus-visible) {\n outline-color: Highlight;\n }\n}\n";
|
|
350
350
|
|
|
351
351
|
// src/form/radio.ts
|
|
@@ -560,7 +560,7 @@ var OfficeUiCheckable = class extends OfficeElement {
|
|
|
560
560
|
}
|
|
561
561
|
};
|
|
562
562
|
|
|
563
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
563
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/form/checkbox.css?raw
|
|
564
564
|
var checkbox_default = ":host {\n display: inline-grid;\n box-sizing: border-box;\n width: var(--office-checkbox-size);\n height: var(--office-checkbox-size);\n flex: none;\n place-items: center;\n border: var(--office-border-width) solid var(--office-checkbox-border);\n border-radius: var(--office-checkbox-radius);\n background: var(--office-checkbox-background);\n color: var(--office-checkbox-accent-foreground);\n cursor: pointer;\n vertical-align: middle;\n}\n:host([checked]) {\n border-color: var(--office-checkbox-accent);\n background: var(--office-checkbox-accent);\n}\n:host(:focus-visible) {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: var(--office-focus-offset);\n}\n:host([disabled]) {\n opacity: 0.5;\n cursor: not-allowed;\n}\nsvg {\n display: none;\n width: var(--office-icon-size-sm);\n height: var(--office-icon-size-sm);\n}\n:host([checked]) svg {\n display: block;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n :host {\n width: var(--office-checkbox-size-touch);\n height: var(--office-checkbox-size-touch);\n }\n svg {\n width: var(--office-icon-size-md);\n height: var(--office-icon-size-md);\n }\n}\n@media (forced-colors: active) {\n :host {\n border-color: CanvasText;\n background: Canvas;\n color: CanvasText;\n forced-color-adjust: auto;\n }\n :host([checked]) {\n border-color: Highlight;\n background: Highlight;\n color: HighlightText;\n }\n}\n";
|
|
565
565
|
|
|
566
566
|
// src/form/checkbox.ts
|
|
@@ -573,7 +573,7 @@ var OfficeUiCheckbox = class extends OfficeUiCheckable {
|
|
|
573
573
|
};
|
|
574
574
|
var defineCheckbox = definer("office-ui-checkbox", () => OfficeUiCheckbox);
|
|
575
575
|
|
|
576
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
576
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/ribbon-toggle.css?raw
|
|
577
577
|
var ribbon_toggle_default = ":host {\n display: block;\n}\nlabel {\n display: flex;\n align-items: center;\n gap: var(--office-space-1);\n min-height: var(--office-ribbon-row-height);\n padding: 0 var(--office-space-1);\n color: var(--office-foreground);\n font: inherit;\n font-size: var(--office-font-size-sm);\n white-space: nowrap;\n cursor: pointer;\n}\n:host([disabled]) label {\n color: var(--office-muted-foreground);\n cursor: not-allowed;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n label {\n min-height: var(--office-target-size-touch);\n font-size: var(--office-font-size-sm);\n }\n}\n";
|
|
578
578
|
|
|
579
579
|
// src/ribbon/ribbon-toggle.ts
|
|
@@ -639,7 +639,7 @@ var defineRibbonToggle = definer("office-ui-ribbon-toggle", () => OfficeUiRibbon
|
|
|
639
639
|
defineCheckbox
|
|
640
640
|
]);
|
|
641
641
|
|
|
642
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
642
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/form/search-field.css?raw
|
|
643
643
|
var search_field_default = "/* Tokens: --office-field-*. */\n:host {\n display: flex;\n align-items: center;\n gap: var(--office-space-2);\n box-sizing: border-box;\n width: 100%;\n height: var(--office-field-height-lg);\n padding: 0 var(--office-space-3);\n border: var(--office-border-width) solid var(--office-field-border);\n border-radius: var(--office-field-radius);\n background: var(--office-field-background);\n color: var(--office-field-placeholder);\n font: inherit;\n}\n:host(:focus-within) {\n border-color: var(--office-field-border-focus);\n}\n:host([variant='titlebar']) {\n height: var(--office-field-height);\n gap: var(--office-space-1-5);\n padding-inline: var(--office-space-3-5);\n border-color: var(--office-border);\n border-radius: var(--office-radius-md);\n background: var(--office-background);\n}\n:host([variant='titlebar']:focus-within) {\n border-color: var(--office-field-border-focus);\n color: var(--office-foreground);\n}\n:host([disabled]) {\n opacity: 0.5;\n cursor: not-allowed;\n}\nsvg {\n width: var(--office-icon-size-md);\n height: var(--office-icon-size-md);\n flex: none;\n}\n:host([variant='titlebar']) svg {\n width: var(--office-icon-size);\n height: var(--office-icon-size);\n}\ninput {\n min-width: 0;\n width: 100%;\n height: 100%;\n flex: 1;\n padding: 0;\n border: 0;\n outline: 0;\n background: transparent;\n color: var(--office-field-foreground);\n font: inherit;\n font-size: var(--office-font-size);\n}\n:host([variant='titlebar']) input {\n font-size: var(--office-font-size-xs);\n color: var(--office-foreground);\n}\ninput::placeholder {\n color: var(--office-field-placeholder);\n opacity: 0.8;\n}\ninput::-webkit-search-cancel-button {\n display: none;\n}\n\n@media (forced-colors: active) {\n :host {\n border-color: CanvasText;\n background: Canvas;\n color: CanvasText;\n }\n :host(:focus-within) {\n outline: var(--office-focus-width) solid Highlight;\n outline-offset: var(--office-focus-offset);\n }\n input {\n color: CanvasText;\n }\n}\n";
|
|
644
644
|
|
|
645
645
|
// src/form/search-field.ts
|
|
@@ -714,7 +714,7 @@ var OfficeUiSearch = class extends OfficeElement {
|
|
|
714
714
|
};
|
|
715
715
|
var defineSearchField = definer("office-ui-search", () => OfficeUiSearch);
|
|
716
716
|
|
|
717
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
717
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/backstage.css?raw
|
|
718
718
|
var backstage_default = ":host {\n position: absolute;\n inset: 0;\n z-index: 30;\n display: none;\n min-width: 0;\n background: var(--office-background);\n color: var(--office-foreground);\n font-family: var(--office-font);\n}\n:host([open]) {\n display: block;\n}\n.frame {\n display: flex;\n height: 100%;\n min-width: 0;\n}\nnav {\n display: flex;\n flex: 0 0 var(--office-backstage-nav-width);\n flex-direction: column;\n padding: var(--office-space-3) 0;\n overflow: auto;\n background: var(--office-backstage-nav-background);\n color: var(--office-backstage-nav-foreground);\n}\nnav button {\n border: 0;\n border-radius: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: start;\n cursor: pointer;\n}\n.back {\n width: var(--office-backstage-back-size);\n min-height: var(--office-backstage-back-size);\n margin: 0 0 var(--office-space-3) var(--office-space-4);\n padding: 0;\n border: calc(var(--office-border-width-thick) * 0.75) solid currentColor;\n border-radius: 50%;\n font-size: var(--office-font-size-xl);\n text-align: center;\n}\n.item {\n min-height: var(--office-backstage-item-height);\n padding: var(--office-space-1-5) var(--office-space-6);\n font-size: var(--office-font-size-md);\n}\n.item:hover:enabled,\n.item[aria-current='page'] {\n background: var(--office-backstage-item-hover);\n}\n.item:disabled {\n opacity: 0.55;\n cursor: default;\n}\nnav button:focus-visible {\n outline: var(--office-focus-width) solid currentColor;\n outline-offset: calc(-1 * var(--office-focus-width));\n}\n.items {\n display: flex;\n flex-direction: column;\n}\n.footer {\n display: flex;\n flex-direction: column;\n margin-top: auto;\n padding-top: var(--office-space-4);\n}\n.body {\n flex: 1;\n min-width: 0;\n overflow: auto;\n padding: var(--office-backstage-padding);\n}\n@media (max-width: 760px) {\n .frame {\n flex-direction: column;\n }\n nav {\n flex: none;\n flex-direction: row;\n flex-wrap: wrap;\n padding: var(--office-space-1-5);\n }\n .back {\n margin: var(--office-space-1);\n }\n .item {\n min-height: var(--office-target-size-touch);\n padding: var(--office-space-1-5) var(--office-space-3);\n }\n .items,\n .footer {\n flex-direction: row;\n flex-wrap: wrap;\n margin-top: 0;\n padding-top: 0;\n }\n .body {\n padding: var(--office-space-4);\n }\n}\n@media (forced-colors: active) {\n nav {\n border-inline-end: var(--office-border-width) solid CanvasText;\n }\n .item[aria-current='page'] {\n outline: var(--office-focus-width) solid Highlight;\n }\n}\n";
|
|
719
719
|
|
|
720
720
|
// src/chrome/backstage.ts
|
|
@@ -855,7 +855,7 @@ var OfficeUiBackstage = class extends OfficeElement {
|
|
|
855
855
|
};
|
|
856
856
|
var defineBackstage = definer("office-ui-backstage", () => OfficeUiBackstage);
|
|
857
857
|
|
|
858
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
858
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/find-bar.css?raw
|
|
859
859
|
var find_bar_default = ":host {\n display: flex;\n align-items: center;\n gap: var(--office-space-2);\n min-height: var(--office-find-bar-height);\n padding: var(--office-space-1) var(--office-space-2) var(--office-space-1) var(--office-space-3);\n border-bottom: var(--office-border-width) solid var(--office-border);\n background: var(--office-surface);\n color: var(--office-foreground);\n font: var(--office-font-size-sm) var(--office-font);\n}\n:host(:not([open])) {\n display: none;\n}\n[role='search'] {\n display: flex;\n flex: 1;\n align-items: center;\n gap: var(--office-space-1);\n min-width: 0;\n max-width: var(--office-find-max-width);\n}\nlabel {\n display: flex;\n flex: 1;\n align-items: center;\n gap: var(--office-space-1-5);\n min-width: 0;\n}\ninput {\n flex: 1;\n min-width: 0;\n min-height: var(--office-input-height);\n padding: var(--office-space-0) var(--office-space-1-5);\n font: inherit;\n color: inherit;\n border: var(--office-border-width) solid var(--office-border);\n border-radius: var(--office-radius-sm);\n background: var(--office-background);\n}\nbutton {\n min-height: var(--office-input-height);\n padding: var(--office-space-0) var(--office-space-2);\n font: inherit;\n color: inherit;\n cursor: pointer;\n border: var(--office-border-width) solid var(--office-border);\n border-radius: var(--office-radius-sm);\n background: var(--office-background);\n}\nbutton:disabled {\n opacity: 0.5;\n cursor: default;\n}\n.status {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n color: var(--office-muted-foreground);\n}\n.close {\n margin-inline-start: auto;\n width: var(--office-target-size);\n padding: 0;\n border-color: transparent;\n background: transparent;\n font-size: var(--office-font-size-xl);\n line-height: 1;\n}\ninput:focus-visible,\nbutton:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: calc(var(--office-focus-offset) / 2);\n}\n@media (max-width: 760px) {\n :host {\n flex-wrap: wrap;\n }\n [role='search'] {\n flex-wrap: wrap;\n }\n}\n";
|
|
860
860
|
|
|
861
861
|
// src/chrome/find-bar.ts
|
|
@@ -992,7 +992,7 @@ var OfficeUiFindBar = class extends OfficeElement {
|
|
|
992
992
|
};
|
|
993
993
|
var defineFindBar = definer("office-ui-find-bar", () => OfficeUiFindBar);
|
|
994
994
|
|
|
995
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
995
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/print-preview.css?raw
|
|
996
996
|
var print_preview_default = ":host {\n display: block;\n max-width: var(--office-print-preview-width);\n font: var(--office-font-size-sm) var(--office-font);\n color: var(--office-foreground);\n}\n.sheet {\n padding: var(--office-space-3);\n border: var(--office-border-width) solid var(--office-border);\n background: var(--office-paper);\n box-shadow: var(--office-shadow-sm);\n}\n.sheet > * {\n display: block;\n width: 100%;\n height: auto;\n}\n.empty {\n color: var(--office-muted-foreground);\n}\n.nav {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--office-space-2);\n margin-top: var(--office-space-2);\n}\n.nav[hidden] {\n display: none;\n}\nbutton {\n min-width: var(--office-target-size);\n min-height: var(--office-target-size);\n font: inherit;\n color: inherit;\n border: var(--office-border-width) solid var(--office-border);\n border-radius: var(--office-radius-sm);\n background: var(--office-background);\n cursor: pointer;\n}\nbutton:disabled {\n opacity: 0.5;\n cursor: default;\n}\nbutton:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: calc(var(--office-focus-offset) / 2);\n}\n";
|
|
997
997
|
|
|
998
998
|
// src/chrome/print-preview.ts
|
|
@@ -1082,7 +1082,7 @@ var OfficeUiPrintPreview = class extends OfficeElement {
|
|
|
1082
1082
|
};
|
|
1083
1083
|
var definePrintPreview = definer("office-ui-print-preview", () => OfficeUiPrintPreview);
|
|
1084
1084
|
|
|
1085
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
1085
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/ribbon-tabs.css?raw
|
|
1086
1086
|
var ribbon_tabs_default = ":host {\n display: block;\n min-width: 0;\n}\n.head {\n display: flex;\n align-items: stretch;\n min-width: 0;\n border-bottom: var(--office-border-width) solid var(--office-border);\n}\n.file {\n flex: none;\n min-height: var(--office-ribbon-tab-height);\n margin: 0 var(--office-space-1) 0 0;\n padding: var(--office-space-1-5) var(--office-space-4);\n border: 0;\n border-radius: 0;\n background: var(--office-accent);\n color: var(--office-accent-foreground);\n font: inherit;\n font-size: var(--office-font-size);\n cursor: pointer;\n}\n.file:hover {\n background: var(--office-accent-hover);\n}\n.file[hidden] {\n display: none;\n}\n[role='tablist'] {\n display: flex;\n flex: 0 1 auto;\n align-items: stretch;\n min-width: 0;\n overflow-x: auto;\n scrollbar-width: none;\n}\n[role='tab'] {\n position: relative;\n flex: none;\n min-height: var(--office-ribbon-tab-height);\n padding: var(--office-space-1-5) var(--office-space-3);\n border: 0;\n border-radius: 0;\n background: transparent;\n color: var(--office-muted-foreground);\n font: inherit;\n font-size: var(--office-font-size);\n cursor: pointer;\n}\n[role='tab']:hover {\n color: var(--office-foreground);\n background: var(--office-surface);\n}\n[role='tab'][aria-selected='true'] {\n color: var(--office-accent);\n}\n[role='tab'][aria-selected='true']::after {\n content: '';\n position: absolute;\n inset: auto 0 0;\n height: var(--office-tab-indicator-width);\n background: var(--office-accent);\n}\n[role='tab'][data-contextual],\n[role='tab'][data-contextual][aria-selected='true'] {\n color: var(--office-ribbon-contextual);\n}\n[role='tab'][data-contextual][aria-selected='true']::after {\n background: var(--office-ribbon-contextual);\n}\n.file:focus-visible,\n[role='tab']:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: calc(-1 * var(--office-focus-width));\n}\n::slotted([slot='search']) {\n align-self: center;\n}\n\n.collapse {\n flex: none;\n align-self: center;\n width: var(--office-target-size);\n height: var(--office-target-size);\n margin-inline: auto var(--office-space-1);\n padding: 0;\n border: 0;\n border-radius: var(--office-radius-sm);\n background: none;\n color: var(--office-muted-foreground);\n cursor: pointer;\n}\n.collapse[hidden] {\n display: none;\n}\n.collapse:hover {\n background: var(--office-surface);\n}\n.collapse:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n}\n.collapse .glyph {\n width: var(--office-icon-size);\n height: var(--office-icon-size);\n fill: none;\n stroke: currentColor;\n stroke-width: 1.5;\n transform: rotate(90deg);\n}\n.collapse[aria-pressed='true'] .glyph {\n transform: rotate(-90deg);\n}\n:host([collapsed][peek]) {\n position: relative;\n}\n:host([collapsed][peek]) ::slotted([data-ribbon-tab]:not([hidden])) {\n position: absolute;\n inset: 100% 0 auto;\n z-index: 60;\n border-bottom: var(--office-border-width) solid var(--office-border);\n background: var(--office-background);\n box-shadow: var(--office-shadow);\n}\n\n@media (max-width: 760px), (pointer: coarse) {\n .file,\n [role='tab'] {\n min-height: var(--office-target-size-touch);\n }\n .file {\n min-width: var(--office-ribbon-file-min-width);\n }\n}\n@media (forced-colors: active) {\n .file {\n border: var(--office-border-width) solid ButtonText;\n }\n [role='tab'][aria-selected='true']::after {\n background: Highlight;\n }\n}\n";
|
|
1087
1087
|
|
|
1088
1088
|
// src/ribbon/ribbon-tabs.ts
|
|
@@ -1324,7 +1324,7 @@ var OfficeUiRibbon = class extends OfficeElement {
|
|
|
1324
1324
|
};
|
|
1325
1325
|
var defineRibbon = definer("office-ui-ribbon", () => OfficeUiRibbon);
|
|
1326
1326
|
|
|
1327
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
1327
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/button.css?raw
|
|
1328
1328
|
var button_default = ":host {\n display: inline-flex;\n vertical-align: middle;\n}\nbutton {\n box-sizing: border-box;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--office-space-1-5);\n min-width: var(--office-target-size);\n min-height: var(--office-target-size);\n padding: 0 var(--office-space-2);\n border: var(--office-border-width) solid transparent;\n border-radius: var(--office-radius);\n background: transparent;\n color: var(--office-foreground);\n font: inherit;\n font-size: var(--office-font-size-sm);\n cursor: pointer;\n white-space: nowrap;\n}\n:host([variant='stacked']) button {\n flex-direction: column;\n padding: var(--office-space-1) var(--office-space-2);\n}\nbutton:hover:not(:disabled) {\n background: var(--office-surface);\n}\nbutton:active:not(:disabled) {\n background: var(--office-selected);\n}\nbutton:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: calc(var(--office-focus-offset) / 2);\n}\nbutton[aria-pressed='true'],\nbutton[aria-expanded='true'] {\n border-color: var(--office-accent);\n background: var(--office-surface);\n}\n:host([active]) button {\n background: var(--office-command-active);\n color: var(--office-accent);\n}\nbutton:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\nsvg {\n width: var(--office-icon-size-ml);\n height: var(--office-icon-size-ml);\n flex: none;\n color: var(--office-command-icon-color);\n fill: none;\n stroke: currentColor;\n stroke-width: var(--office-icon-stroke);\n stroke-linecap: round;\n stroke-linejoin: round;\n}\nsvg.glyph:not([data-painted]) {\n display: none;\n}\n.label[hidden],\n.caret[hidden],\n.badge[hidden] {\n display: none;\n}\n/* Office trails a menu chevron after the last line of the label. */\n.caret {\n display: inline-block;\n width: var(--office-icon-size-xs);\n height: var(--office-icon-size-xs);\n margin-inline-start: var(--office-space-0);\n vertical-align: middle;\n color: var(--office-muted-foreground);\n}\n.badge {\n position: absolute;\n top: 0;\n inset-inline-end: 0;\n padding: 0 var(--office-space-0);\n border-radius: var(--office-radius-full);\n background: var(--office-accent);\n color: var(--office-accent-foreground);\n font-size: var(--office-font-size-3xs);\n}\n\n/* Large ribbon command: a big glyph above a two-line label. */\n:host([size='large']) button {\n flex-direction: column;\n justify-content: flex-start;\n gap: var(--office-space-0);\n min-width: var(--office-command-large-min-width);\n max-width: var(--office-command-large-max-width);\n height: var(--office-command-large-height);\n padding: var(--office-space-0) var(--office-space-1);\n border: 0;\n white-space: normal;\n text-align: center;\n line-height: var(--office-line-height-tight);\n}\n:host([size='large']) svg.glyph {\n width: var(--office-command-large-icon);\n height: var(--office-command-large-icon);\n}\n\n/* Small ribbon command: icon and label in one row. */\n:host([size='small']) button {\n justify-content: flex-start;\n min-width: 0;\n height: var(--office-control-height);\n min-height: var(--office-control-height);\n padding: 0 var(--office-space-1-5);\n border: 0;\n text-align: start;\n}\n:host([size='small']) svg.glyph {\n width: var(--office-command-small-icon);\n height: var(--office-command-small-icon);\n}\n\n/* Tall, label-less tool tiles (pens, erasers). */\n:host([icon-only][tall]) button {\n min-width: var(--office-command-tall-min-width);\n height: var(--office-command-tall-height);\n padding: var(--office-space-1);\n}\n:host([icon-only][tall]) svg.glyph {\n width: var(--office-command-tall-icon);\n height: var(--office-command-tall-icon);\n}\n:host([icon-only][tall][active]) button {\n box-shadow: inset 0 0 0 var(--office-border-width) var(--office-accent);\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n :host([size='small']) button {\n min-height: var(--office-target-size-touch);\n }\n :host([icon-only]) button {\n min-width: var(--office-target-size-touch);\n }\n}\n@media (forced-colors: active) {\n button {\n border-color: ButtonText;\n color: ButtonText;\n background: ButtonFace;\n }\n svg {\n color: ButtonText;\n }\n button:disabled {\n color: GrayText;\n border-color: GrayText;\n }\n button[aria-pressed='true'],\n button[aria-expanded='true'],\n :host([active]) button {\n background: Highlight;\n color: HighlightText;\n }\n}\n";
|
|
1329
1329
|
|
|
1330
1330
|
// src/ribbon/button.ts
|
|
@@ -1403,7 +1403,7 @@ var OfficeUiButton = class extends OfficeElement {
|
|
|
1403
1403
|
};
|
|
1404
1404
|
var defineButton = definer("office-ui-button", () => OfficeUiButton);
|
|
1405
1405
|
|
|
1406
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
1406
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/ribbon-group.css?raw
|
|
1407
1407
|
var ribbon_group_default = ":host {\n display: inline-flex;\n flex: none;\n align-self: stretch;\n}\n.group {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n min-height: var(--office-ribbon-group-height);\n padding: var(--office-ribbon-group-padding);\n}\n/* Office draws a hairline between groups; a product may stop it short of the top and bottom. */\n.group::after {\n content: '';\n position: absolute;\n top: var(--office-ribbon-separator-inset);\n bottom: var(--office-ribbon-separator-inset);\n inset-inline-end: 0;\n width: var(--office-border-width);\n background: var(--office-ribbon-separator);\n}\n:host(:last-child) .group::after {\n content: none;\n}\n.row {\n display: flex;\n align-items: flex-start;\n gap: var(--office-space-1);\n flex: 1;\n}\n/* One-line groups centre their commands on the whole group box. */\n:host([data-compact-row]) .row {\n align-items: center;\n}\n/* Several small drop-down galleries stack in columns of three. */\n:host([data-stack]) .row {\n flex-direction: column;\n align-items: stretch;\n align-content: flex-start;\n flex-wrap: wrap;\n max-height: var(--office-ribbon-stack-max-height);\n gap: var(--office-space-0);\n}\n::slotted(*) {\n flex-shrink: 0;\n}\n.foot {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--office-ribbon-caption-padding);\n}\n.caption {\n color: var(--office-muted-foreground);\n font-size: var(--office-ribbon-caption-size);\n line-height: var(--office-ribbon-caption-line-height);\n text-align: center;\n white-space: nowrap;\n}\n.launcher {\n position: absolute;\n inset-inline-end: var(--office-launcher-inset-end);\n bottom: var(--office-launcher-inset-bottom);\n display: inline-grid;\n place-items: center;\n width: var(--office-launcher-width);\n height: var(--office-launcher-height);\n padding: 0;\n border: 0;\n border-radius: var(--office-radius-xs);\n background: transparent;\n color: var(--office-muted-foreground);\n cursor: pointer;\n}\n.launcher:hover:not(:disabled) {\n background: var(--office-surface);\n color: var(--office-foreground);\n}\n.launcher:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n}\n.launcher:disabled {\n opacity: 0.45;\n cursor: not-allowed;\n}\n.launcher[hidden] {\n display: none;\n}\n.launcher svg {\n width: var(--office-icon-size-xs);\n height: var(--office-icon-size-xs);\n fill: none;\n stroke: currentColor;\n stroke-width: var(--office-icon-stroke);\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n/* Collapsed (narrow window): the group is one button; its commands open in a popup. */\n.face {\n display: none;\n}\n:host([data-collapsed]) .face {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n gap: var(--office-space-0);\n min-width: var(--office-collapsed-group-min-width);\n height: var(--office-command-large-height);\n padding: var(--office-space-0) var(--office-space-1-5);\n border: 0;\n border-radius: var(--office-radius);\n background: transparent;\n color: var(--office-foreground);\n font: inherit;\n font-size: var(--office-font-size-sm);\n cursor: pointer;\n}\n:host([data-collapsed]) .face:hover,\n:host([data-open]) .face {\n background: var(--office-selected);\n}\n.face:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: var(--office-focus-offset);\n}\n.face svg {\n width: var(--office-command-large-icon);\n height: var(--office-command-large-icon);\n fill: none;\n stroke: currentColor;\n stroke-width: var(--office-icon-stroke);\n stroke-linecap: round;\n stroke-linejoin: round;\n color: var(--office-command-icon-color);\n}\n.face svg.chev {\n width: var(--office-icon-size-xs);\n height: var(--office-icon-size-xs);\n color: currentColor;\n}\n:host([data-collapsed]) .foot,\n:host([data-collapsed]) .row {\n display: none;\n}\n:host([data-collapsed][data-open]) .row {\n display: flex;\n flex-wrap: wrap;\n position: fixed;\n top: var(--office-ribbon-collapse-y);\n left: var(--office-ribbon-collapse-x);\n z-index: var(--office-z-popover);\n box-sizing: border-box;\n max-width: calc(100vw - 2 * var(--office-space-2));\n padding: var(--office-space-2);\n background: var(--office-popover);\n color: var(--office-popover-foreground);\n border: var(--office-border-width) solid var(--office-border);\n border-radius: var(--office-radius-md);\n box-shadow: var(--office-shadow);\n}\n\n@media (forced-colors: active) {\n .group::after {\n background: CanvasText;\n }\n .caption,\n .launcher {\n color: CanvasText;\n }\n :host([data-collapsed][data-open]) .row {\n border-color: CanvasText;\n }\n}\n";
|
|
1408
1408
|
|
|
1409
1409
|
// src/ribbon/ribbon-group.ts
|
|
@@ -1519,7 +1519,7 @@ var OfficeUiRibbonGroup = class extends OfficeElement {
|
|
|
1519
1519
|
};
|
|
1520
1520
|
var defineRibbonGroup = definer("office-ui-ribbon-group", () => OfficeUiRibbonGroup);
|
|
1521
1521
|
|
|
1522
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
1522
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/ribbon-section.css?raw
|
|
1523
1523
|
var ribbon_section_default = ":host {\n display: inline-flex;\n align-items: stretch;\n}\n::slotted(*) {\n flex: none;\n}\n";
|
|
1524
1524
|
|
|
1525
1525
|
// src/ribbon/ribbon-section.ts
|
|
@@ -1627,7 +1627,7 @@ var defineRibbonSection = definer(
|
|
|
1627
1627
|
[defineRibbonGroup, defineButton]
|
|
1628
1628
|
);
|
|
1629
1629
|
|
|
1630
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
1630
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/gallery.css?raw
|
|
1631
1631
|
var gallery_default = "[data-office-gallery] {\n display: inline-flex;\n position: relative;\n flex: none;\n color: var(--office-foreground);\n}\n[data-office-gallery] .gallery-view {\n display: contents;\n}\n[data-office-gallery] button {\n box-sizing: border-box;\n font: inherit;\n color: inherit;\n cursor: pointer;\n border: var(--office-border-width) solid var(--office-border);\n border-radius: var(--office-radius);\n background: var(--office-background);\n}\n[data-office-gallery] button:hover:not(:disabled) {\n background: var(--office-selected);\n}\n[data-office-gallery] button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n[data-office-gallery] button:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: var(--office-focus-offset);\n}\n[data-office-gallery] .trigger {\n display: inline-flex;\n align-items: center;\n gap: var(--office-space-1-5);\n min-height: var(--office-gallery-trigger-height);\n padding: 0 var(--office-space-1-5);\n font-size: var(--office-font-size-sm);\n white-space: nowrap;\n}\n[data-office-gallery]:not([mode='inline']) .trigger {\n border-color: transparent;\n background: transparent;\n}\n[data-office-gallery] .trigger svg {\n width: var(--office-icon-size-md);\n height: var(--office-icon-size-md);\n fill: none;\n stroke: currentColor;\n stroke-width: var(--office-icon-stroke);\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n[data-office-gallery][mode='inline'] .trigger,\n[data-office-gallery][chevron-only] .trigger {\n align-self: stretch;\n padding: 0 var(--office-space-1);\n}\n[data-office-gallery] .strip {\n display: flex;\n gap: var(--office-space-0);\n padding: var(--office-space-0);\n align-items: center;\n}\n[data-office-gallery] .tile {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n padding: var(--office-space-0);\n}\n[data-office-gallery] .tile[aria-pressed='true'] {\n border: var(--office-border-width-thick) solid var(--office-accent);\n background: color-mix(in srgb, var(--office-accent) 15%, var(--office-background));\n}\n[data-office-gallery] .tile svg {\n max-width: 100%;\n max-height: 100%;\n}\n[data-office-gallery][mode='inline'] .strip {\n gap: 0;\n border: var(--office-border-width) solid var(--office-border);\n border-inline-end: 0;\n border-radius: var(--office-radius-sm) 0 0 var(--office-radius-sm);\n background: var(--office-gallery-strip-background);\n}\n[data-office-gallery][mode='inline'] .trigger {\n border-radius: 0 var(--office-radius-sm) var(--office-radius-sm) 0;\n background: var(--office-gallery-strip-background);\n}\n[data-office-gallery] .trigger.command {\n border-color: transparent;\n background: transparent;\n justify-content: flex-start;\n}\n[data-office-gallery] .trigger.command:hover:not(:disabled) {\n border-color: var(--office-border);\n background: var(--office-selected);\n}\n[data-office-gallery] .trigger.command svg {\n color: var(--office-command-icon-color);\n}\n[data-office-gallery] .trigger.command-large {\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n gap: var(--office-space-0);\n min-width: var(--office-gallery-command-min-width);\n max-width: var(--office-gallery-command-max-width);\n height: var(--office-gallery-command-height);\n padding: var(--office-space-1);\n font-size: var(--office-font-size-2xs);\n line-height: var(--office-line-height-tight);\n white-space: normal;\n text-align: center;\n}\n[data-office-gallery] .trigger.command-large svg {\n width: var(--office-gallery-command-icon);\n height: var(--office-gallery-command-icon);\n}\n[data-office-gallery] .popup {\n box-sizing: border-box;\n position: fixed;\n z-index: var(--office-z-popover);\n max-width: calc(100vw - var(--office-space-4));\n max-height: var(--office-gallery-popup-max-height);\n overflow: auto;\n padding: var(--office-space-2);\n border: var(--office-border-width) solid var(--office-border);\n border-radius: var(--office-radius-md);\n background: var(--office-popover);\n color: var(--office-popover-foreground);\n box-shadow: var(--office-shadow-lg);\n}\n[data-office-gallery] .popup[hidden] {\n display: none;\n}\n[data-office-gallery] .grid {\n display: grid;\n gap: var(--office-space-1);\n width: max-content;\n max-width: 100%;\n}\n[data-office-gallery] .heading {\n margin: var(--office-space-1) 0 var(--office-space-1-5);\n font-size: var(--office-font-size-xs);\n font-weight: var(--office-font-weight-bold);\n}\n[data-office-gallery] .section + .section {\n margin-top: var(--office-space-2-5);\n}\n@media (pointer: coarse), (max-width: 1023px) {\n [data-office-gallery] .trigger,\n [data-office-gallery] .tile {\n min-height: var(--office-target-size-touch);\n min-width: var(--office-target-size-touch);\n }\n}\n@media (forced-colors: active) {\n [data-office-gallery] button,\n [data-office-gallery] .popup {\n color: ButtonText;\n background: Canvas;\n border-color: ButtonText;\n }\n [data-office-gallery] button:disabled {\n color: GrayText;\n opacity: 1;\n }\n [data-office-gallery] button:focus-visible,\n [data-office-gallery] .tile[aria-pressed='true'] {\n outline: var(--office-focus-width) solid Highlight;\n border-color: Highlight;\n }\n}\n";
|
|
1632
1632
|
|
|
1633
1633
|
// src/ribbon/gallery-styles.ts
|
|
@@ -1923,7 +1923,7 @@ var OfficeUiGallery = class extends OfficeElement {
|
|
|
1923
1923
|
};
|
|
1924
1924
|
var defineGallery = definer("office-ui-gallery", () => OfficeUiGallery);
|
|
1925
1925
|
|
|
1926
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
1926
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/ruler.css?raw
|
|
1927
1927
|
var ruler_default = ":host {\n display: block;\n box-sizing: border-box;\n background: var(--office-background);\n color: var(--office-muted-foreground);\n overflow: hidden;\n font-size: var(--office-font-size-3xs);\n font-family: var(--office-font);\n}\n:host(:not([orientation='vertical'])) {\n height: var(--office-ruler-size);\n border-bottom: var(--office-border-width) solid var(--office-border);\n}\n:host([orientation='vertical']) {\n width: var(--office-ruler-size);\n border-inline-end: var(--office-border-width) solid var(--office-border);\n}\ncanvas {\n display: block;\n width: 100%;\n height: 100%;\n}\n";
|
|
1928
1928
|
|
|
1929
1929
|
// src/chrome/ruler.ts
|
|
@@ -2084,7 +2084,7 @@ function clearOfficeProfile(storage = defaultStorage(), key = OFFICE_PROFILE_STO
|
|
|
2084
2084
|
}
|
|
2085
2085
|
}
|
|
2086
2086
|
|
|
2087
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
2087
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/account.css?raw
|
|
2088
2088
|
var account_default = ":host {\n display: block;\n font-family: var(--office-font);\n font-size: var(--office-font-size);\n}\nh2 {\n margin: 0 0 var(--office-space-3);\n font-size: var(--office-font-size-lg);\n font-weight: 600;\n}\n.who {\n display: flex;\n align-items: center;\n gap: var(--office-space-3);\n margin-bottom: var(--office-space-3);\n}\n.avatar {\n display: grid;\n place-items: center;\n width: var(--office-avatar-size);\n height: var(--office-avatar-size);\n border-radius: 50%;\n color: var(--office-accent-foreground);\n font-weight: var(--office-font-weight-bold);\n font-size: var(--office-font-size-xl);\n flex: none;\n}\n.name {\n font-size: var(--office-font-size-md);\n font-weight: 600;\n}\n.note {\n margin: var(--office-space-0) 0 0;\n color: var(--office-muted-foreground);\n font-size: var(--office-font-size-sm);\n}\nlabel {\n display: grid;\n gap: var(--office-space-1);\n max-width: var(--office-account-field-width);\n margin-bottom: var(--office-space-3);\n}\ninput {\n min-height: var(--office-field-height);\n box-sizing: border-box;\n padding: var(--office-space-0) var(--office-space-1-5);\n font: inherit;\n color: inherit;\n border: var(--office-border-width) solid var(--office-border);\n border-radius: var(--office-radius-sm);\n background: var(--office-background);\n}\n.swatches {\n display: flex;\n flex-wrap: wrap;\n gap: var(--office-space-1-5);\n margin: var(--office-space-1) 0 var(--office-space-3);\n}\n.swatches button {\n width: var(--office-target-size);\n height: var(--office-target-size);\n padding: 0;\n border: var(--office-border-width-thick) solid transparent;\n border-radius: 50%;\n cursor: pointer;\n}\n.swatches button[aria-checked='true'] {\n border-color: var(--office-foreground);\n box-shadow: inset 0 0 0 var(--office-border-width-thick) var(--office-background);\n}\n.swatches button:focus-visible,\ninput:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: calc(var(--office-focus-offset) / 2);\n}\n@media (forced-colors: active) {\n .swatches button {\n forced-color-adjust: none;\n }\n}\n";
|
|
2089
2089
|
|
|
2090
2090
|
// src/chrome/account.ts
|
|
@@ -2167,7 +2167,7 @@ var OfficeUiAccount = class extends OfficeElement {
|
|
|
2167
2167
|
};
|
|
2168
2168
|
var defineAccount = definer("office-ui-account", () => OfficeUiAccount);
|
|
2169
2169
|
|
|
2170
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
2170
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/form/switch.css?raw
|
|
2171
2171
|
var switch_default = "/* Switch metrics are tokens so a host (a title bar) can size it: --office-switch-width, -height,\n * -border-width, -knob-size, -knob-offset, -knob-travel, -track, -track-on, -thumb, -thumb-on. */\n:host {\n --_w: var(--office-switch-width);\n --_h: var(--office-switch-height);\n --_b: var(--office-switch-border-width);\n --_k: var(--office-switch-knob-size);\n --_o: var(--office-switch-knob-offset);\n display: inline-block;\n box-sizing: border-box;\n position: relative;\n width: var(--_w);\n height: var(--_h);\n flex: none;\n border: var(--_b) solid var(--office-switch-border);\n border-radius: var(--office-radius-full);\n background: var(--office-switch-track);\n cursor: pointer;\n vertical-align: middle;\n touch-action: manipulation;\n transition: background-color var(--office-duration);\n}\n.knob {\n display: block;\n position: absolute;\n top: calc((var(--_h) - 2 * var(--_b) - var(--_k)) / 2);\n left: var(--_o);\n width: var(--_k);\n height: var(--_k);\n border-radius: 50%;\n background: var(--office-switch-thumb);\n box-shadow: var(--office-shadow-sm);\n transition: transform var(--office-duration);\n}\n:host([checked]) {\n border-color: var(--office-switch-track-on);\n background: var(--office-switch-track-on);\n}\n:host([checked]) .knob {\n transform: translateX(\n var(--office-switch-knob-travel, calc(var(--_w) - var(--_k) - 2 * var(--_o) - 2 * var(--_b)))\n );\n background: var(--office-switch-thumb-on);\n}\n:host(:focus-visible) {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: var(--office-focus-offset);\n}\n:host([disabled]) {\n opacity: 0.5;\n cursor: not-allowed;\n}\nsvg {\n display: none;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n :host {\n --_w: var(--office-switch-width-touch);\n --_h: var(--office-switch-height-touch);\n --_k: var(--office-switch-knob-size-touch);\n }\n}\n@media (forced-colors: active) {\n :host {\n border-color: CanvasText;\n background: Canvas;\n forced-color-adjust: none;\n }\n .knob {\n background: CanvasText;\n }\n :host([checked]) {\n border-color: Highlight;\n background: Highlight;\n }\n :host([checked]) .knob {\n background: HighlightText;\n }\n}\n";
|
|
2172
2172
|
|
|
2173
2173
|
// src/form/switch.ts
|
|
@@ -2180,7 +2180,7 @@ var OfficeUiSwitch = class extends OfficeUiCheckable {
|
|
|
2180
2180
|
};
|
|
2181
2181
|
var defineSwitch = definer("office-ui-switch", () => OfficeUiSwitch);
|
|
2182
2182
|
|
|
2183
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
2183
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/dialog/dialog.css?raw
|
|
2184
2184
|
var dialog_default = ":host {\n display: none;\n position: fixed;\n inset: 0;\n z-index: 1000;\n align-items: center;\n justify-content: center;\n}\n:host([open]) {\n display: flex;\n}\n.backdrop {\n position: absolute;\n inset: 0;\n background: var(--office-overlay);\n}\n.box {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: var(--office-dialog-width);\n min-width: var(--office-dialog-min-width);\n max-width: var(--office-dialog-max-width);\n max-height: var(--office-dialog-max-height);\n background: var(--office-background);\n color: var(--office-foreground);\n border: var(--office-border-width) solid var(--office-border);\n border-radius: var(--office-radius-lg);\n font-family: var(--office-font);\n}\nheader {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--office-space-2);\n padding: var(--office-space-3) var(--office-space-4);\n border-bottom: var(--office-border-width) solid var(--office-border);\n}\nh2 {\n margin: 0;\n font-size: var(--office-font-size-lg);\n font-weight: 600;\n}\n.body {\n padding: var(--office-space-4);\n overflow: auto;\n font-size: var(--office-font-size);\n}\nfooter {\n display: flex;\n justify-content: flex-end;\n gap: var(--office-space-2);\n padding: var(--office-space-3) var(--office-space-4);\n border-top: var(--office-border-width) solid var(--office-border);\n}\nfooter[hidden] {\n display: none;\n}\n.close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--office-target-size);\n min-height: var(--office-target-size);\n border: 0;\n background: transparent;\n color: inherit;\n cursor: pointer;\n border-radius: var(--office-radius);\n}\n.close svg {\n width: var(--office-icon-size-md);\n height: var(--office-icon-size-md);\n fill: none;\n stroke: currentColor;\n stroke-width: var(--office-icon-stroke);\n stroke-linecap: round;\n}\n.close:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n}\n\n@media (forced-colors: active) {\n .box {\n border-color: CanvasText;\n background: Canvas;\n }\n .backdrop {\n background: transparent;\n }\n}\n";
|
|
2185
2185
|
|
|
2186
2186
|
// src/dialog/dialog.ts
|
|
@@ -2284,7 +2284,7 @@ var OfficeUiDialog = class extends OfficeElement {
|
|
|
2284
2284
|
};
|
|
2285
2285
|
var defineDialog = definer("office-ui-dialog", () => OfficeUiDialog);
|
|
2286
2286
|
|
|
2287
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
2287
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/icon.css?raw
|
|
2288
2288
|
var icon_default = ":host {\n display: inline-flex;\n width: 1em;\n height: 1em;\n}\nsvg {\n width: 1em;\n height: 1em;\n fill: none;\n stroke: currentColor;\n stroke-width: 1.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n";
|
|
2289
2289
|
|
|
2290
2290
|
// src/icon.ts
|
|
@@ -2316,7 +2316,7 @@ var OfficeUiIcon = class extends OfficeElement {
|
|
|
2316
2316
|
};
|
|
2317
2317
|
var defineIcon = definer("office-ui-icon", () => OfficeUiIcon);
|
|
2318
2318
|
|
|
2319
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
2319
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/menu/command-search.css?raw
|
|
2320
2320
|
var command_search_default = ":host {\n display: inline-flex;\n align-items: center;\n min-width: 0;\n font-family: var(--office-font);\n}\n.field {\n display: flex;\n align-items: center;\n gap: var(--office-space-1-5);\n width: 100%;\n min-width: 0;\n height: var(--office-target-size);\n padding: 0 var(--office-space-2);\n box-sizing: border-box;\n border: var(--office-border-width) solid transparent;\n border-radius: var(--office-radius);\n color: var(--office-muted-foreground);\n}\n.field:hover,\n.field:focus-within {\n border-color: var(--office-border);\n background: var(--office-background);\n}\ninput {\n flex: 1;\n min-width: 0;\n border: 0;\n outline: 0;\n background: transparent;\n color: var(--office-foreground);\n font: inherit;\n font-size: var(--office-font-size);\n}\nsvg {\n width: var(--office-icon-size-md);\n height: var(--office-icon-size-md);\n flex: none;\n fill: none;\n stroke: currentColor;\n stroke-width: var(--office-icon-stroke);\n stroke-linecap: round;\n stroke-linejoin: round;\n}\nul {\n position: fixed;\n inset: auto;\n margin: 0;\n padding: var(--office-space-1);\n min-width: var(--office-search-popup-min-width);\n max-height: var(--office-search-popup-max-height);\n overflow: auto;\n box-sizing: border-box;\n list-style: none;\n background: var(--office-background);\n color: var(--office-foreground);\n border: var(--office-border-width) solid var(--office-border);\n border-radius: var(--office-radius);\n box-shadow: var(--office-shadow);\n font-size: var(--office-font-size-sm);\n}\nul[hidden] {\n display: none;\n}\nli {\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-height: var(--office-target-size);\n padding: var(--office-space-0) var(--office-space-2-5);\n border-radius: var(--office-radius-sm);\n cursor: pointer;\n}\nli[data-active] {\n background: var(--office-surface);\n}\nli[aria-disabled='true'] {\n cursor: not-allowed;\n color: var(--office-muted-foreground);\n}\nli small {\n color: var(--office-muted-foreground);\n font-size: var(--office-font-size-xs);\n}\nli.empty {\n cursor: default;\n color: var(--office-muted-foreground);\n}\n\n@media (forced-colors: active) {\n .field,\n ul {\n border-color: CanvasText;\n background: Canvas;\n color: CanvasText;\n }\n li[data-active] {\n background: Highlight;\n color: HighlightText;\n }\n}\n";
|
|
2321
2321
|
|
|
2322
2322
|
// src/menu/command-search.ts
|
|
@@ -2508,7 +2508,7 @@ function clampFlyoutPosition(input) {
|
|
|
2508
2508
|
};
|
|
2509
2509
|
}
|
|
2510
2510
|
|
|
2511
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
2511
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/menu/context-menu.css?raw
|
|
2512
2512
|
var context_menu_default = ":host {\n display: contents;\n}\n:host([data-controlled]) {\n display: block;\n position: fixed;\n z-index: var(--office-z-popover);\n color: var(--office-popover-foreground);\n font: var(--office-font-size-sm) / var(--office-line-height) var(--office-font);\n}\n:host([data-controlled][hidden]) {\n display: none;\n}\n\n/* Children mode: a popover panel around the slotted menu items. */\n.panel {\n position: fixed;\n inset: auto;\n margin: 0;\n min-width: var(--office-context-menu-min-width);\n padding: var(--office-space-1);\n box-sizing: border-box;\n background: var(--office-background);\n color: var(--office-foreground);\n border: var(--office-border-width) solid var(--office-border);\n border-radius: var(--office-radius);\n box-shadow: var(--office-shadow);\n font-family: var(--office-font);\n}\n.panel[hidden] {\n display: none;\n}\n\n/* Controlled mode: the host is the fixed box; rows are drawn here from `state`. */\n.menu {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n min-width: var(--office-menu-min-width);\n max-height: calc(100vh - 2 * var(--office-space-2));\n overflow-y: auto;\n padding: var(--office-space-1-5) 0;\n border: var(--office-border-width) solid var(--office-border);\n border-radius: var(--office-radius-md);\n background: var(--office-popover);\n color: inherit;\n box-shadow: var(--office-shadow-lg);\n user-select: none;\n}\n.menu:focus {\n outline: none;\n}\n.item {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: var(--office-space-1-5);\n width: 100%;\n min-height: var(--office-field-height);\n padding: var(--office-space-1-5) var(--office-space-3);\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: start;\n white-space: nowrap;\n cursor: pointer;\n}\n.item:hover:not(:disabled),\n.item:focus:not(:disabled) {\n background: var(--office-selected);\n outline: none;\n}\n.item:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: calc(-1 * var(--office-focus-width));\n}\n.item:disabled {\n opacity: 0.45;\n cursor: default;\n}\n.item.danger {\n color: var(--office-danger);\n}\n.item svg {\n width: var(--office-icon-size-md);\n height: var(--office-icon-size-md);\n flex: none;\n fill: none;\n stroke: currentColor;\n stroke-width: var(--office-icon-stroke);\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n.check {\n flex: none;\n width: var(--office-icon-size);\n text-align: center;\n}\n.shortcut {\n margin-inline-start: auto;\n padding-inline-start: var(--office-space-4);\n color: var(--office-muted-foreground);\n}\n.separator {\n height: var(--office-border-width);\n margin: var(--office-space-1) 0;\n background: var(--office-border);\n}\n.heading {\n padding: var(--office-space-1-5) var(--office-space-3) var(--office-space-0);\n color: var(--office-muted-foreground);\n font-size: var(--office-font-size-2xs);\n font-weight: var(--office-font-weight-bold);\n letter-spacing: 0.06em;\n text-transform: uppercase;\n}\n\n@media (pointer: coarse) {\n .item {\n min-height: var(--office-target-size-touch);\n }\n}\n@media (forced-colors: active) {\n .panel,\n .menu {\n border-color: CanvasText;\n background: Canvas;\n color: CanvasText;\n box-shadow: none;\n }\n .item,\n .item.danger {\n color: CanvasText;\n }\n .item:disabled {\n color: GrayText;\n opacity: 1;\n }\n .item:hover:not(:disabled),\n .item:focus:not(:disabled) {\n background: Highlight;\n color: HighlightText;\n }\n .separator {\n background: CanvasText;\n }\n .heading {\n color: CanvasText;\n }\n}\n";
|
|
2513
2513
|
|
|
2514
2514
|
// src/menu/context-menu.ts
|
|
@@ -2860,7 +2860,7 @@ var OfficeUiContextMenu = class extends OfficeElement {
|
|
|
2860
2860
|
};
|
|
2861
2861
|
var defineContextMenu = definer("office-ui-context-menu", () => OfficeUiContextMenu);
|
|
2862
2862
|
|
|
2863
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
2863
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/menu/menu-separator.css?raw
|
|
2864
2864
|
var menu_separator_default = ":host {\n display: block;\n height: var(--office-border-width);\n margin: var(--office-space-1) var(--office-space-1-5);\n background: var(--office-border);\n}\n\n@media (forced-colors: active) {\n :host {\n background: CanvasText;\n }\n}\n";
|
|
2865
2865
|
|
|
2866
2866
|
// src/menu/menu-separator.ts
|
|
@@ -2872,7 +2872,7 @@ var OfficeUiMenuSeparator = class extends OfficeElement {
|
|
|
2872
2872
|
};
|
|
2873
2873
|
var defineMenuSeparator = definer("office-ui-menu-separator", () => OfficeUiMenuSeparator);
|
|
2874
2874
|
|
|
2875
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
2875
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/menu/menu-button.css?raw
|
|
2876
2876
|
var menu_button_default = ":host {\n display: inline-flex;\n vertical-align: middle;\n}\n.wrap {\n display: inline-flex;\n align-items: stretch;\n border: var(--office-border-width) solid transparent;\n border-radius: var(--office-radius);\n}\n:host([variant='stacked']) .wrap {\n flex-direction: column;\n}\nbutton {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--office-space-1);\n min-width: var(--office-target-size);\n min-height: var(--office-target-size);\n padding: 0 var(--office-space-1-5);\n border: 0;\n border-radius: var(--office-radius);\n background: transparent;\n color: var(--office-foreground);\n font: inherit;\n font-size: var(--office-font-size-sm);\n cursor: pointer;\n white-space: nowrap;\n}\n:host([variant='stacked']) .main {\n flex-direction: column;\n padding: var(--office-space-1) var(--office-space-1-5) 0;\n}\n:host([variant='stacked']) .caret {\n min-height: var(--office-icon-size-md);\n padding: 0 var(--office-space-1-5) var(--office-space-0);\n}\n:host([variant='stacked']:not([command])) .main {\n padding-bottom: 0;\n}\n.wrap:hover:not(.disabled) {\n border-color: var(--office-border);\n}\nbutton:hover:not(:disabled) {\n background: var(--office-surface);\n}\nbutton:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: calc(-1 * var(--office-focus-width));\n}\nbutton:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\nbutton[aria-expanded='true'] {\n background: var(--office-surface);\n}\n.caret svg {\n width: var(--office-icon-size-sm);\n height: var(--office-icon-size-sm);\n}\nsvg {\n width: var(--office-icon-size-ml);\n height: var(--office-icon-size-ml);\n fill: none;\n stroke: currentColor;\n stroke-width: var(--office-icon-stroke);\n stroke-linecap: round;\n stroke-linejoin: round;\n}\nsvg:not([data-painted]) {\n display: none;\n}\n.panel {\n position: fixed;\n inset: auto;\n margin: 0;\n min-width: var(--office-menu-min-width);\n padding: var(--office-space-1);\n box-sizing: border-box;\n background: var(--office-background);\n color: var(--office-foreground);\n border: var(--office-border-width) solid var(--office-border);\n border-radius: var(--office-radius);\n box-shadow: var(--office-shadow);\n}\n.panel[hidden] {\n display: none;\n}\n\n@media (forced-colors: active) {\n button {\n color: ButtonText;\n }\n button:disabled {\n color: GrayText;\n }\n .panel {\n border-color: CanvasText;\n background: Canvas;\n color: CanvasText;\n }\n}\n";
|
|
2877
2877
|
|
|
2878
2878
|
// src/menu/menu-button.ts
|
|
@@ -3063,7 +3063,7 @@ var OfficeUiMenuButton = class extends OfficeElement {
|
|
|
3063
3063
|
};
|
|
3064
3064
|
var defineMenuButton = definer("office-ui-menu-button", () => OfficeUiMenuButton);
|
|
3065
3065
|
|
|
3066
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
3066
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/menu/menu-item.css?raw
|
|
3067
3067
|
var menu_item_default = ":host {\n display: block;\n}\n:host([hidden]) {\n display: none;\n}\nbutton {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: var(--office-space-2);\n width: 100%;\n min-height: var(--office-target-size);\n padding: 0 var(--office-space-2-5) 0 var(--office-space-2);\n border: 0;\n border-radius: var(--office-radius-sm);\n background: transparent;\n color: inherit;\n font: inherit;\n font-size: var(--office-font-size-sm);\n text-align: start;\n cursor: pointer;\n}\nbutton:hover:not(:disabled),\nbutton:focus-visible {\n background: var(--office-surface);\n outline: none;\n}\nbutton:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.check {\n width: var(--office-icon-size);\n text-align: center;\n}\nsvg {\n width: var(--office-icon-size-md);\n height: var(--office-icon-size-md);\n flex: none;\n fill: none;\n stroke: currentColor;\n stroke-width: var(--office-icon-stroke);\n stroke-linecap: round;\n stroke-linejoin: round;\n}\nsvg:not([data-painted]) {\n visibility: hidden;\n}\n\n@media (forced-colors: active) {\n button:focus-visible {\n background: Highlight;\n color: HighlightText;\n }\n}\n";
|
|
3068
3068
|
|
|
3069
3069
|
// src/menu/menu-item.ts
|
|
@@ -3123,7 +3123,7 @@ var OfficeUiMenuItem = class extends OfficeElement {
|
|
|
3123
3123
|
};
|
|
3124
3124
|
var defineMenuItem = definer("office-ui-menu-item", () => OfficeUiMenuItem);
|
|
3125
3125
|
|
|
3126
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
3126
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/dialog/options-dialog.css?raw
|
|
3127
3127
|
var options_dialog_default = ":host {\n display: contents;\n}\noffice-ui-dialog {\n --office-dialog-width: var(--office-options-width);\n --office-dialog-max-width: var(--office-options-width);\n}\n.layout {\n display: grid;\n grid-template-columns: var(--office-options-nav-width) minmax(0, 1fr);\n gap: 0;\n min-height: var(--office-options-min-height);\n margin: calc(-1 * var(--office-space-4));\n}\nnav {\n display: flex;\n flex-direction: column;\n padding: var(--office-space-2) 0;\n border-inline-end: var(--office-border-width) solid var(--office-border);\n background: var(--office-surface);\n overflow: auto;\n}\nnav button {\n min-height: var(--office-options-row-height);\n padding: var(--office-space-1) var(--office-space-3-5);\n border: 0;\n border-radius: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: start;\n cursor: pointer;\n}\nnav button[aria-selected='true'] {\n background: var(--office-selected);\n font-weight: 600;\n box-shadow: inset var(--office-selection-bar-width) 0 0 var(--office-accent);\n}\nnav button:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: calc(-1 * var(--office-focus-width));\n}\n[role='tabpanel'] {\n padding: var(--office-space-4) var(--office-space-5);\n overflow: auto;\n}\n.lead {\n margin: 0 0 var(--office-space-3);\n font-size: var(--office-font-size-md);\n}\n.unavailable {\n margin: 0 0 var(--office-space-3);\n color: var(--office-muted-foreground);\n}\nsection + section {\n margin-top: var(--office-space-4);\n}\nh3 {\n margin: 0 0 var(--office-space-2);\n padding-bottom: var(--office-space-1);\n border-bottom: var(--office-border-width) solid var(--office-border);\n font-size: var(--office-font-size);\n font-weight: 600;\n}\n.desc {\n margin: 0 0 var(--office-space-2);\n color: var(--office-muted-foreground);\n}\n.row {\n display: flex;\n align-items: center;\n gap: var(--office-space-2);\n min-height: var(--office-options-row-height);\n}\n.row.indent {\n padding-inline-start: var(--office-space-6);\n}\n.row.field > span:first-child {\n min-width: var(--office-options-label-width);\n}\n.row[data-disabled] {\n color: var(--office-muted-foreground);\n}\ninput[type='text'],\ninput[type='number'],\nselect {\n min-height: var(--office-input-height);\n box-sizing: border-box;\n font: inherit;\n border: var(--office-border-width) solid var(--office-border);\n border-radius: var(--office-radius-sm);\n background: var(--office-background);\n color: inherit;\n}\ninput[type='number'] {\n width: var(--office-options-number-width);\n}\n.info {\n display: inline-grid;\n place-items: center;\n width: var(--office-info-size);\n height: var(--office-info-size);\n border: var(--office-border-width) solid currentColor;\n border-radius: 50%;\n font-size: var(--office-font-size-2xs);\n color: var(--office-muted-foreground);\n cursor: help;\n}\n.actions {\n display: flex;\n gap: var(--office-space-2);\n}\n.actions button {\n min-width: var(--office-dialog-button-min-width);\n min-height: var(--office-control-height-md);\n font: inherit;\n cursor: pointer;\n}\n@media (max-width: 600px) {\n .layout {\n grid-template-columns: 1fr;\n }\n nav {\n flex-direction: row;\n border-inline-end: 0;\n border-bottom: var(--office-border-width) solid var(--office-border);\n }\n nav button {\n white-space: nowrap;\n }\n .row.field {\n flex-wrap: wrap;\n }\n}\n";
|
|
3128
3128
|
|
|
3129
3129
|
// src/dialog/options-dialog.ts
|
|
@@ -3325,7 +3325,7 @@ var defineOptionsDialog = definer(
|
|
|
3325
3325
|
[defineDialog]
|
|
3326
3326
|
);
|
|
3327
3327
|
|
|
3328
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
3328
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/ribbon-stack.css?raw
|
|
3329
3329
|
var ribbon_stack_default = ":host {\n display: inline-flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n gap: var(--office-space-px);\n align-self: stretch;\n}\n:host([orientation='horizontal']) {\n flex-direction: row;\n align-items: center;\n gap: var(--office-space-0);\n align-self: auto;\n}\n::slotted(*) {\n flex-shrink: 0;\n}\n";
|
|
3330
3330
|
|
|
3331
3331
|
// src/ribbon/ribbon-stack.ts
|
|
@@ -3337,7 +3337,7 @@ var OfficeUiRibbonStack = class extends OfficeElement {
|
|
|
3337
3337
|
};
|
|
3338
3338
|
var defineRibbonStack = definer("office-ui-ribbon-stack", () => OfficeUiRibbonStack);
|
|
3339
3339
|
|
|
3340
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
3340
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/ribbon-toolbar.css?raw
|
|
3341
3341
|
var ribbon_toolbar_default = ":host {\n display: flex;\n flex-wrap: wrap;\n align-items: stretch;\n gap: var(--office-space-0);\n padding: var(--office-space-0) var(--office-space-1);\n background: var(--office-surface);\n border-bottom: var(--office-border-width) solid var(--office-border);\n}\n\n@media (forced-colors: active) {\n :host {\n border-bottom-color: CanvasText;\n background: Canvas;\n }\n}\n";
|
|
3342
3342
|
|
|
3343
3343
|
// src/ribbon/ribbon-toolbar.ts
|
|
@@ -3442,7 +3442,7 @@ function pageSelectActive(choices, active, direction) {
|
|
|
3442
3442
|
return active;
|
|
3443
3443
|
}
|
|
3444
3444
|
|
|
3445
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
3445
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/form/select.css?raw
|
|
3446
3446
|
var select_default = "/*\n * `variant=\"ribbon-font\"` and `variant=\"ribbon-icon\"` are the compact ribbon combo and icon\n * picker; `data-font-picker=\"family\"` widens and lengthens the popup. Moved from pptx-viewer\n * (`select-styles.ts`, `select-ribbon-styles.ts`) and expressed in tokens.\n */\n:host {\n display: inline-block;\n box-sizing: border-box;\n min-width: 0;\n max-width: 100%;\n color: var(--office-foreground);\n font: inherit;\n font-size: var(--office-font-size-sm);\n vertical-align: middle;\n}\n:host([disabled]) {\n opacity: 0.5;\n cursor: not-allowed;\n}\nbutton {\n box-sizing: border-box;\n width: 100%;\n min-height: var(--office-field-height);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--office-space-2-5);\n padding: var(--office-space-1) var(--office-space-1-5);\n border: var(--office-border-width) solid var(--office-field-border);\n border-radius: var(--office-field-radius);\n background: var(--office-select-background);\n color: inherit;\n font: inherit;\n font-size: inherit;\n text-align: start;\n cursor: pointer;\n}\nbutton:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: var(--office-focus-offset);\n}\nbutton:disabled {\n cursor: not-allowed;\n}\n.value {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.chevron svg {\n display: none;\n}\n.chevron {\n flex: none;\n width: var(--office-chevron-size);\n height: var(--office-chevron-size);\n margin: 0 var(--office-space-0) var(--office-space-0) 0;\n border-right: calc(var(--office-border-width) * 1.5) solid currentColor;\n border-bottom: calc(var(--office-border-width) * 1.5) solid currentColor;\n transform: rotate(45deg);\n}\n:host([open]) .chevron {\n margin: var(--office-space-0) var(--office-space-0) 0 0;\n transform: rotate(225deg);\n}\n\n.menu {\n box-sizing: border-box;\n position: fixed;\n margin: 0;\n padding: var(--office-space-1);\n min-width: var(--office-select-menu-min-width);\n max-height: min(var(--office-select-max-height), 50vh);\n overflow: auto;\n border: var(--office-border-width) solid var(--office-field-border);\n border-radius: var(--office-field-radius);\n background: var(--office-popover);\n color: var(--office-popover-foreground);\n box-shadow: var(--office-shadow);\n font: inherit;\n font-size: inherit;\n}\n.menu:not(:popover-open):not([data-fallback-open]) {\n display: none;\n}\n.option {\n display: block;\n box-sizing: border-box;\n width: 100%;\n padding: var(--office-space-1-5) var(--office-space-2);\n border-radius: var(--office-radius-sm);\n cursor: pointer;\n white-space: nowrap;\n}\n.group {\n padding: var(--office-space-1-5) var(--office-space-2) var(--office-space-0);\n color: var(--office-muted-foreground);\n font-size: 0.9em;\n font-weight: var(--office-font-weight-bold);\n}\n.option:not([aria-disabled='true']):hover,\n.option[data-active]:not([aria-selected='true']) {\n background: var(--office-select-option-active);\n}\n.option[aria-selected='true'] {\n background: var(--office-accent);\n color: var(--office-accent-foreground);\n}\n.option[aria-selected='true']:hover {\n filter: brightness(1.08);\n}\n.option[aria-disabled='true'] {\n opacity: 0.45;\n cursor: not-allowed;\n}\n.description {\n flex: none;\n color: var(--office-muted-foreground);\n font-size: var(--office-font-size-2xs);\n}\n\n/* Ribbon variants */\n:host([variant^='ribbon-'][disabled]) {\n opacity: 0.4;\n}\n:host([variant^='ribbon-']) button {\n height: var(--office-ribbon-combo-height);\n min-height: var(--office-ribbon-combo-height);\n padding: var(--office-space-1) var(--office-space-2);\n gap: var(--office-space-1);\n border: var(--office-border-width) solid\n color-mix(in oklab, var(--office-border) 60%, transparent);\n border-radius: var(--office-radius-sm);\n font-size: var(--office-font-size-sm);\n background: color-mix(in oklab, var(--office-background) 60%, transparent);\n color: var(--office-foreground);\n}\n:host([variant^='ribbon-']) .value {\n flex: 1;\n min-width: 0;\n}\n:host([variant^='ribbon-']) .chevron {\n width: var(--office-icon-size-md);\n height: var(--office-icon-size-md);\n margin: 0;\n border: 0;\n transform: none;\n}\n:host([variant^='ribbon-']) .chevron svg {\n display: block;\n width: var(--office-icon-size-md);\n height: var(--office-icon-size-md);\n}\n:host([variant='ribbon-font']) .chevron {\n color: var(--office-muted-foreground);\n}\n:host([variant='ribbon-font'][data-font-picker='size']) button {\n padding-inline: var(--office-space-1-5);\n}\n:host([variant='ribbon-icon']) button {\n width: var(--office-ribbon-icon-select-width);\n gap: var(--office-space-1-5);\n padding: var(--office-space-1-5) var(--office-space-2-5);\n border: 0;\n background: var(--office-surface);\n justify-content: center;\n}\n:host([variant='ribbon-icon']) :is(.value, .chevron) {\n display: none;\n}\n::slotted(svg[slot='icon']) {\n display: block;\n width: var(--office-icon-size-md);\n height: var(--office-icon-size-md);\n flex: none;\n}\n:host([variant^='ribbon-']) button:hover:not(:disabled) {\n background: var(--office-selected);\n}\n:host([variant^='ribbon-']) .menu {\n width: var(--office-select-ribbon-menu-width);\n padding: var(--office-space-1) 0;\n border-radius: var(--office-radius-lg);\n font-size: var(--office-font-size-sm);\n}\n:host([data-font-picker='family']) .menu {\n width: var(--office-font-picker-width);\n}\n:host([variant^='ribbon-']) .option {\n display: flex;\n justify-content: space-between;\n gap: var(--office-space-3);\n padding: var(--office-space-1-5) var(--office-space-3);\n border-radius: 0;\n}\n:host([variant^='ribbon-']) .option[aria-selected='true'] {\n background: transparent;\n color: var(--office-foreground);\n}\n:host([variant^='ribbon-']) .option:hover,\n:host([variant^='ribbon-']) .option[data-active] {\n background: var(--office-surface);\n filter: none;\n}\n:host([variant^='ribbon-']) .group {\n padding: var(--office-space-2) var(--office-space-3) var(--office-space-1);\n text-transform: uppercase;\n letter-spacing: 0.02em;\n font-size: var(--office-font-size-2xs);\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n button,\n :host([variant^='ribbon-']) button {\n min-height: var(--office-target-size-touch);\n }\n :host([variant^='ribbon-']) button {\n height: var(--office-target-size-touch);\n }\n}\n@media (forced-colors: active) {\n button,\n .menu {\n border-color: CanvasText;\n background: Canvas;\n color: CanvasText;\n }\n .option[aria-selected='true'],\n .option[data-active],\n .option:not([aria-disabled='true']):hover {\n background: Highlight;\n color: HighlightText;\n }\n}\n";
|
|
3447
3447
|
|
|
3448
3448
|
// src/form/select.ts
|
|
@@ -3779,7 +3779,7 @@ var OfficeUiSelect = class extends OfficeElement {
|
|
|
3779
3779
|
};
|
|
3780
3780
|
var defineSelect = definer("office-ui-select", () => OfficeUiSelect);
|
|
3781
3781
|
|
|
3782
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
3782
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/status-bar.css?raw
|
|
3783
3783
|
var status_bar_default = ":host {\n display: flex;\n align-items: center;\n gap: var(--office-space-3);\n min-height: var(--office-status-bar-height);\n padding: 0 var(--office-space-2);\n font-size: var(--office-font-size-xs);\n background: var(--office-surface);\n color: var(--office-foreground);\n border-top: var(--office-border-width) solid var(--office-border);\n font-family: var(--office-font);\n}\n::slotted([slot='end']) {\n margin-inline-start: auto;\n}\n.bar {\n display: contents;\n}\n[hidden] {\n display: none !important;\n}\n:host([data-controlled]) {\n display: block;\n flex: none;\n padding: 0;\n gap: 0;\n}\n:host([data-controlled]) .bar {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: var(--office-space-1);\n width: 100%;\n min-height: var(--office-status-bar-height);\n padding: var(--office-space-0) var(--office-space-2);\n color: var(--office-muted-foreground);\n}\n:host([data-controlled]) ::slotted([slot='end']) {\n margin-inline-start: 0;\n}\n.items {\n display: flex;\n align-items: center;\n min-width: 0;\n}\n.item {\n flex: none;\n white-space: nowrap;\n}\n.item + .item::before {\n content: '';\n display: inline-block;\n width: var(--office-border-width);\n height: var(--office-space-3);\n margin: 0 var(--office-space-2);\n vertical-align: middle;\n background: var(--office-border);\n}\n.item.saving {\n color: var(--office-warning);\n}\n.item.error {\n color: var(--office-danger);\n}\n.spacer {\n flex: 1;\n}\n.toggles,\n.group {\n display: flex;\n align-items: center;\n gap: var(--office-space-0);\n}\n.sep {\n flex: none;\n width: var(--office-border-width);\n height: var(--office-space-3);\n margin: 0 var(--office-space-0);\n background: var(--office-border);\n}\n.bar button {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--office-space-1);\n min-width: var(--office-control-height-xs);\n min-height: var(--office-control-height-xs);\n padding: var(--office-space-1);\n border: 0;\n border-radius: var(--office-radius-sm);\n background: transparent;\n color: inherit;\n font: inherit;\n cursor: pointer;\n touch-action: manipulation;\n}\n.bar button:hover {\n background: var(--office-selected);\n color: var(--office-foreground);\n}\n.bar button[aria-pressed='true'] {\n color: var(--office-accent);\n}\n.bar button:active {\n opacity: 0.8;\n}\n.bar button:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: var(--office-focus-offset);\n}\n.bar svg {\n flex: none;\n width: var(--office-icon-size);\n height: var(--office-icon-size);\n fill: none;\n stroke: currentColor;\n stroke-width: var(--office-icon-stroke);\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n.toggle svg,\n.zoom-step svg {\n width: var(--office-icon-size-sm);\n height: var(--office-icon-size-sm);\n}\n.zoom-fit {\n min-width: var(--office-zoom-value-width);\n font-variant-numeric: tabular-nums;\n}\n@media (max-width: 767px) {\n .narrow-hide,\n .toggle .label {\n display: none !important;\n }\n}\n@media (pointer: coarse) {\n .bar button {\n min-width: var(--office-target-size-touch);\n min-height: var(--office-target-size-touch);\n }\n}\n@media (forced-colors: active) {\n :host {\n background: Canvas;\n color: CanvasText;\n border-top-color: CanvasText;\n }\n .bar button {\n color: ButtonText;\n }\n .bar button:hover {\n background: Highlight;\n color: HighlightText;\n }\n .bar button[aria-pressed='true'] {\n border: var(--office-border-width) solid Highlight;\n }\n .bar button:focus-visible {\n outline-color: Highlight;\n }\n .sep,\n .item + .item::before {\n background: CanvasText;\n }\n}\n";
|
|
3784
3784
|
|
|
3785
3785
|
// src/chrome/status-bar.ts
|
|
@@ -3912,7 +3912,7 @@ var OfficeUiStatusBar = class extends OfficeElement {
|
|
|
3912
3912
|
};
|
|
3913
3913
|
var defineStatusBar = definer("office-ui-status-bar", () => OfficeUiStatusBar);
|
|
3914
3914
|
|
|
3915
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
3915
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/status-item.css?raw
|
|
3916
3916
|
var status_item_default = ":host {\n display: inline-flex;\n align-items: center;\n gap: var(--office-space-1);\n white-space: nowrap;\n}\n.label {\n color: var(--office-muted-foreground);\n}\nbutton {\n all: unset;\n display: inline-flex;\n gap: var(--office-space-1);\n align-items: center;\n cursor: pointer;\n padding: 0 var(--office-space-1);\n min-height: var(--office-target-size);\n border-radius: var(--office-radius-sm);\n}\nbutton:hover {\n background: var(--office-background);\n}\nbutton:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n}\n@media (forced-colors: active) {\n .label {\n color: GrayText;\n }\n button:focus-visible {\n outline-color: Highlight;\n }\n}\nspan.wrap {\n display: inline-flex;\n gap: var(--office-space-1);\n}\n";
|
|
3917
3917
|
|
|
3918
3918
|
// src/chrome/status-item.ts
|
|
@@ -3945,7 +3945,7 @@ var OfficeUiStatusItem = class extends OfficeElement {
|
|
|
3945
3945
|
};
|
|
3946
3946
|
var defineStatusItem = definer("office-ui-status-item", () => OfficeUiStatusItem);
|
|
3947
3947
|
|
|
3948
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
3948
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/tab-strip.css?raw
|
|
3949
3949
|
var tab_strip_default = ":host {\n display: flex;\n align-items: stretch;\n min-width: 0;\n min-height: var(--office-tab-height);\n gap: var(--office-space-0);\n padding: 0 var(--office-space-1-5);\n background: var(--office-surface);\n color: var(--office-muted-foreground);\n border-top: var(--office-border-width) solid var(--office-border);\n font-size: var(--office-font-size-sm);\n font-family: var(--office-font);\n}\n.step {\n flex: none;\n display: inline-grid;\n place-items: center;\n width: var(--office-target-size);\n min-height: var(--office-target-size);\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n cursor: pointer;\n}\n.step:disabled {\n opacity: 0.4;\n cursor: default;\n}\n.add {\n font-size: var(--office-font-size-xl);\n line-height: 1;\n}\n.add[hidden] {\n display: none;\n}\n.list {\n display: flex;\n align-items: stretch;\n min-width: 0;\n overflow-x: auto;\n scrollbar-width: thin;\n}\n.tab {\n flex: none;\n max-width: var(--office-tab-max-width);\n min-height: var(--office-target-size);\n margin-top: calc(-1 * var(--office-space-px));\n padding: var(--office-space-0) var(--office-space-3-5);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n border: var(--office-border-width) solid transparent;\n border-top: 0;\n border-radius: 0 0 var(--office-radius) var(--office-radius);\n background: transparent;\n color: inherit;\n font: inherit;\n cursor: pointer;\n}\n.tab:hover {\n color: var(--office-foreground);\n}\n.tab[aria-selected='true'] {\n border-color: var(--office-border);\n background: var(--office-background);\n color: var(--office-accent);\n font-weight: 600;\n box-shadow: inset 0 var(--office-border-width-thick) 0 var(--office-accent);\n}\nbutton:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: calc(-1 * var(--office-focus-width));\n}\nsvg {\n width: var(--office-icon-size-md);\n height: var(--office-icon-size-md);\n fill: none;\n stroke: currentColor;\n stroke-width: var(--office-icon-stroke);\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n@media (forced-colors: active) {\n :host {\n border-top-color: CanvasText;\n }\n .tab[aria-selected='true'] {\n background: Highlight;\n color: HighlightText;\n forced-color-adjust: none;\n }\n}\n";
|
|
3950
3950
|
|
|
3951
3951
|
// src/chrome/tab-strip.ts
|
|
@@ -4098,7 +4098,7 @@ function matchTitleBarCommands(search, query) {
|
|
|
4098
4098
|
return (search.commands ?? []).filter((entry) => entry.label.toLowerCase().includes(needle));
|
|
4099
4099
|
}
|
|
4100
4100
|
|
|
4101
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
4101
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/title-bar.css?raw
|
|
4102
4102
|
var title_bar_default = ":host {\n display: block;\n flex: none;\n}\n:host([data-empty]) {\n display: none !important;\n}\n[hidden] {\n display: none !important;\n}\n.bar {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: var(--office-space-1);\n width: 100%;\n height: var(--office-title-bar-height);\n padding: 0 var(--office-space-2);\n border-bottom: var(--office-border-width) solid var(--office-title-bar-border);\n background: var(--office-title-bar-background);\n color: var(--office-title-bar-foreground);\n font: var(--office-font-size-xs)/var(--office-line-height-tight) var(--office-font);\n user-select: none;\n}\n:host([placement='belowRibbon']) .bar {\n height: auto;\n min-height: var(--office-title-bar-below-height);\n padding-block: var(--office-space-0);\n}\n.mark {\n flex: none;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--office-title-bar-mark-size);\n height: var(--office-title-bar-mark-size);\n border-radius: var(--office-radius-sm);\n background: var(--office-title-bar-mark-background);\n color: var(--office-title-bar-mark-foreground);\n font-size: var(--office-font-size-2xs);\n font-weight: var(--office-font-weight-bold);\n}\n.autosave {\n flex: none;\n display: flex;\n align-items: center;\n gap: var(--office-space-1-5);\n padding: 0 var(--office-space-0) 0 var(--office-space-1-5);\n white-space: nowrap;\n}\n.label,\n.dot,\n.status {\n color: var(--office-muted-foreground);\n white-space: nowrap;\n}\n.sep {\n flex: none;\n width: var(--office-border-width);\n height: var(--office-space-4);\n margin: 0 var(--office-space-1);\n background: var(--office-title-bar-border);\n}\n.qat {\n display: flex;\n align-items: center;\n gap: var(--office-space-0);\n min-width: 0;\n}\n.qat button,\n.results button {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--office-space-1);\n min-width: var(--office-control-height-md);\n min-height: var(--office-control-height-md);\n padding: var(--office-space-1);\n border: 0;\n border-radius: var(--office-radius-sm);\n background: transparent;\n color: var(--office-muted-foreground);\n font: inherit;\n cursor: pointer;\n touch-action: manipulation;\n}\n.qat button:hover:not(:disabled) {\n background: var(--office-selected);\n}\n.qat button:active:not(:disabled) {\n opacity: 0.7;\n}\n.qat button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n.qat small {\n font-size: var(--office-font-size-xs);\n white-space: nowrap;\n}\nsvg {\n flex: none;\n width: var(--office-icon-size);\n height: var(--office-icon-size);\n fill: none;\n stroke: currentColor;\n stroke-width: var(--office-icon-stroke);\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n.file {\n display: flex;\n align-items: baseline;\n gap: var(--office-space-1-5);\n min-width: 0;\n padding: 0 var(--office-space-1);\n flex: 0 1 auto;\n}\n.name {\n max-width: var(--office-title-bar-name-max-width);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--office-title-bar-foreground);\n font-size: var(--office-font-size-sm);\n font-weight: var(--office-font-weight-medium);\n}\n.status.saving {\n color: var(--office-warning);\n}\n.status.error {\n color: var(--office-danger);\n}\n.search {\n position: relative;\n flex: 1;\n display: flex;\n justify-content: center;\n min-width: 0;\n padding: 0 var(--office-space-2);\n}\n.box {\n position: relative;\n width: 100%;\n max-width: var(--office-title-bar-search-max-width);\n min-width: 0;\n}\n.box > [part='search'] {\n width: 100%;\n}\n.results {\n position: absolute;\n z-index: var(--office-z-popover);\n top: calc(100% + var(--office-space-1));\n right: 0;\n left: 0;\n max-height: var(--office-title-bar-results-max-height);\n overflow-y: auto;\n border: var(--office-border-width) solid var(--office-border);\n border-radius: var(--office-radius-lg);\n background: var(--office-popover);\n color: var(--office-popover-foreground);\n box-shadow: var(--office-shadow-lg);\n}\n.heading {\n padding: var(--office-space-1-5) var(--office-space-3);\n color: var(--office-muted-foreground);\n font-size: var(--office-font-size-2xs);\n font-weight: var(--office-font-weight-bold);\n letter-spacing: 0.05em;\n text-transform: uppercase;\n}\n.empty {\n padding: var(--office-space-2) var(--office-space-3);\n color: var(--office-muted-foreground);\n}\n.results button {\n display: flex;\n width: 100%;\n justify-content: flex-start;\n gap: var(--office-space-2);\n padding: var(--office-space-1-5) var(--office-space-3);\n border-radius: 0;\n color: inherit;\n text-align: start;\n}\n.results button:hover,\n.results button[aria-selected='true'] {\n background: var(--office-selected);\n}\n.results .cat {\n margin-inline-start: auto;\n color: var(--office-muted-foreground);\n font-size: var(--office-font-size-2xs);\n text-transform: capitalize;\n}\n.results .content {\n border-top: var(--office-border-width) solid var(--office-border);\n}\n.end {\n flex: none;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--office-space-1);\n}\n.sr {\n position: absolute;\n width: var(--office-space-px);\n height: var(--office-space-px);\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\nbutton:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: var(--office-focus-offset);\n}\n@media (max-width: 767px), (max-width: 1023px) and (max-height: 520px) {\n :host(:not([placement='belowRibbon'])) {\n display: none !important;\n }\n}\n@media (max-width: 1100px) {\n .qat small {\n display: none;\n }\n .name {\n max-width: var(--office-title-bar-name-max-width-narrow);\n }\n}\n@media (pointer: coarse) {\n .qat button,\n .results button {\n min-width: var(--office-target-size-touch);\n min-height: var(--office-target-size-touch);\n }\n .bar {\n height: auto;\n min-height: var(--office-target-size-touch);\n }\n}\n@media (forced-colors: active) {\n .bar {\n border-bottom-color: CanvasText;\n background: Canvas;\n color: CanvasText;\n }\n .mark {\n border: var(--office-border-width) solid CanvasText;\n background: Canvas;\n color: CanvasText;\n }\n .label,\n .dot,\n .status,\n .name,\n .qat button,\n .results button {\n color: CanvasText;\n }\n .sep {\n background: CanvasText;\n }\n .qat button:hover:not(:disabled),\n .results button:hover,\n .results button[aria-selected='true'] {\n background: Highlight;\n color: HighlightText;\n }\n .qat button:disabled {\n color: GrayText;\n opacity: 1;\n }\n .results {\n border-color: CanvasText;\n background: Canvas;\n }\n button:focus-visible {\n outline-color: Highlight;\n }\n}\n";
|
|
4103
4103
|
|
|
4104
4104
|
// src/chrome/title-bar.ts
|
|
@@ -4379,7 +4379,7 @@ var defineTitleBar = definer("office-ui-title-bar", () => OfficeUiTitleBar, [
|
|
|
4379
4379
|
defineSwitch
|
|
4380
4380
|
]);
|
|
4381
4381
|
|
|
4382
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
4382
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/form/zoom-slider.css?raw
|
|
4383
4383
|
var zoom_slider_default = ":host {\n display: inline-flex;\n align-items: center;\n gap: var(--office-space-0);\n font-size: var(--office-font-size-xs);\n color: var(--office-foreground);\n font-family: var(--office-font);\n}\nbutton {\n box-sizing: border-box;\n display: inline-grid;\n place-items: center;\n min-width: var(--office-target-size);\n min-height: var(--office-target-size);\n padding: 0;\n border: var(--office-border-width) solid transparent;\n border-radius: var(--office-radius);\n background: transparent;\n color: inherit;\n font: inherit;\n font-size: var(--office-font-size-lg);\n line-height: 1;\n cursor: pointer;\n}\nbutton:hover:not(:disabled) {\n background: var(--office-background);\n}\nbutton:focus-visible,\ninput:focus-visible {\n outline: var(--office-focus-width) solid var(--office-ring);\n outline-offset: calc(var(--office-focus-offset) / 2);\n}\nbutton:disabled,\ninput:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\ninput {\n width: var(--office-zoom-slider-width);\n min-width: var(--office-zoom-slider-min-width);\n margin: 0 var(--office-space-0);\n accent-color: var(--office-accent);\n}\noutput {\n min-width: var(--office-zoom-value-width);\n text-align: center;\n font-variant-numeric: tabular-nums;\n}\nsvg {\n width: var(--office-icon-size-md);\n height: var(--office-icon-size-md);\n fill: none;\n stroke: currentColor;\n stroke-width: var(--office-icon-stroke);\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n:host(:not([fit])) .fit {\n display: none;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n input {\n flex: 1;\n }\n}\n@media (forced-colors: active) {\n button {\n color: ButtonText;\n }\n button:disabled {\n color: GrayText;\n }\n}\n";
|
|
4384
4384
|
|
|
4385
4385
|
// src/form/zoom-slider.ts
|
|
@@ -152,7 +152,7 @@ function textElement(doc, shape, scheme) {
|
|
|
152
152
|
return text;
|
|
153
153
|
}
|
|
154
154
|
|
|
155
|
-
// raw-css:/home/runner/work/ooxml/ooxml/
|
|
155
|
+
// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/smartart/smartart.css?raw
|
|
156
156
|
var smartart_default = ":host {\n display: block;\n}\nsvg {\n display: block;\n width: 100%;\n height: auto;\n max-height: 100%;\n}\ntext {\n font-family: var(--office-font);\n pointer-events: none;\n}\n.empty {\n padding: var(--office-space-2);\n font-size: var(--office-font-size-sm);\n color: var(--office-muted-foreground);\n}\n@media (forced-colors: active) {\n text {\n fill: CanvasText;\n }\n}\n";
|
|
157
157
|
|
|
158
158
|
// src/smartart/smartart.ts
|