ooxml-ui 0.11.0 → 0.13.0
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 +23 -2
- package/dist/{chunk-YZ2JQNHX.js → chunk-4NUKVNSJ.js} +1 -1
- package/dist/{chunk-EY266IK3.js → chunk-D6EREKYF.js} +5 -3
- package/dist/{chunk-KM7DN2LV.js → chunk-JROJGF7A.js} +360 -346
- package/dist/{chunk-H4KFVIGT.js → chunk-LI6OV55P.js} +15 -15
- package/dist/chunk-MDW2Y5UN.js +187 -0
- package/dist/{chunk-RLPL7Q6J.js → chunk-NOQAM6ZS.js} +8 -7
- package/dist/{chunk-KJV76AB7.js → chunk-SDFQ7U2I.js} +4 -3
- package/dist/controls.js +5 -4
- package/dist/document-notices.d.ts +1 -1
- package/dist/icons.js +3 -2
- package/dist/index.js +11 -10
- package/dist/presence.js +3 -2
- package/dist/smartart.js +3 -2
- package/dist/styles.d.ts +1 -1
- package/dist/theme.d.ts +2 -1
- package/dist/theme.js +2 -1
- package/dist/tokens.d.ts +185 -0
- package/package.json +1 -1
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { createIconSvg, paintIcon, defineIcon } from './chunk-
|
|
2
|
-
import { initialsOf } from './chunk-
|
|
3
|
-
import { definer, attachStyles, controlCss, emit } from './chunk-
|
|
1
|
+
import { createIconSvg, paintIcon, defineIcon } from './chunk-4NUKVNSJ.js';
|
|
2
|
+
import { initialsOf } from './chunk-NOQAM6ZS.js';
|
|
3
|
+
import { definer, attachStyles, controlCss, emit } from './chunk-D6EREKYF.js';
|
|
4
|
+
import { tok, OFFICE_TOKENS } from './chunk-MDW2Y5UN.js';
|
|
4
5
|
|
|
5
6
|
// src/chrome-controls.ts
|
|
6
|
-
var ICON = `svg { flex: none; width:
|
|
7
|
+
var ICON = `svg { flex: none; width: ${tok("--office-icon-size")}; height: ${tok("--office-icon-size")}; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")};
|
|
7
8
|
stroke-linecap: round; stroke-linejoin: round; }`;
|
|
8
9
|
function icon(doc, name) {
|
|
9
10
|
const svg = createIconSvg(doc);
|
|
@@ -18,31 +19,31 @@ var FOOTER_CSS = `
|
|
|
18
19
|
:host { display: block; flex: 1 1 auto; min-width: 0; }
|
|
19
20
|
:host([hidden]) { display: none !important; }
|
|
20
21
|
${ICON}
|
|
21
|
-
.footer { box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: flex-end; gap:
|
|
22
|
-
button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap:
|
|
23
|
-
min-width:
|
|
24
|
-
border-radius:
|
|
25
|
-
font: 500
|
|
26
|
-
button:hover:not(:disabled) { background:
|
|
27
|
-
button.primary { border-color:
|
|
28
|
-
color:
|
|
29
|
-
button.primary:hover:not(:disabled) { opacity: .9; background:
|
|
30
|
-
button.warning { border-color:
|
|
31
|
-
button.warning:hover:not(:disabled) { opacity: .9; background:
|
|
32
|
-
button.danger { border-color:
|
|
33
|
-
button.danger:hover:not(:disabled) { opacity: .9; background:
|
|
22
|
+
.footer { box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: ${tok("--office-space-2")}; }
|
|
23
|
+
button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: ${tok("--office-space-1-5")};
|
|
24
|
+
min-width: ${tok("--office-control-height")}; min-height: ${tok("--office-control-height-lg")}; padding: ${tok("--office-space-1-5")} ${tok("--office-space-3-5")}; border: ${tok("--office-border-width")} solid ${tok("--office-border")};
|
|
25
|
+
border-radius: ${tok("--office-radius-md")}; background: ${tok("--office-surface")}; color: ${tok("--office-foreground")};
|
|
26
|
+
font: 500 ${tok("--office-font-size")}/1.2 ${tok("--office-font")}; cursor: pointer; touch-action: manipulation; }
|
|
27
|
+
button:hover:not(:disabled) { background: ${tok("--office-selected")}; }
|
|
28
|
+
button.primary { border-color: ${tok("--office-accent")}; background: ${tok("--office-accent")};
|
|
29
|
+
color: ${tok("--office-accent-foreground")}; }
|
|
30
|
+
button.primary:hover:not(:disabled) { opacity: .9; background: ${tok("--office-accent")}; }
|
|
31
|
+
button.warning { border-color: ${tok("--office-warning")}; background: ${tok("--office-warning")}; color: ${tok("--office-warning-foreground")}; }
|
|
32
|
+
button.warning:hover:not(:disabled) { opacity: .9; background: ${tok("--office-warning")}; }
|
|
33
|
+
button.danger { border-color: ${tok("--office-danger")}; background: ${tok("--office-danger")}; color: ${tok("--office-danger-foreground")}; }
|
|
34
|
+
button.danger:hover:not(:disabled) { opacity: .9; background: ${tok("--office-danger")}; }
|
|
34
35
|
button.start { margin-right: auto; }
|
|
35
|
-
button.busy::before { content: ''; width:
|
|
36
|
-
border-radius: 50%; animation: office-footer-spin
|
|
36
|
+
button.busy::before { content: ''; width: ${tok("--office-icon-size-sm")}; height: ${tok("--office-icon-size-sm")}; border: ${tok("--office-border-width-thick")} solid currentColor; border-right-color: transparent;
|
|
37
|
+
border-radius: 50%; animation: office-footer-spin ${tok("--office-duration-spin")} linear infinite; }
|
|
37
38
|
@keyframes office-footer-spin { to { transform: rotate(360deg); } }
|
|
38
39
|
@media (prefers-reduced-motion: reduce) { button.busy::before { animation: none; } }
|
|
39
40
|
button:disabled { cursor: not-allowed; opacity: .55; }
|
|
40
|
-
button:focus-visible { outline:
|
|
41
|
-
@media (pointer: coarse), (max-width: 767px) { button { min-width:
|
|
41
|
+
button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: ${tok("--office-focus-offset")}; }
|
|
42
|
+
@media (pointer: coarse), (max-width: 767px) { button { min-width: ${tok("--office-target-size-touch")}; min-height: ${tok("--office-target-size-touch")}; } }
|
|
42
43
|
@media (forced-colors: active) {
|
|
43
44
|
button, button.primary, button.warning, button.danger { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
|
|
44
45
|
button:hover:not(:disabled) { background: Highlight; color: HighlightText; }
|
|
45
|
-
button.primary { border-width:
|
|
46
|
+
button.primary { border-width: ${tok("--office-border-width-thick")}; }
|
|
46
47
|
button:focus-visible { outline-color: Highlight; }
|
|
47
48
|
}
|
|
48
49
|
`;
|
|
@@ -134,24 +135,24 @@ var TOASTS_CSS = `
|
|
|
134
135
|
[hidden] { display: none !important; }
|
|
135
136
|
${ICON}
|
|
136
137
|
.header, .toast, .overflow { pointer-events: auto; }
|
|
137
|
-
.header { display: flex; align-items: center; justify-content: space-between; padding: 0
|
|
138
|
-
color:
|
|
139
|
-
.toast { box-sizing: border-box; display: flex; align-items: flex-start; gap:
|
|
140
|
-
border:
|
|
141
|
-
color:
|
|
142
|
-
font:
|
|
143
|
-
.toast svg { width:
|
|
144
|
-
.toast[data-severity="warning"] svg { color:
|
|
145
|
-
.toast[data-severity="info"] svg { color:
|
|
138
|
+
.header { display: flex; align-items: center; justify-content: space-between; padding: 0 ${tok("--office-space-1")};
|
|
139
|
+
color: ${tok("--office-muted-foreground")}; font: 600 ${tok("--office-font-size-xs")}/1.4 ${tok("--office-font")}; }
|
|
140
|
+
.toast { box-sizing: border-box; display: flex; align-items: flex-start; gap: ${tok("--office-space-2")}; padding: ${tok("--office-space-2")} ${tok("--office-space-2-5")}; margin-top: ${tok("--office-space-2")};
|
|
141
|
+
border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius-md")}; background: ${tok("--office-popover")};
|
|
142
|
+
color: ${tok("--office-foreground")}; box-shadow: ${tok("--office-shadow-lg")};
|
|
143
|
+
font: ${tok("--office-font-size-sm")}/1.4 ${tok("--office-font")}; }
|
|
144
|
+
.toast svg { width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; margin-top: ${tok("--office-space-px")}; }
|
|
145
|
+
.toast[data-severity="warning"] svg { color: ${tok("--office-warning")}; }
|
|
146
|
+
.toast[data-severity="info"] svg { color: ${tok("--office-info")}; }
|
|
146
147
|
.message { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
|
|
147
|
-
.overflow { margin:
|
|
148
|
+
.overflow { margin: ${tok("--office-space-2")} 0 0; text-align: center; color: ${tok("--office-muted-foreground")}; font: ${tok("--office-font-size-xs")} ${tok("--office-font")}; }
|
|
148
149
|
button { box-sizing: border-box; flex: none; display: inline-flex; align-items: center; justify-content: center;
|
|
149
|
-
min-width:
|
|
150
|
-
color:
|
|
151
|
-
button:hover { background:
|
|
152
|
-
.dismiss-all { font-weight: 500; text-decoration: underline; text-underline-offset:
|
|
153
|
-
button:focus-visible { outline:
|
|
154
|
-
@media (pointer: coarse) { button { min-width:
|
|
150
|
+
min-width: ${tok("--office-control-height")}; min-height: ${tok("--office-control-height")}; padding: ${tok("--office-space-0")} ${tok("--office-space-1")}; border: 0; border-radius: ${tok("--office-radius")}; background: transparent;
|
|
151
|
+
color: ${tok("--office-muted-foreground")}; font: inherit; cursor: pointer; touch-action: manipulation; }
|
|
152
|
+
button:hover { background: ${tok("--office-surface")}; color: ${tok("--office-foreground")}; }
|
|
153
|
+
.dismiss-all { font-weight: 500; text-decoration: underline; text-underline-offset: ${tok("--office-space-0")}; }
|
|
154
|
+
button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(${tok("--office-focus-offset")} / 2); }
|
|
155
|
+
@media (pointer: coarse) { button { min-width: ${tok("--office-target-size-touch")}; min-height: ${tok("--office-target-size-touch")}; } }
|
|
155
156
|
@media (forced-colors: active) {
|
|
156
157
|
.toast { border-color: CanvasText; background: Canvas; color: CanvasText; }
|
|
157
158
|
.toast svg, button { color: ButtonText; } button:hover { background: Highlight; color: HighlightText; }
|
|
@@ -254,26 +255,26 @@ var BANNER_CSS = `
|
|
|
254
255
|
:host { display: block; flex: none; }
|
|
255
256
|
:host([hidden]) { display: none !important; }
|
|
256
257
|
[hidden] { display: none !important; }
|
|
257
|
-
svg { flex: none; width:
|
|
258
|
-
stroke-linecap: round; stroke-linejoin: round; color:
|
|
259
|
-
.banner { box-sizing: border-box; display: flex; align-items: center; gap:
|
|
260
|
-
border-bottom:
|
|
261
|
-
color:
|
|
258
|
+
svg { flex: none; width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")};
|
|
259
|
+
stroke-linecap: round; stroke-linejoin: round; color: ${tok("--office-notice-accent")}; }
|
|
260
|
+
.banner { box-sizing: border-box; display: flex; align-items: center; gap: ${tok("--office-space-3")}; padding: ${tok("--office-space-1-5")} ${tok("--office-space-4")};
|
|
261
|
+
border-bottom: ${tok("--office-border-width")} solid ${tok("--office-notice-border")}; background: ${tok("--office-notice-background")};
|
|
262
|
+
color: ${tok("--office-notice-foreground")}; font: ${tok("--office-font-size-sm")}/1.4 ${tok("--office-font")}; }
|
|
262
263
|
.text { flex: 1 1 auto; min-width: 0; margin: 0; }
|
|
263
|
-
.form { display: flex; flex: none; align-items: center; gap:
|
|
264
|
-
.sr-only { position: absolute; width:
|
|
264
|
+
.form { display: flex; flex: none; align-items: center; gap: ${tok("--office-space-2")}; }
|
|
265
|
+
.sr-only { position: absolute; width: ${tok("--office-space-px")}; height: ${tok("--office-space-px")}; margin: calc(-1 * ${tok("--office-space-px")}); padding: 0; overflow: hidden;
|
|
265
266
|
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
|
|
266
267
|
button, input { font: inherit; }
|
|
267
|
-
button { box-sizing: border-box; flex: none; min-height:
|
|
268
|
-
border-radius:
|
|
269
|
-
button.primary { border-color:
|
|
270
|
-
button:hover { background:
|
|
268
|
+
button { box-sizing: border-box; flex: none; min-height: ${tok("--office-control-height")}; padding: ${tok("--office-space-1")} ${tok("--office-space-3")}; border: ${tok("--office-border-width")} solid transparent;
|
|
269
|
+
border-radius: ${tok("--office-radius")}; background: transparent; color: inherit; font-weight: 500; cursor: pointer; touch-action: manipulation; }
|
|
270
|
+
button.primary { border-color: color-mix(in srgb, ${tok("--office-notice-accent")} 50%, transparent); }
|
|
271
|
+
button:hover { background: color-mix(in srgb, ${tok("--office-notice-accent")} 15%, transparent); }
|
|
271
272
|
button:disabled { opacity: .6; cursor: not-allowed; }
|
|
272
|
-
button:focus-visible, input:focus-visible { outline:
|
|
273
|
-
input { box-sizing: border-box; min-height:
|
|
274
|
-
border-radius:
|
|
275
|
-
.error { flex: none; color:
|
|
276
|
-
@media (pointer: coarse) { button, input { min-height:
|
|
273
|
+
button:focus-visible, input:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(${tok("--office-focus-offset")} / 2); }
|
|
274
|
+
input { box-sizing: border-box; min-height: ${tok("--office-control-height")}; padding: ${tok("--office-space-1")} ${tok("--office-space-2")}; border: ${tok("--office-border-width")} solid color-mix(in srgb, ${tok("--office-notice-accent")} 40%, transparent);
|
|
275
|
+
border-radius: ${tok("--office-radius")}; background: ${tok("--office-background")}; color: ${tok("--office-foreground")}; }
|
|
276
|
+
.error { flex: none; color: ${tok("--office-danger")}; }
|
|
277
|
+
@media (pointer: coarse) { button, input { min-height: ${tok("--office-target-size-touch")}; min-width: ${tok("--office-target-size-touch")}; } }
|
|
277
278
|
@media (forced-colors: active) {
|
|
278
279
|
.banner { border-bottom-color: CanvasText; background: Canvas; color: CanvasText; }
|
|
279
280
|
svg, .error { color: CanvasText; }
|
|
@@ -409,14 +410,14 @@ var defineReadOnlyBanner = definer("office-ui-read-only-banner", () => {
|
|
|
409
410
|
var PASTE_CSS = `
|
|
410
411
|
:host { position: fixed; z-index: 1100; display: block; }
|
|
411
412
|
:host([hidden]) { display: none !important; }
|
|
412
|
-
.toolbar { box-sizing: border-box; display: flex; align-items: center; gap:
|
|
413
|
-
border:
|
|
414
|
-
box-shadow:
|
|
415
|
-
button { box-sizing: border-box; min-height:
|
|
416
|
-
color:
|
|
417
|
-
button:hover { background:
|
|
418
|
-
button:focus-visible { outline:
|
|
419
|
-
@media (pointer: coarse) { button { min-height:
|
|
413
|
+
.toolbar { box-sizing: border-box; display: flex; align-items: center; gap: ${tok("--office-space-0")}; padding: ${tok("--office-space-1")};
|
|
414
|
+
border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius")}; background: ${tok("--office-popover")};
|
|
415
|
+
box-shadow: ${tok("--office-shadow-lg")}; font: ${tok("--office-font-size-xs")}/1.2 ${tok("--office-font")}; }
|
|
416
|
+
button { box-sizing: border-box; min-height: ${tok("--office-control-height")}; padding: ${tok("--office-space-1")} ${tok("--office-space-2")}; border: 0; border-radius: ${tok("--office-radius")}; background: transparent;
|
|
417
|
+
color: ${tok("--office-foreground")}; font: inherit; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
|
|
418
|
+
button:hover { background: ${tok("--office-surface")}; }
|
|
419
|
+
button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(${tok("--office-focus-offset")} / 2); }
|
|
420
|
+
@media (pointer: coarse) { button { min-height: ${tok("--office-target-size-touch")}; min-width: ${tok("--office-target-size-touch")}; } }
|
|
420
421
|
@media (forced-colors: active) {
|
|
421
422
|
.toolbar { border-color: CanvasText; background: Canvas; }
|
|
422
423
|
button { color: ButtonText; } button:hover { background: Highlight; color: HighlightText; }
|
|
@@ -474,8 +475,8 @@ var definePasteOptions = definer("office-ui-paste-options", () => {
|
|
|
474
475
|
render() {
|
|
475
476
|
const s = this.model;
|
|
476
477
|
this.toolbar.setAttribute("aria-label", s.label ?? "Paste Options");
|
|
477
|
-
this.style.left =
|
|
478
|
-
this.style.top =
|
|
478
|
+
this.style.left = `calc(${s.left}px + ${tok("--office-space-1")})`;
|
|
479
|
+
this.style.top = `calc(${s.top}px + ${tok("--office-space-1")})`;
|
|
479
480
|
const doc = this.ownerDocument;
|
|
480
481
|
const existing = [...this.toolbar.querySelectorAll("button")];
|
|
481
482
|
const same = existing.length === s.options.length && existing.every((button, i) => button.dataset.format === s.options[i].id);
|
|
@@ -504,19 +505,19 @@ var definePasteOptions = definer("office-ui-paste-options", () => {
|
|
|
504
505
|
|
|
505
506
|
// src/radio.ts
|
|
506
507
|
var CSS = `
|
|
507
|
-
:host { display: inline-grid; box-sizing: border-box; width:
|
|
508
|
-
height:
|
|
509
|
-
border:
|
|
510
|
-
background:
|
|
511
|
-
:host([checked]) { border-color:
|
|
512
|
-
:host(:focus-visible) { outline:
|
|
508
|
+
:host { display: inline-grid; box-sizing: border-box; width: ${tok("--office-checkbox-size")};
|
|
509
|
+
height: ${tok("--office-checkbox-size")}; flex: none; place-items: center;
|
|
510
|
+
border: ${tok("--office-border-width")} solid ${tok("--office-checkbox-border")}; border-radius: 50%;
|
|
511
|
+
background: ${tok("--office-checkbox-background")}; cursor: pointer; vertical-align: middle; }
|
|
512
|
+
:host([checked]) { border-color: ${tok("--office-checkbox-accent")}; }
|
|
513
|
+
:host(:focus-visible) { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: ${tok("--office-focus-offset")}; }
|
|
513
514
|
:host([disabled]) { opacity: .5; cursor: not-allowed; }
|
|
514
|
-
.dot { display: none; width:
|
|
515
|
-
border-radius: 50%; background:
|
|
515
|
+
.dot { display: none; width: ${tok("--office-radio-dot-size")}; height: ${tok("--office-radio-dot-size")};
|
|
516
|
+
border-radius: 50%; background: ${tok("--office-checkbox-accent")}; }
|
|
516
517
|
:host([checked]) .dot { display: block; }
|
|
517
518
|
@media (pointer: coarse), (max-width: 767px) {
|
|
518
|
-
:host { width:
|
|
519
|
-
.dot { width:
|
|
519
|
+
:host { width: ${tok("--office-checkbox-size-touch")}; height: ${tok("--office-checkbox-size-touch")}; }
|
|
520
|
+
.dot { width: ${tok("--office-radio-dot-size-touch")}; height: ${tok("--office-radio-dot-size-touch")}; }
|
|
520
521
|
}
|
|
521
522
|
@media (forced-colors: active) {
|
|
522
523
|
:host { border-color: CanvasText; background: Canvas; forced-color-adjust: auto; }
|
|
@@ -691,10 +692,10 @@ var defineRadio = definer("office-ui-radio", () => {
|
|
|
691
692
|
// src/ribbon-toggle.ts
|
|
692
693
|
var CSS2 = `
|
|
693
694
|
:host { display: block; }
|
|
694
|
-
label { display: flex; align-items: center; gap:
|
|
695
|
-
color:
|
|
696
|
-
:host([disabled]) label { color:
|
|
697
|
-
@media (pointer: coarse), (max-width: 767px) { label { min-height:
|
|
695
|
+
label { display: flex; align-items: center; gap: ${tok("--office-space-1")}; min-height: ${tok("--office-ribbon-row-height")}; padding: 0 ${tok("--office-space-1")};
|
|
696
|
+
color: ${tok("--office-foreground")}; font: inherit; font-size: ${tok("--office-font-size-sm")}; white-space: nowrap; cursor: pointer; }
|
|
697
|
+
:host([disabled]) label { color: ${tok("--office-muted-foreground")}; cursor: not-allowed; }
|
|
698
|
+
@media (pointer: coarse), (max-width: 767px) { label { min-height: ${tok("--office-target-size-touch")}; font-size: ${tok("--office-font-size-sm")}; } }
|
|
698
699
|
`;
|
|
699
700
|
var defineRibbonToggle = definer("office-ui-ribbon-toggle", () => {
|
|
700
701
|
class OfficeUiRibbonToggle extends HTMLElement {
|
|
@@ -764,26 +765,26 @@ var defineRibbonToggle = definer("office-ui-ribbon-toggle", () => {
|
|
|
764
765
|
// src/search-field.ts
|
|
765
766
|
var SVG_NS = "http://www.w3.org/2000/svg";
|
|
766
767
|
var CSS3 = `
|
|
767
|
-
:host { display: flex; align-items: center; gap:
|
|
768
|
-
height:
|
|
769
|
-
border:
|
|
770
|
-
border-radius:
|
|
771
|
-
color:
|
|
772
|
-
:host(:focus-within) { border-color:
|
|
773
|
-
:host([variant="titlebar"]) { height:
|
|
774
|
-
border-color:
|
|
775
|
-
:host([variant="titlebar"]:focus-within) { color:
|
|
768
|
+
:host { display: flex; align-items: center; gap: ${tok("--office-space-2")}; box-sizing: border-box; width: 100%;
|
|
769
|
+
height: ${tok("--office-field-height-lg")}; padding: 0 ${tok("--office-space-3")};
|
|
770
|
+
border: ${tok("--office-border-width")} solid ${tok("--office-field-border")};
|
|
771
|
+
border-radius: ${tok("--office-field-radius")}; background: ${tok("--office-field-background")};
|
|
772
|
+
color: ${tok("--office-field-placeholder")}; font: inherit; }
|
|
773
|
+
:host(:focus-within) { border-color: ${tok("--office-field-border-focus")}; }
|
|
774
|
+
:host([variant="titlebar"]) { height: ${tok("--office-field-height")}; gap: ${tok("--office-space-1-5")}; padding-inline: ${tok("--office-space-3-5")};
|
|
775
|
+
border-color: ${tok("--office-border")}; border-radius: ${tok("--office-radius-md")}; background: ${tok("--office-background")}; }
|
|
776
|
+
:host([variant="titlebar"]:focus-within) { color: ${tok("--office-foreground")}; }
|
|
776
777
|
:host([disabled]) { opacity: .5; cursor: not-allowed; }
|
|
777
|
-
svg { width:
|
|
778
|
-
:host([variant="titlebar"]) svg { width:
|
|
778
|
+
svg { width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; flex: none; }
|
|
779
|
+
:host([variant="titlebar"]) svg { width: ${tok("--office-icon-size")}; height: ${tok("--office-icon-size")}; }
|
|
779
780
|
input { min-width: 0; width: 100%; height: 100%; flex: 1; padding: 0; border: 0; outline: 0; background: transparent;
|
|
780
|
-
color:
|
|
781
|
-
:host([variant="titlebar"]) input { font-size:
|
|
782
|
-
input::placeholder { color:
|
|
781
|
+
color: ${tok("--office-field-foreground")}; font: inherit; font-size: ${tok("--office-font-size")}; }
|
|
782
|
+
:host([variant="titlebar"]) input { font-size: ${tok("--office-font-size-xs")}; color: ${tok("--office-foreground")}; }
|
|
783
|
+
input::placeholder { color: ${tok("--office-field-placeholder")}; opacity: .8; }
|
|
783
784
|
input::-webkit-search-cancel-button { display: none; }
|
|
784
785
|
@media (forced-colors: active) {
|
|
785
786
|
:host { border-color: CanvasText; background: Canvas; color: CanvasText; }
|
|
786
|
-
:host(:focus-within) { outline:
|
|
787
|
+
:host(:focus-within) { outline: ${tok("--office-focus-width")} solid Highlight; outline-offset: ${tok("--office-focus-offset")}; }
|
|
787
788
|
input { color: CanvasText; }
|
|
788
789
|
}
|
|
789
790
|
`;
|
|
@@ -874,31 +875,31 @@ var defineSearchField = definer("office-ui-search", () => {
|
|
|
874
875
|
// src/backstage.ts
|
|
875
876
|
var CSS4 = `
|
|
876
877
|
:host { position: absolute; inset: 0; z-index: 30; display: none; min-width: 0;
|
|
877
|
-
background:
|
|
878
|
-
font-family:
|
|
878
|
+
background: ${tok("--office-background")}; color: ${tok("--office-foreground")};
|
|
879
|
+
font-family: ${tok("--office-font")}; }
|
|
879
880
|
:host([open]) { display: block; }
|
|
880
881
|
.frame { display: flex; height: 100%; min-width: 0; }
|
|
881
|
-
nav { display: flex; flex: 0 0
|
|
882
|
-
background:
|
|
882
|
+
nav { display: flex; flex: 0 0 ${tok("--office-backstage-nav-width")}; flex-direction: column; padding: ${tok("--office-space-3")} 0; overflow: auto;
|
|
883
|
+
background: ${tok("--office-backstage-nav-background")}; color: ${tok("--office-backstage-nav-foreground")}; }
|
|
883
884
|
nav button { border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
|
|
884
|
-
.back { width:
|
|
885
|
-
border-radius: 50%; font-size:
|
|
886
|
-
.item { min-height:
|
|
887
|
-
.item:hover:enabled, .item[aria-current="page"] { background:
|
|
885
|
+
.back { width: ${tok("--office-backstage-back-size")}; min-height: ${tok("--office-backstage-back-size")}; margin: 0 0 ${tok("--office-space-3")} ${tok("--office-space-4")}; padding: 0; border: calc(${tok("--office-border-width-thick")} * .75) solid currentColor;
|
|
886
|
+
border-radius: 50%; font-size: ${tok("--office-font-size-xl")}; text-align: center; }
|
|
887
|
+
.item { min-height: ${tok("--office-backstage-item-height")}; padding: ${tok("--office-space-1-5")} ${tok("--office-space-6")}; font-size: ${tok("--office-font-size-md")}; }
|
|
888
|
+
.item:hover:enabled, .item[aria-current="page"] { background: ${tok("--office-backstage-item-hover")}; }
|
|
888
889
|
.item:disabled { opacity: .55; cursor: default; }
|
|
889
|
-
nav button:focus-visible { outline:
|
|
890
|
+
nav button:focus-visible { outline: ${tok("--office-focus-width")} solid currentColor; outline-offset: calc(-1 * ${tok("--office-focus-width")}); }
|
|
890
891
|
.items { display: flex; flex-direction: column; }
|
|
891
|
-
.footer { display: flex; flex-direction: column; margin-top: auto; padding-top:
|
|
892
|
-
.body { flex: 1; min-width: 0; overflow: auto; padding:
|
|
892
|
+
.footer { display: flex; flex-direction: column; margin-top: auto; padding-top: ${tok("--office-space-4")}; }
|
|
893
|
+
.body { flex: 1; min-width: 0; overflow: auto; padding: ${tok("--office-backstage-padding")}; }
|
|
893
894
|
@media (max-width: 760px) {
|
|
894
895
|
.frame { flex-direction: column; }
|
|
895
|
-
nav { flex: none; flex-direction: row; flex-wrap: wrap; padding:
|
|
896
|
-
.back { margin:
|
|
897
|
-
.item { min-height:
|
|
896
|
+
nav { flex: none; flex-direction: row; flex-wrap: wrap; padding: ${tok("--office-space-1-5")}; }
|
|
897
|
+
.back { margin: ${tok("--office-space-1")}; }
|
|
898
|
+
.item { min-height: ${tok("--office-target-size-touch")}; padding: ${tok("--office-space-1-5")} ${tok("--office-space-3")}; }
|
|
898
899
|
.items, .footer { flex-direction: row; flex-wrap: wrap; margin-top: 0; padding-top: 0; }
|
|
899
|
-
.body { padding:
|
|
900
|
+
.body { padding: ${tok("--office-space-4")}; }
|
|
900
901
|
}
|
|
901
|
-
@media (forced-colors: active) { nav { border-inline-end:
|
|
902
|
+
@media (forced-colors: active) { nav { border-inline-end: ${tok("--office-border-width")} solid CanvasText; } .item[aria-current="page"] { outline: ${tok("--office-focus-width")} solid Highlight; } }
|
|
902
903
|
`;
|
|
903
904
|
var defineBackstage = definer("office-ui-backstage", () => {
|
|
904
905
|
class OfficeUiBackstage extends HTMLElement {
|
|
@@ -1046,22 +1047,22 @@ var defineBackstage = definer("office-ui-backstage", () => {
|
|
|
1046
1047
|
|
|
1047
1048
|
// src/find-bar.ts
|
|
1048
1049
|
var CSS5 = `
|
|
1049
|
-
:host { display: flex; align-items: center; gap:
|
|
1050
|
-
border-bottom:
|
|
1051
|
-
color:
|
|
1050
|
+
:host { display: flex; align-items: center; gap: ${tok("--office-space-2")}; min-height: ${tok("--office-find-bar-height")}; padding: ${tok("--office-space-1")} ${tok("--office-space-2")} ${tok("--office-space-1")} ${tok("--office-space-3")};
|
|
1051
|
+
border-bottom: ${tok("--office-border-width")} solid ${tok("--office-border")}; background: ${tok("--office-surface")};
|
|
1052
|
+
color: ${tok("--office-foreground")}; font: ${tok("--office-font-size-sm")} ${tok("--office-font")}; }
|
|
1052
1053
|
:host(:not([open])) { display: none; }
|
|
1053
|
-
[role="search"] { display: flex; flex: 1; align-items: center; gap:
|
|
1054
|
-
label { display: flex; flex: 1; align-items: center; gap:
|
|
1055
|
-
input { flex: 1; min-width: 0; min-height:
|
|
1056
|
-
border:
|
|
1057
|
-
button { min-height:
|
|
1058
|
-
border:
|
|
1054
|
+
[role="search"] { display: flex; flex: 1; align-items: center; gap: ${tok("--office-space-1")}; min-width: 0; max-width: ${tok("--office-find-max-width")}; }
|
|
1055
|
+
label { display: flex; flex: 1; align-items: center; gap: ${tok("--office-space-1-5")}; min-width: 0; }
|
|
1056
|
+
input { flex: 1; min-width: 0; min-height: ${tok("--office-input-height")}; padding: ${tok("--office-space-0")} ${tok("--office-space-1-5")}; font: inherit; color: inherit;
|
|
1057
|
+
border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius-sm")}; background: ${tok("--office-background")}; }
|
|
1058
|
+
button { min-height: ${tok("--office-input-height")}; padding: ${tok("--office-space-0")} ${tok("--office-space-2")}; font: inherit; color: inherit; cursor: pointer;
|
|
1059
|
+
border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius-sm")}; background: ${tok("--office-background")}; }
|
|
1059
1060
|
button:disabled { opacity: .5; cursor: default; }
|
|
1060
1061
|
.status { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
|
|
1061
|
-
color:
|
|
1062
|
-
.close { margin-inline-start: auto; width:
|
|
1063
|
-
background: transparent; font-size:
|
|
1064
|
-
input:focus-visible, button:focus-visible { outline:
|
|
1062
|
+
color: ${tok("--office-muted-foreground")}; }
|
|
1063
|
+
.close { margin-inline-start: auto; width: ${tok("--office-target-size")}; padding: 0; border-color: transparent;
|
|
1064
|
+
background: transparent; font-size: ${tok("--office-font-size-xl")}; line-height: 1; }
|
|
1065
|
+
input:focus-visible, button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(${tok("--office-focus-offset")} / 2); }
|
|
1065
1066
|
@media (max-width: 760px) { :host { flex-wrap: wrap; } [role="search"] { flex-wrap: wrap; } }
|
|
1066
1067
|
`;
|
|
1067
1068
|
var defineFindBar = definer("office-ui-find-bar", () => {
|
|
@@ -1206,19 +1207,19 @@ var defineFindBar = definer("office-ui-find-bar", () => {
|
|
|
1206
1207
|
|
|
1207
1208
|
// src/print-preview.ts
|
|
1208
1209
|
var CSS6 = `
|
|
1209
|
-
:host { display: block; max-width:
|
|
1210
|
-
color:
|
|
1211
|
-
.sheet { padding:
|
|
1212
|
-
box-shadow:
|
|
1210
|
+
:host { display: block; max-width: ${tok("--office-print-preview-width")}; font: ${tok("--office-font-size-sm")} ${tok("--office-font")};
|
|
1211
|
+
color: ${tok("--office-foreground")}; }
|
|
1212
|
+
.sheet { padding: ${tok("--office-space-3")}; border: ${tok("--office-border-width")} solid ${tok("--office-border")}; background: ${tok("--office-paper")};
|
|
1213
|
+
box-shadow: ${tok("--office-shadow-sm")}; }
|
|
1213
1214
|
.sheet > * { display: block; width: 100%; height: auto; }
|
|
1214
|
-
.empty { color:
|
|
1215
|
-
.nav { display: flex; align-items: center; justify-content: center; gap:
|
|
1215
|
+
.empty { color: ${tok("--office-muted-foreground")}; }
|
|
1216
|
+
.nav { display: flex; align-items: center; justify-content: center; gap: ${tok("--office-space-2")}; margin-top: ${tok("--office-space-2")}; }
|
|
1216
1217
|
.nav[hidden] { display: none; }
|
|
1217
|
-
button { min-width:
|
|
1218
|
-
color: inherit; border:
|
|
1219
|
-
background:
|
|
1218
|
+
button { min-width: ${tok("--office-target-size")}; min-height: ${tok("--office-target-size")}; font: inherit;
|
|
1219
|
+
color: inherit; border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius-sm")};
|
|
1220
|
+
background: ${tok("--office-background")}; cursor: pointer; }
|
|
1220
1221
|
button:disabled { opacity: .5; cursor: default; }
|
|
1221
|
-
button:focus-visible { outline:
|
|
1222
|
+
button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(${tok("--office-focus-offset")} / 2); }
|
|
1222
1223
|
`;
|
|
1223
1224
|
var definePrintPreview = definer("office-ui-print-preview", () => {
|
|
1224
1225
|
class OfficeUiPrintPreview extends HTMLElement {
|
|
@@ -1315,28 +1316,28 @@ var definePrintPreview = definer("office-ui-print-preview", () => {
|
|
|
1315
1316
|
// src/ribbon-tabs.ts
|
|
1316
1317
|
var CSS7 = `
|
|
1317
1318
|
:host { display: block; min-width: 0; }
|
|
1318
|
-
.head { display: flex; align-items: stretch; min-width: 0; border-bottom:
|
|
1319
|
-
.file { flex: none; min-height:
|
|
1320
|
-
border-radius: 0; background:
|
|
1321
|
-
font: inherit; font-size:
|
|
1322
|
-
.file:hover { background:
|
|
1319
|
+
.head { display: flex; align-items: stretch; min-width: 0; border-bottom: ${tok("--office-border-width")} solid ${tok("--office-border")}; }
|
|
1320
|
+
.file { flex: none; min-height: ${tok("--office-ribbon-tab-height")}; margin: 0 ${tok("--office-space-1")} 0 0; padding: ${tok("--office-space-1-5")} ${tok("--office-space-4")}; border: 0;
|
|
1321
|
+
border-radius: 0; background: ${tok("--office-accent")}; color: ${tok("--office-accent-foreground")};
|
|
1322
|
+
font: inherit; font-size: ${tok("--office-font-size")}; cursor: pointer; }
|
|
1323
|
+
.file:hover { background: ${tok("--office-accent-hover")}; }
|
|
1323
1324
|
.file[hidden] { display: none; }
|
|
1324
1325
|
[role="tablist"] { display: flex; flex: 0 1 auto; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
|
|
1325
|
-
[role="tab"] { position: relative; flex: none; min-height:
|
|
1326
|
-
border-radius: 0; background: transparent; color:
|
|
1326
|
+
[role="tab"] { position: relative; flex: none; min-height: ${tok("--office-ribbon-tab-height")}; padding: ${tok("--office-space-1-5")} ${tok("--office-space-3")}; border: 0;
|
|
1327
|
+
border-radius: 0; background: transparent; color: ${tok("--office-muted-foreground")}; font: inherit; font-size: ${tok("--office-font-size")};
|
|
1327
1328
|
cursor: pointer; }
|
|
1328
|
-
[role="tab"]:hover { color:
|
|
1329
|
-
[role="tab"][aria-selected="true"] { color:
|
|
1330
|
-
[role="tab"][aria-selected="true"]::after { content: ""; position: absolute; inset: auto 0 0; height:
|
|
1331
|
-
background:
|
|
1332
|
-
.file:focus-visible, [role="tab"]:focus-visible { outline:
|
|
1329
|
+
[role="tab"]:hover { color: ${tok("--office-foreground")}; background: ${tok("--office-surface")}; }
|
|
1330
|
+
[role="tab"][aria-selected="true"] { color: ${tok("--office-accent")}; }
|
|
1331
|
+
[role="tab"][aria-selected="true"]::after { content: ""; position: absolute; inset: auto 0 0; height: ${tok("--office-tab-indicator-width")};
|
|
1332
|
+
background: ${tok("--office-accent")}; }
|
|
1333
|
+
.file:focus-visible, [role="tab"]:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(-1 * ${tok("--office-focus-width")}); }
|
|
1333
1334
|
::slotted([slot="search"]) { align-self: center; }
|
|
1334
1335
|
@media (max-width: 760px), (pointer: coarse) {
|
|
1335
|
-
.file, [role="tab"] { min-height:
|
|
1336
|
-
.file { min-width:
|
|
1336
|
+
.file, [role="tab"] { min-height: ${tok("--office-target-size-touch")}; }
|
|
1337
|
+
.file { min-width: ${tok("--office-ribbon-file-min-width")}; }
|
|
1337
1338
|
}
|
|
1338
1339
|
@media (forced-colors: active) {
|
|
1339
|
-
.file { border:
|
|
1340
|
+
.file { border: ${tok("--office-border-width")} solid ButtonText; }
|
|
1340
1341
|
[role="tab"][aria-selected="true"]::after { background: Highlight; }
|
|
1341
1342
|
}
|
|
1342
1343
|
`;
|
|
@@ -1480,10 +1481,11 @@ var defineRibbon = definer("office-ui-ribbon", () => {
|
|
|
1480
1481
|
|
|
1481
1482
|
// src/ruler.ts
|
|
1482
1483
|
var CSS8 = `
|
|
1483
|
-
:host { display: block; box-sizing: border-box; background:
|
|
1484
|
-
color:
|
|
1485
|
-
:
|
|
1486
|
-
:host([orientation="vertical"]) {
|
|
1484
|
+
:host { display: block; box-sizing: border-box; background: ${tok("--office-background")};
|
|
1485
|
+
color: ${tok("--office-muted-foreground")}; overflow: hidden;
|
|
1486
|
+
font-size: ${tok("--office-font-size-3xs")}; font-family: ${tok("--office-font")}; }
|
|
1487
|
+
:host(:not([orientation="vertical"])) { height: ${tok("--office-ruler-size")}; border-bottom: ${tok("--office-border-width")} solid ${tok("--office-border")}; }
|
|
1488
|
+
:host([orientation="vertical"]) { width: ${tok("--office-ruler-size")}; border-inline-end: ${tok("--office-border-width")} solid ${tok("--office-border")}; }
|
|
1487
1489
|
canvas { display: block; width: 100%; height: 100%; }
|
|
1488
1490
|
`;
|
|
1489
1491
|
function rulerDivisions(unitPixels) {
|
|
@@ -1534,7 +1536,7 @@ var defineRuler = definer("office-ui-ruler", () => {
|
|
|
1534
1536
|
const reverse = this.getAttribute("direction") === "reverse";
|
|
1535
1537
|
const box = this.getBoundingClientRect();
|
|
1536
1538
|
const length = vertical ? box.height : box.width;
|
|
1537
|
-
const thickness = (vertical ? box.width : box.height) ||
|
|
1539
|
+
const thickness = (vertical ? box.width : box.height) || parseFloat(OFFICE_TOKENS["--office-ruler-size"]);
|
|
1538
1540
|
const ratio = view?.devicePixelRatio ?? 1;
|
|
1539
1541
|
const canvas = this.#canvas;
|
|
1540
1542
|
canvas.width = Math.max(1, Math.round((vertical ? thickness : length) * ratio));
|
|
@@ -1542,11 +1544,12 @@ var defineRuler = definer("office-ui-ruler", () => {
|
|
|
1542
1544
|
const context = canvas.getContext?.("2d");
|
|
1543
1545
|
if (!context || !length) return;
|
|
1544
1546
|
context.scale(ratio, ratio);
|
|
1545
|
-
const
|
|
1547
|
+
const style = view?.getComputedStyle(this);
|
|
1548
|
+
const ink = style?.color || OFFICE_TOKENS["--office-muted-foreground"];
|
|
1546
1549
|
context.strokeStyle = ink;
|
|
1547
1550
|
context.fillStyle = ink;
|
|
1548
1551
|
context.lineWidth = 1;
|
|
1549
|
-
context.font =
|
|
1552
|
+
context.font = `${style?.fontSize || OFFICE_TOKENS["--office-font-size-3xs"]} ${style?.fontFamily || OFFICE_TOKENS["--office-font"]}`;
|
|
1550
1553
|
const origin = this.#number("origin", 0);
|
|
1551
1554
|
const unit = Math.max(1, this.#number("scale", 96));
|
|
1552
1555
|
const divisions = rulerDivisions(unit);
|
|
@@ -1635,22 +1638,22 @@ function clearOfficeProfile(storage = defaultStorage(), key = OFFICE_PROFILE_STO
|
|
|
1635
1638
|
}
|
|
1636
1639
|
}
|
|
1637
1640
|
var CSS9 = `
|
|
1638
|
-
:host { display: block; font-family:
|
|
1639
|
-
h2 { margin: 0 0
|
|
1640
|
-
.who { display: flex; align-items: center; gap:
|
|
1641
|
-
.avatar { display: grid; place-items: center; width:
|
|
1642
|
-
color:
|
|
1643
|
-
.name { font-size:
|
|
1644
|
-
.note { margin:
|
|
1645
|
-
label { display: grid; gap:
|
|
1646
|
-
input { min-height:
|
|
1647
|
-
border:
|
|
1648
|
-
.swatches { display: flex; flex-wrap: wrap; gap:
|
|
1649
|
-
.swatches button { width:
|
|
1650
|
-
border:
|
|
1651
|
-
.swatches button[aria-checked="true"] { border-color:
|
|
1652
|
-
box-shadow: inset 0 0 0
|
|
1653
|
-
.swatches button:focus-visible, input:focus-visible { outline:
|
|
1641
|
+
:host { display: block; font-family: ${tok("--office-font")}; font-size: ${tok("--office-font-size")}; }
|
|
1642
|
+
h2 { margin: 0 0 ${tok("--office-space-3")}; font-size: ${tok("--office-font-size-lg")}; font-weight: 600; }
|
|
1643
|
+
.who { display: flex; align-items: center; gap: ${tok("--office-space-3")}; margin-bottom: ${tok("--office-space-3")}; }
|
|
1644
|
+
.avatar { display: grid; place-items: center; width: ${tok("--office-avatar-size")}; height: ${tok("--office-avatar-size")}; border-radius: 50%;
|
|
1645
|
+
color: ${tok("--office-accent-foreground")}; font-weight: ${tok("--office-font-weight-bold")}; font-size: ${tok("--office-font-size-xl")}; flex: none; }
|
|
1646
|
+
.name { font-size: ${tok("--office-font-size-md")}; font-weight: 600; }
|
|
1647
|
+
.note { margin: ${tok("--office-space-0")} 0 0; color: ${tok("--office-muted-foreground")}; font-size: ${tok("--office-font-size-sm")}; }
|
|
1648
|
+
label { display: grid; gap: ${tok("--office-space-1")}; max-width: ${tok("--office-account-field-width")}; margin-bottom: ${tok("--office-space-3")}; }
|
|
1649
|
+
input { min-height: ${tok("--office-field-height")}; box-sizing: border-box; padding: ${tok("--office-space-0")} ${tok("--office-space-1-5")}; font: inherit; color: inherit;
|
|
1650
|
+
border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius-sm")}; background: ${tok("--office-background")}; }
|
|
1651
|
+
.swatches { display: flex; flex-wrap: wrap; gap: ${tok("--office-space-1-5")}; margin: ${tok("--office-space-1")} 0 ${tok("--office-space-3")}; }
|
|
1652
|
+
.swatches button { width: ${tok("--office-target-size")}; height: ${tok("--office-target-size")}; padding: 0;
|
|
1653
|
+
border: ${tok("--office-border-width-thick")} solid transparent; border-radius: 50%; cursor: pointer; }
|
|
1654
|
+
.swatches button[aria-checked="true"] { border-color: ${tok("--office-foreground")};
|
|
1655
|
+
box-shadow: inset 0 0 0 ${tok("--office-border-width-thick")} ${tok("--office-background")}; }
|
|
1656
|
+
.swatches button:focus-visible, input:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(${tok("--office-focus-offset")} / 2); }
|
|
1654
1657
|
@media (forced-colors: active) { .swatches button { forced-color-adjust: none; } }
|
|
1655
1658
|
`;
|
|
1656
1659
|
var defineAccount = definer("office-ui-account", () => {
|
|
@@ -1768,17 +1771,17 @@ var defineAccount = definer("office-ui-account", () => {
|
|
|
1768
1771
|
var CSS10 = `
|
|
1769
1772
|
:host { display: inline-flex; vertical-align: middle; }
|
|
1770
1773
|
button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
|
|
1771
|
-
gap:
|
|
1772
|
-
padding: 0
|
|
1773
|
-
background: transparent; color:
|
|
1774
|
+
gap: ${tok("--office-space-1-5")}; min-width: ${tok("--office-target-size")}; min-height: ${tok("--office-target-size")};
|
|
1775
|
+
padding: 0 ${tok("--office-space-2")}; border: ${tok("--office-border-width")} solid transparent; border-radius: ${tok("--office-radius")};
|
|
1776
|
+
background: transparent; color: ${tok("--office-foreground")}; font: inherit; font-size: ${tok("--office-font-size-sm")};
|
|
1774
1777
|
cursor: pointer; white-space: nowrap; }
|
|
1775
|
-
:host([variant="stacked"]) button { flex-direction: column; padding:
|
|
1776
|
-
button:hover:not(:disabled) { background:
|
|
1777
|
-
button:focus-visible { outline:
|
|
1778
|
-
button[aria-pressed="true"], button[aria-expanded="true"] { border-color:
|
|
1779
|
-
background:
|
|
1778
|
+
:host([variant="stacked"]) button { flex-direction: column; padding: ${tok("--office-space-1")} ${tok("--office-space-2")}; }
|
|
1779
|
+
button:hover:not(:disabled) { background: ${tok("--office-surface")}; }
|
|
1780
|
+
button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(${tok("--office-focus-offset")} / 2); }
|
|
1781
|
+
button[aria-pressed="true"], button[aria-expanded="true"] { border-color: ${tok("--office-accent")};
|
|
1782
|
+
background: ${tok("--office-surface")}; }
|
|
1780
1783
|
button:disabled { opacity: .5; cursor: not-allowed; }
|
|
1781
|
-
svg { width:
|
|
1784
|
+
svg { width: ${tok("--office-icon-size-ml")}; height: ${tok("--office-icon-size-ml")}; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")};
|
|
1782
1785
|
stroke-linecap: round; stroke-linejoin: round; }
|
|
1783
1786
|
svg:not([data-painted]) { display: none; }
|
|
1784
1787
|
@media (forced-colors: active) {
|
|
@@ -1866,33 +1869,44 @@ var defineButton = definer("office-ui-button", () => {
|
|
|
1866
1869
|
// src/checkable.ts
|
|
1867
1870
|
var CHECK_SVG = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 8 3.2 3.2L13 4.5"/></svg>';
|
|
1868
1871
|
var CHECKBOX_CSS = `
|
|
1869
|
-
:host { display: inline-grid; box-sizing: border-box; width:
|
|
1870
|
-
place-items: center; border:
|
|
1871
|
-
|
|
1872
|
-
cursor: pointer; vertical-align: middle; }
|
|
1873
|
-
:host([checked]) { border-color:
|
|
1874
|
-
:
|
|
1872
|
+
:host { display: inline-grid; box-sizing: border-box; width: ${tok("--office-checkbox-size")}; height: ${tok("--office-checkbox-size")};
|
|
1873
|
+
flex: none; place-items: center; border: ${tok("--office-border-width")} solid ${tok("--office-checkbox-border")};
|
|
1874
|
+
border-radius: ${tok("--office-checkbox-radius")}; background: ${tok("--office-checkbox-background")};
|
|
1875
|
+
color: ${tok("--office-checkbox-accent-foreground")}; cursor: pointer; vertical-align: middle; }
|
|
1876
|
+
:host([checked]) { border-color: ${tok("--office-checkbox-accent")};
|
|
1877
|
+
background: ${tok("--office-checkbox-accent")}; }
|
|
1878
|
+
:host(:focus-visible) { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: ${tok("--office-focus-offset")}; }
|
|
1875
1879
|
:host([disabled]) { opacity: .5; cursor: not-allowed; }
|
|
1876
|
-
svg { display: none; width:
|
|
1880
|
+
svg { display: none; width: ${tok("--office-icon-size-sm")}; height: ${tok("--office-icon-size-sm")}; }
|
|
1877
1881
|
:host([checked]) svg { display: block; }
|
|
1878
|
-
@media (pointer: coarse), (max-width: 767px) {
|
|
1882
|
+
@media (pointer: coarse), (max-width: 767px) {
|
|
1883
|
+
:host { width: ${tok("--office-checkbox-size-touch")}; height: ${tok("--office-checkbox-size-touch")}; }
|
|
1884
|
+
svg { width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; }
|
|
1885
|
+
}
|
|
1879
1886
|
@media (forced-colors: active) {
|
|
1880
1887
|
:host { border-color: CanvasText; background: Canvas; color: CanvasText; forced-color-adjust: auto; }
|
|
1881
1888
|
:host([checked]) { border-color: Highlight; background: Highlight; color: HighlightText; }
|
|
1882
1889
|
}
|
|
1883
1890
|
`;
|
|
1884
1891
|
var SWITCH_CSS = `
|
|
1885
|
-
:host {
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
:
|
|
1889
|
-
|
|
1890
|
-
:
|
|
1891
|
-
:
|
|
1892
|
-
:host
|
|
1892
|
+
:host { --_w: ${tok("--office-switch-width")}; --_h: ${tok("--office-switch-height")};
|
|
1893
|
+
--_b: ${tok("--office-switch-border-width")}; --_k: ${tok("--office-switch-knob-size")};
|
|
1894
|
+
--_o: ${tok("--office-switch-knob-offset")};
|
|
1895
|
+
display: inline-block; box-sizing: border-box; position: relative; width: var(--_w); height: var(--_h);
|
|
1896
|
+
flex: none; border: var(--_b) solid ${tok("--office-switch-border")}; border-radius: ${tok("--office-radius-full")};
|
|
1897
|
+
background: ${tok("--office-switch-track")}; cursor: pointer; vertical-align: middle;
|
|
1898
|
+
touch-action: manipulation; transition: background-color ${tok("--office-duration")}; }
|
|
1899
|
+
:host::after { content: ""; position: absolute; top: calc((var(--_h) - 2 * var(--_b) - var(--_k)) / 2); left: var(--_o);
|
|
1900
|
+
width: var(--_k); height: var(--_k); border-radius: 50%; background: ${tok("--office-switch-thumb")};
|
|
1901
|
+
box-shadow: ${tok("--office-shadow-sm")}; transition: transform ${tok("--office-duration")}; }
|
|
1902
|
+
:host([checked]) { border-color: ${tok("--office-switch-track-on")};
|
|
1903
|
+
background: ${tok("--office-switch-track-on")}; }
|
|
1904
|
+
:host([checked])::after { transform: translateX(var(--office-switch-knob-travel, calc(var(--_w) - var(--_k) - 2 * var(--_o) - 2 * var(--_b))));
|
|
1905
|
+
background: ${tok("--office-switch-thumb-on")}; }
|
|
1906
|
+
:host(:focus-visible) { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: ${tok("--office-focus-offset")}; }
|
|
1893
1907
|
:host([disabled]) { opacity: .5; cursor: not-allowed; }
|
|
1894
1908
|
svg { display: none; }
|
|
1895
|
-
@media (pointer: coarse), (max-width: 767px) { :host {
|
|
1909
|
+
@media (pointer: coarse), (max-width: 767px) { :host { --_w: ${tok("--office-switch-width-touch")}; --_h: ${tok("--office-switch-height-touch")}; --_k: ${tok("--office-switch-knob-size-touch")}; } }
|
|
1896
1910
|
@media (forced-colors: active) {
|
|
1897
1911
|
:host { border-color: CanvasText; background: Canvas; forced-color-adjust: none; }
|
|
1898
1912
|
:host::after { background: CanvasText; }
|
|
@@ -1984,21 +1998,21 @@ var defineSwitch = definer("office-ui-switch", makeCheckable("switch", SWITCH_CS
|
|
|
1984
1998
|
var CSS11 = `
|
|
1985
1999
|
:host { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; }
|
|
1986
2000
|
:host([open]) { display: flex; }
|
|
1987
|
-
.backdrop { position: absolute; inset: 0; background:
|
|
2001
|
+
.backdrop { position: absolute; inset: 0; background: ${tok("--office-overlay")}; }
|
|
1988
2002
|
.box { position: relative; box-sizing: border-box; display: flex; flex-direction: column;
|
|
1989
|
-
width:
|
|
1990
|
-
background:
|
|
1991
|
-
border:
|
|
1992
|
-
header { display: flex; align-items: center; justify-content: space-between; gap:
|
|
1993
|
-
border-bottom:
|
|
1994
|
-
h2 { margin: 0; font-size:
|
|
1995
|
-
.body { padding:
|
|
1996
|
-
footer { display: flex; justify-content: flex-end; gap:
|
|
2003
|
+
width: ${tok("--office-dialog-width")}; min-width: ${tok("--office-dialog-min-width")}; max-width: ${tok("--office-dialog-max-width")}; max-height: ${tok("--office-dialog-max-height")};
|
|
2004
|
+
background: ${tok("--office-background")}; color: ${tok("--office-foreground")};
|
|
2005
|
+
border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius-lg")}; font-family: ${tok("--office-font")}; }
|
|
2006
|
+
header { display: flex; align-items: center; justify-content: space-between; gap: ${tok("--office-space-2")}; padding: ${tok("--office-space-3")} ${tok("--office-space-4")};
|
|
2007
|
+
border-bottom: ${tok("--office-border-width")} solid ${tok("--office-border")}; }
|
|
2008
|
+
h2 { margin: 0; font-size: ${tok("--office-font-size-lg")}; font-weight: 600; }
|
|
2009
|
+
.body { padding: ${tok("--office-space-4")}; overflow: auto; font-size: ${tok("--office-font-size")}; }
|
|
2010
|
+
footer { display: flex; justify-content: flex-end; gap: ${tok("--office-space-2")}; padding: ${tok("--office-space-3")} ${tok("--office-space-4")}; border-top: ${tok("--office-border-width")} solid ${tok("--office-border")}; }
|
|
1997
2011
|
footer[hidden] { display: none; }
|
|
1998
|
-
.close { display: inline-flex; align-items: center; justify-content: center; min-width:
|
|
1999
|
-
min-height:
|
|
2000
|
-
.close svg { width:
|
|
2001
|
-
.close:focus-visible { outline:
|
|
2012
|
+
.close { display: inline-flex; align-items: center; justify-content: center; min-width: ${tok("--office-target-size")};
|
|
2013
|
+
min-height: ${tok("--office-target-size")}; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: ${tok("--office-radius")}; }
|
|
2014
|
+
.close svg { width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")}; stroke-linecap: round; }
|
|
2015
|
+
.close:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; }
|
|
2002
2016
|
@media (forced-colors: active) { .box { border-color: CanvasText; background: Canvas; } .backdrop { background: transparent; } }
|
|
2003
2017
|
`;
|
|
2004
2018
|
var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), office-ui-button:not([disabled]), office-ui-select:not([disabled]), office-ui-checkbox:not([disabled]), office-ui-switch:not([disabled])';
|
|
@@ -2118,26 +2132,26 @@ var defineDialog = definer("office-ui-dialog", () => {
|
|
|
2118
2132
|
|
|
2119
2133
|
// src/command-search.ts
|
|
2120
2134
|
var CSS12 = `
|
|
2121
|
-
:host { display: inline-flex; align-items: center; min-width: 0; font-family:
|
|
2122
|
-
.field { display: flex; align-items: center; gap:
|
|
2123
|
-
padding: 0
|
|
2124
|
-
color:
|
|
2125
|
-
.field:hover, .field:focus-within { border-color:
|
|
2126
|
-
input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color:
|
|
2127
|
-
font: inherit; font-size:
|
|
2128
|
-
svg { width:
|
|
2135
|
+
:host { display: inline-flex; align-items: center; min-width: 0; font-family: ${tok("--office-font")}; }
|
|
2136
|
+
.field { display: flex; align-items: center; gap: ${tok("--office-space-1-5")}; width: 100%; min-width: 0; height: ${tok("--office-target-size")};
|
|
2137
|
+
padding: 0 ${tok("--office-space-2")}; box-sizing: border-box; border: ${tok("--office-border-width")} solid transparent; border-radius: ${tok("--office-radius")};
|
|
2138
|
+
color: ${tok("--office-muted-foreground")}; }
|
|
2139
|
+
.field:hover, .field:focus-within { border-color: ${tok("--office-border")}; background: ${tok("--office-background")}; }
|
|
2140
|
+
input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: ${tok("--office-foreground")};
|
|
2141
|
+
font: inherit; font-size: ${tok("--office-font-size")}; }
|
|
2142
|
+
svg { width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; flex: none; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")};
|
|
2129
2143
|
stroke-linecap: round; stroke-linejoin: round; }
|
|
2130
|
-
ul { position: fixed; inset: auto; margin: 0; padding:
|
|
2131
|
-
box-sizing: border-box; list-style: none; background:
|
|
2132
|
-
border:
|
|
2133
|
-
box-shadow:
|
|
2144
|
+
ul { position: fixed; inset: auto; margin: 0; padding: ${tok("--office-space-1")}; min-width: ${tok("--office-search-popup-min-width")}; max-height: ${tok("--office-search-popup-max-height")}; overflow: auto;
|
|
2145
|
+
box-sizing: border-box; list-style: none; background: ${tok("--office-background")}; color: ${tok("--office-foreground")};
|
|
2146
|
+
border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius")};
|
|
2147
|
+
box-shadow: ${tok("--office-shadow")}; font-size: ${tok("--office-font-size-sm")}; }
|
|
2134
2148
|
ul[hidden] { display: none; }
|
|
2135
|
-
li { display: flex; flex-direction: column; justify-content: center; min-height:
|
|
2136
|
-
padding:
|
|
2137
|
-
li[data-active] { background:
|
|
2138
|
-
li[aria-disabled="true"] { cursor: not-allowed; color:
|
|
2139
|
-
li small { color:
|
|
2140
|
-
li.empty { cursor: default; color:
|
|
2149
|
+
li { display: flex; flex-direction: column; justify-content: center; min-height: ${tok("--office-target-size")};
|
|
2150
|
+
padding: ${tok("--office-space-0")} ${tok("--office-space-2-5")}; border-radius: ${tok("--office-radius-sm")}; cursor: pointer; }
|
|
2151
|
+
li[data-active] { background: ${tok("--office-surface")}; }
|
|
2152
|
+
li[aria-disabled="true"] { cursor: not-allowed; color: ${tok("--office-muted-foreground")}; }
|
|
2153
|
+
li small { color: ${tok("--office-muted-foreground")}; font-size: ${tok("--office-font-size-xs")}; }
|
|
2154
|
+
li.empty { cursor: default; color: ${tok("--office-muted-foreground")}; }
|
|
2141
2155
|
@media (forced-colors: active) {
|
|
2142
2156
|
.field, ul { border-color: CanvasText; background: Canvas; color: CanvasText; }
|
|
2143
2157
|
li[data-active] { background: Highlight; color: HighlightText; }
|
|
@@ -2316,15 +2330,15 @@ var defineCommandSearch = definer("office-ui-command-search", () => {
|
|
|
2316
2330
|
// src/context-menu.ts
|
|
2317
2331
|
var CSS13 = `
|
|
2318
2332
|
:host { display: contents; }
|
|
2319
|
-
.panel { position: fixed; inset: auto; margin: 0; min-width:
|
|
2320
|
-
background:
|
|
2321
|
-
border:
|
|
2322
|
-
box-shadow:
|
|
2333
|
+
.panel { position: fixed; inset: auto; margin: 0; min-width: ${tok("--office-context-menu-min-width")}; padding: ${tok("--office-space-1")}; box-sizing: border-box;
|
|
2334
|
+
background: ${tok("--office-background")}; color: ${tok("--office-foreground")};
|
|
2335
|
+
border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius")};
|
|
2336
|
+
box-shadow: ${tok("--office-shadow")}; font-family: ${tok("--office-font")}; }
|
|
2323
2337
|
.panel[hidden] { display: none; }
|
|
2324
2338
|
@media (forced-colors: active) { .panel { border-color: CanvasText; background: Canvas; color: CanvasText; } }
|
|
2325
2339
|
`;
|
|
2326
2340
|
var SEPARATOR_CSS = `
|
|
2327
|
-
:host { display: block; height:
|
|
2341
|
+
:host { display: block; height: ${tok("--office-border-width")}; margin: ${tok("--office-space-1")} ${tok("--office-space-1-5")}; background: ${tok("--office-border")}; }
|
|
2328
2342
|
@media (forced-colors: active) { :host { background: CanvasText; } }
|
|
2329
2343
|
`;
|
|
2330
2344
|
var ITEMS = "office-ui-menu-item:not([disabled]):not([hidden])";
|
|
@@ -2447,28 +2461,28 @@ var defineContextMenu = definer("office-ui-context-menu", () => {
|
|
|
2447
2461
|
// src/menu.ts
|
|
2448
2462
|
var BUTTON_CSS = `
|
|
2449
2463
|
:host { display: inline-flex; vertical-align: middle; }
|
|
2450
|
-
.wrap { display: inline-flex; align-items: stretch; border:
|
|
2464
|
+
.wrap { display: inline-flex; align-items: stretch; border: ${tok("--office-border-width")} solid transparent; border-radius: ${tok("--office-radius")}; }
|
|
2451
2465
|
:host([variant="stacked"]) .wrap { flex-direction: column; }
|
|
2452
|
-
button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap:
|
|
2453
|
-
min-width:
|
|
2454
|
-
border: 0; border-radius:
|
|
2455
|
-
font: inherit; font-size:
|
|
2456
|
-
:host([variant="stacked"]) .main { flex-direction: column; padding:
|
|
2457
|
-
:host([variant="stacked"]) .caret { min-height:
|
|
2466
|
+
button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: ${tok("--office-space-1")};
|
|
2467
|
+
min-width: ${tok("--office-target-size")}; min-height: ${tok("--office-target-size")}; padding: 0 ${tok("--office-space-1-5")};
|
|
2468
|
+
border: 0; border-radius: ${tok("--office-radius")}; background: transparent; color: ${tok("--office-foreground")};
|
|
2469
|
+
font: inherit; font-size: ${tok("--office-font-size-sm")}; cursor: pointer; white-space: nowrap; }
|
|
2470
|
+
:host([variant="stacked"]) .main { flex-direction: column; padding: ${tok("--office-space-1")} ${tok("--office-space-1-5")} 0; }
|
|
2471
|
+
:host([variant="stacked"]) .caret { min-height: ${tok("--office-icon-size-md")}; padding: 0 ${tok("--office-space-1-5")} ${tok("--office-space-0")}; }
|
|
2458
2472
|
:host([variant="stacked"]:not([command])) .main { padding-bottom: 0; }
|
|
2459
|
-
.wrap:hover:not(.disabled) { border-color:
|
|
2460
|
-
button:hover:not(:disabled) { background:
|
|
2461
|
-
button:focus-visible { outline:
|
|
2473
|
+
.wrap:hover:not(.disabled) { border-color: ${tok("--office-border")}; }
|
|
2474
|
+
button:hover:not(:disabled) { background: ${tok("--office-surface")}; }
|
|
2475
|
+
button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(-1 * ${tok("--office-focus-width")}); }
|
|
2462
2476
|
button:disabled { opacity: .5; cursor: not-allowed; }
|
|
2463
|
-
button[aria-expanded="true"] { background:
|
|
2464
|
-
.caret svg { width:
|
|
2465
|
-
svg { width:
|
|
2477
|
+
button[aria-expanded="true"] { background: ${tok("--office-surface")}; }
|
|
2478
|
+
.caret svg { width: ${tok("--office-icon-size-sm")}; height: ${tok("--office-icon-size-sm")}; }
|
|
2479
|
+
svg { width: ${tok("--office-icon-size-ml")}; height: ${tok("--office-icon-size-ml")}; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")};
|
|
2466
2480
|
stroke-linecap: round; stroke-linejoin: round; }
|
|
2467
2481
|
svg:not([data-painted]) { display: none; }
|
|
2468
|
-
.panel { position: fixed; inset: auto; margin: 0; min-width:
|
|
2469
|
-
background:
|
|
2470
|
-
border:
|
|
2471
|
-
box-shadow:
|
|
2482
|
+
.panel { position: fixed; inset: auto; margin: 0; min-width: ${tok("--office-menu-min-width")}; padding: ${tok("--office-space-1")}; box-sizing: border-box;
|
|
2483
|
+
background: ${tok("--office-background")}; color: ${tok("--office-foreground")};
|
|
2484
|
+
border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius")};
|
|
2485
|
+
box-shadow: ${tok("--office-shadow")}; }
|
|
2472
2486
|
.panel[hidden] { display: none; }
|
|
2473
2487
|
@media (forced-colors: active) {
|
|
2474
2488
|
button { color: ButtonText; } button:disabled { color: GrayText; }
|
|
@@ -2478,13 +2492,13 @@ svg:not([data-painted]) { display: none; }
|
|
|
2478
2492
|
var ITEM_CSS = `
|
|
2479
2493
|
:host { display: block; }
|
|
2480
2494
|
:host([hidden]) { display: none; }
|
|
2481
|
-
button { box-sizing: border-box; display: flex; align-items: center; gap:
|
|
2482
|
-
min-height:
|
|
2483
|
-
background: transparent; color: inherit; font: inherit; font-size:
|
|
2484
|
-
button:hover:not(:disabled), button:focus-visible { background:
|
|
2495
|
+
button { box-sizing: border-box; display: flex; align-items: center; gap: ${tok("--office-space-2")}; width: 100%;
|
|
2496
|
+
min-height: ${tok("--office-target-size")}; padding: 0 ${tok("--office-space-2-5")} 0 ${tok("--office-space-2")}; border: 0; border-radius: ${tok("--office-radius-sm")};
|
|
2497
|
+
background: transparent; color: inherit; font: inherit; font-size: ${tok("--office-font-size-sm")}; text-align: start; cursor: pointer; }
|
|
2498
|
+
button:hover:not(:disabled), button:focus-visible { background: ${tok("--office-surface")}; outline: none; }
|
|
2485
2499
|
button:disabled { opacity: .5; cursor: not-allowed; }
|
|
2486
|
-
.check { width:
|
|
2487
|
-
svg { width:
|
|
2500
|
+
.check { width: ${tok("--office-icon-size")}; text-align: center; }
|
|
2501
|
+
svg { width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; flex: none; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")};
|
|
2488
2502
|
stroke-linecap: round; stroke-linejoin: round; }
|
|
2489
2503
|
svg:not([data-painted]) { visibility: hidden; }
|
|
2490
2504
|
@media (forced-colors: active) { button:focus-visible { background: Highlight; color: HighlightText; } }
|
|
@@ -2762,35 +2776,35 @@ function clampOptionNumber(raw, min, max) {
|
|
|
2762
2776
|
}
|
|
2763
2777
|
var CSS14 = `
|
|
2764
2778
|
:host { display: contents; }
|
|
2765
|
-
office-ui-dialog { --office-dialog-width:
|
|
2766
|
-
.layout { display: grid; grid-template-columns:
|
|
2767
|
-
nav { display: flex; flex-direction: column; padding:
|
|
2768
|
-
background:
|
|
2769
|
-
nav button { min-height:
|
|
2779
|
+
office-ui-dialog { --office-dialog-width: ${tok("--office-options-width")}; --office-dialog-max-width: ${tok("--office-options-width")}; }
|
|
2780
|
+
.layout { display: grid; grid-template-columns: ${tok("--office-options-nav-width")} minmax(0, 1fr); gap: 0; min-height: ${tok("--office-options-min-height")}; margin: calc(-1 * ${tok("--office-space-4")}); }
|
|
2781
|
+
nav { display: flex; flex-direction: column; padding: ${tok("--office-space-2")} 0; border-inline-end: ${tok("--office-border-width")} solid ${tok("--office-border")};
|
|
2782
|
+
background: ${tok("--office-surface")}; overflow: auto; }
|
|
2783
|
+
nav button { min-height: ${tok("--office-options-row-height")}; padding: ${tok("--office-space-1")} ${tok("--office-space-3-5")}; border: 0; border-radius: 0; background: transparent; color: inherit;
|
|
2770
2784
|
font: inherit; text-align: start; cursor: pointer; }
|
|
2771
|
-
nav button[aria-selected="true"] { background:
|
|
2772
|
-
box-shadow: inset
|
|
2773
|
-
nav button:focus-visible { outline:
|
|
2774
|
-
[role="tabpanel"] { padding:
|
|
2775
|
-
.lead { margin: 0 0
|
|
2776
|
-
.unavailable { margin: 0 0
|
|
2777
|
-
section + section { margin-top:
|
|
2778
|
-
h3 { margin: 0 0
|
|
2779
|
-
.desc { margin: 0 0
|
|
2780
|
-
.row { display: flex; align-items: center; gap:
|
|
2781
|
-
.row.indent { padding-inline-start:
|
|
2782
|
-
.row.field > span:first-child { min-width:
|
|
2783
|
-
.row[data-disabled] { color:
|
|
2784
|
-
input[type="text"], input[type="number"], select { min-height:
|
|
2785
|
-
border:
|
|
2786
|
-
input[type="number"] { width:
|
|
2787
|
-
.info { display: inline-grid; place-items: center; width:
|
|
2788
|
-
border-radius: 50%; font-size:
|
|
2789
|
-
.actions { display: flex; gap:
|
|
2790
|
-
.actions button { min-width:
|
|
2785
|
+
nav button[aria-selected="true"] { background: ${tok("--office-selected")}; font-weight: 600;
|
|
2786
|
+
box-shadow: inset ${tok("--office-selection-bar-width")} 0 0 ${tok("--office-accent")}; }
|
|
2787
|
+
nav button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(-1 * ${tok("--office-focus-width")}); }
|
|
2788
|
+
[role="tabpanel"] { padding: ${tok("--office-space-4")} ${tok("--office-space-5")}; overflow: auto; }
|
|
2789
|
+
.lead { margin: 0 0 ${tok("--office-space-3")}; font-size: ${tok("--office-font-size-md")}; }
|
|
2790
|
+
.unavailable { margin: 0 0 ${tok("--office-space-3")}; color: ${tok("--office-muted-foreground")}; }
|
|
2791
|
+
section + section { margin-top: ${tok("--office-space-4")}; }
|
|
2792
|
+
h3 { margin: 0 0 ${tok("--office-space-2")}; padding-bottom: ${tok("--office-space-1")}; border-bottom: ${tok("--office-border-width")} solid ${tok("--office-border")}; font-size: ${tok("--office-font-size")}; font-weight: 600; }
|
|
2793
|
+
.desc { margin: 0 0 ${tok("--office-space-2")}; color: ${tok("--office-muted-foreground")}; }
|
|
2794
|
+
.row { display: flex; align-items: center; gap: ${tok("--office-space-2")}; min-height: ${tok("--office-options-row-height")}; }
|
|
2795
|
+
.row.indent { padding-inline-start: ${tok("--office-space-6")}; }
|
|
2796
|
+
.row.field > span:first-child { min-width: ${tok("--office-options-label-width")}; }
|
|
2797
|
+
.row[data-disabled] { color: ${tok("--office-muted-foreground")}; }
|
|
2798
|
+
input[type="text"], input[type="number"], select { min-height: ${tok("--office-input-height")}; box-sizing: border-box; font: inherit;
|
|
2799
|
+
border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius-sm")}; background: ${tok("--office-background")}; color: inherit; }
|
|
2800
|
+
input[type="number"] { width: ${tok("--office-options-number-width")}; }
|
|
2801
|
+
.info { display: inline-grid; place-items: center; width: ${tok("--office-info-size")}; height: ${tok("--office-info-size")}; border: ${tok("--office-border-width")} solid currentColor;
|
|
2802
|
+
border-radius: 50%; font-size: ${tok("--office-font-size-2xs")}; color: ${tok("--office-muted-foreground")}; cursor: help; }
|
|
2803
|
+
.actions { display: flex; gap: ${tok("--office-space-2")}; }
|
|
2804
|
+
.actions button { min-width: ${tok("--office-dialog-button-min-width")}; min-height: ${tok("--office-control-height-md")}; font: inherit; cursor: pointer; }
|
|
2791
2805
|
@media (max-width: 600px) {
|
|
2792
2806
|
.layout { grid-template-columns: 1fr; }
|
|
2793
|
-
nav { flex-direction: row; border-inline-end: 0; border-bottom:
|
|
2807
|
+
nav { flex-direction: row; border-inline-end: 0; border-bottom: ${tok("--office-border-width")} solid ${tok("--office-border")}; }
|
|
2794
2808
|
nav button { white-space: nowrap; }
|
|
2795
2809
|
.row.field { flex-wrap: wrap; }
|
|
2796
2810
|
}
|
|
@@ -3024,22 +3038,22 @@ function text(doc, tag, content, className) {
|
|
|
3024
3038
|
var GROUP_CSS = `
|
|
3025
3039
|
:host { display: inline-flex; flex: none; align-self: stretch; }
|
|
3026
3040
|
.group { box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;
|
|
3027
|
-
min-height:
|
|
3028
|
-
border-inline-end:
|
|
3041
|
+
min-height: ${tok("--office-ribbon-group-height")}; padding: ${tok("--office-space-1")} ${tok("--office-space-2")} ${tok("--office-space-0")};
|
|
3042
|
+
border-inline-end: ${tok("--office-border-width")} solid color-mix(in srgb, ${tok("--office-border")} 60%, transparent); }
|
|
3029
3043
|
:host(:last-child) .group { border-inline-end: 0; }
|
|
3030
|
-
.row { display: flex; align-items: flex-start; gap:
|
|
3044
|
+
.row { display: flex; align-items: flex-start; gap: ${tok("--office-space-1")}; }
|
|
3031
3045
|
::slotted(*) { flex-shrink: 0; }
|
|
3032
|
-
.foot { position: relative; display: flex; justify-content: center; padding-top:
|
|
3033
|
-
.caption { color:
|
|
3034
|
-
line-height:
|
|
3035
|
-
.launcher { position: absolute; inset-inline-end: -6px; bottom: -
|
|
3036
|
-
width:
|
|
3037
|
-
color:
|
|
3038
|
-
.launcher:hover:not(:disabled) { background:
|
|
3039
|
-
.launcher:focus-visible { outline:
|
|
3046
|
+
.foot { position: relative; display: flex; justify-content: center; padding-top: ${tok("--office-space-0")}; }
|
|
3047
|
+
.caption { color: ${tok("--office-muted-foreground")}; font-size: ${tok("--office-font-size-2xs")};
|
|
3048
|
+
line-height: ${tok("--office-ribbon-caption-line-height")}; text-align: center; white-space: nowrap; }
|
|
3049
|
+
.launcher { position: absolute; inset-inline-end: -6px; bottom: calc(-1 * ${tok("--office-space-px")}); display: inline-grid; place-items: center;
|
|
3050
|
+
width: ${tok("--office-launcher-width")}; height: ${tok("--office-launcher-height")}; padding: 0; border: 0; border-radius: ${tok("--office-radius-xs")}; background: transparent;
|
|
3051
|
+
color: ${tok("--office-muted-foreground")}; cursor: pointer; }
|
|
3052
|
+
.launcher:hover:not(:disabled) { background: ${tok("--office-surface")}; }
|
|
3053
|
+
.launcher:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; }
|
|
3040
3054
|
.launcher:disabled { opacity: .45; cursor: not-allowed; }
|
|
3041
3055
|
.launcher[hidden] { display: none; }
|
|
3042
|
-
.launcher svg { width:
|
|
3056
|
+
.launcher svg { width: ${tok("--office-icon-size-xs")}; height: ${tok("--office-icon-size-xs")}; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")};
|
|
3043
3057
|
stroke-linecap: round; stroke-linejoin: round; }
|
|
3044
3058
|
@media (forced-colors: active) { .group { border-inline-end-color: CanvasText; } .caption { color: CanvasText; } }
|
|
3045
3059
|
`;
|
|
@@ -3096,14 +3110,14 @@ var defineRibbonGroup = definer("office-ui-ribbon-group", () => {
|
|
|
3096
3110
|
return OfficeUiRibbonGroup;
|
|
3097
3111
|
});
|
|
3098
3112
|
var TOOLBAR_CSS = `
|
|
3099
|
-
:host { display: flex; flex-wrap: wrap; align-items: stretch; gap:
|
|
3100
|
-
background:
|
|
3113
|
+
:host { display: flex; flex-wrap: wrap; align-items: stretch; gap: ${tok("--office-space-0")}; padding: ${tok("--office-space-0")} ${tok("--office-space-1")};
|
|
3114
|
+
background: ${tok("--office-surface")}; border-bottom: ${tok("--office-border-width")} solid ${tok("--office-border")}; }
|
|
3101
3115
|
@media (forced-colors: active) { :host { border-bottom-color: CanvasText; background: Canvas; } }
|
|
3102
3116
|
`;
|
|
3103
3117
|
var STACK_CSS = `
|
|
3104
3118
|
:host { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
|
|
3105
|
-
gap:
|
|
3106
|
-
:host([orientation="horizontal"]) { flex-direction: row; align-items: center; gap:
|
|
3119
|
+
gap: ${tok("--office-space-px")}; align-self: stretch; }
|
|
3120
|
+
:host([orientation="horizontal"]) { flex-direction: row; align-items: center; gap: ${tok("--office-space-0")}; align-self: auto; }
|
|
3107
3121
|
::slotted(*) { flex-shrink: 0; }
|
|
3108
3122
|
`;
|
|
3109
3123
|
var defineRibbonStack = definer("office-ui-ribbon-stack", () => {
|
|
@@ -3156,20 +3170,20 @@ var defineToolbar = definer("office-ui-toolbar", () => {
|
|
|
3156
3170
|
// src/select.ts
|
|
3157
3171
|
var CSS15 = `
|
|
3158
3172
|
:host { display: inline-block; position: relative; vertical-align: middle; }
|
|
3159
|
-
button { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap:
|
|
3160
|
-
width: 100%; min-height:
|
|
3161
|
-
color:
|
|
3162
|
-
border:
|
|
3163
|
-
button:focus-visible { outline:
|
|
3173
|
+
button { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: ${tok("--office-space-2")};
|
|
3174
|
+
width: 100%; min-height: ${tok("--office-target-size")}; padding: 0 ${tok("--office-space-2")}; font: inherit; font-size: ${tok("--office-font-size-sm")};
|
|
3175
|
+
color: ${tok("--office-foreground")}; background: ${tok("--office-background")};
|
|
3176
|
+
border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius")}; cursor: pointer; }
|
|
3177
|
+
button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(${tok("--office-focus-offset")} / 2); }
|
|
3164
3178
|
:host([disabled]) button { opacity: .5; cursor: not-allowed; }
|
|
3165
|
-
ul { position: absolute; z-index: 10; inset-inline: 0; top: 100%; margin:
|
|
3166
|
-
max-height:
|
|
3167
|
-
border:
|
|
3179
|
+
ul { position: absolute; z-index: 10; inset-inline: 0; top: 100%; margin: ${tok("--office-space-0")} 0 0; padding: ${tok("--office-space-0")}; list-style: none;
|
|
3180
|
+
max-height: ${tok("--office-select-max-height")}; overflow: auto; background: ${tok("--office-background")};
|
|
3181
|
+
border: ${tok("--office-border-width")} solid ${tok("--office-border")}; border-radius: ${tok("--office-radius")}; }
|
|
3168
3182
|
ul[hidden] { display: none; }
|
|
3169
|
-
li { display: flex; align-items: center; min-height:
|
|
3170
|
-
font-size:
|
|
3183
|
+
li { display: flex; align-items: center; min-height: ${tok("--office-target-size")}; padding: 0 ${tok("--office-space-2")};
|
|
3184
|
+
font-size: ${tok("--office-font-size-sm")}; color: ${tok("--office-foreground")}; cursor: pointer; border-radius: ${tok("--office-radius-sm")}; }
|
|
3171
3185
|
li[aria-selected="true"] { font-weight: 600; }
|
|
3172
|
-
li[data-active] { background:
|
|
3186
|
+
li[data-active] { background: ${tok("--office-surface")}; }
|
|
3173
3187
|
li[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
|
|
3174
3188
|
@media (forced-colors: active) {
|
|
3175
3189
|
button, ul { border-color: CanvasText; background: Canvas; color: CanvasText; }
|
|
@@ -3352,9 +3366,9 @@ var defineSelect = definer("office-ui-select", () => {
|
|
|
3352
3366
|
|
|
3353
3367
|
// src/status-bar.ts
|
|
3354
3368
|
var BAR_CSS = `
|
|
3355
|
-
:host { display: flex; align-items: center; gap:
|
|
3356
|
-
background:
|
|
3357
|
-
border-top:
|
|
3369
|
+
:host { display: flex; align-items: center; gap: ${tok("--office-space-3")}; min-height: ${tok("--office-status-bar-height")}; padding: 0 ${tok("--office-space-2")}; font-size: ${tok("--office-font-size-xs")};
|
|
3370
|
+
background: ${tok("--office-surface")}; color: ${tok("--office-foreground")};
|
|
3371
|
+
border-top: ${tok("--office-border-width")} solid ${tok("--office-border")}; font-family: ${tok("--office-font")}; }
|
|
3358
3372
|
::slotted([slot="end"]) { margin-inline-start: auto; }
|
|
3359
3373
|
@media (forced-colors: active) { :host { background: Canvas; color: CanvasText; border-top-color: CanvasText; } }
|
|
3360
3374
|
`;
|
|
@@ -3377,12 +3391,12 @@ var defineStatusBar = definer("office-ui-status-bar", () => {
|
|
|
3377
3391
|
return OfficeUiStatusBar;
|
|
3378
3392
|
});
|
|
3379
3393
|
var ITEM_CSS2 = `
|
|
3380
|
-
:host { display: inline-flex; align-items: center; gap:
|
|
3381
|
-
.label { color:
|
|
3382
|
-
button { all: unset; display: inline-flex; gap:
|
|
3383
|
-
min-height:
|
|
3384
|
-
button:hover { background:
|
|
3385
|
-
button:focus-visible { outline:
|
|
3394
|
+
:host { display: inline-flex; align-items: center; gap: ${tok("--office-space-1")}; white-space: nowrap; }
|
|
3395
|
+
.label { color: ${tok("--office-muted-foreground")}; }
|
|
3396
|
+
button { all: unset; display: inline-flex; gap: ${tok("--office-space-1")}; align-items: center; cursor: pointer; padding: 0 ${tok("--office-space-1")};
|
|
3397
|
+
min-height: ${tok("--office-target-size")}; border-radius: ${tok("--office-radius-sm")}; }
|
|
3398
|
+
button:hover { background: ${tok("--office-background")}; }
|
|
3399
|
+
button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; }
|
|
3386
3400
|
@media (forced-colors: active) { .label { color: GrayText; } button:focus-visible { outline-color: Highlight; } }
|
|
3387
3401
|
`;
|
|
3388
3402
|
var defineStatusItem = definer("office-ui-status-item", () => {
|
|
@@ -3433,7 +3447,7 @@ var defineStatusItem = definer("office-ui-status-item", () => {
|
|
|
3433
3447
|
} else {
|
|
3434
3448
|
wrap = doc.createElement("span");
|
|
3435
3449
|
wrap.style.display = "inline-flex";
|
|
3436
|
-
wrap.style.gap = "
|
|
3450
|
+
wrap.style.gap = tok("--office-space-1");
|
|
3437
3451
|
}
|
|
3438
3452
|
wrap.className = "wrap";
|
|
3439
3453
|
wrap.append(content);
|
|
@@ -3445,26 +3459,26 @@ var defineStatusItem = definer("office-ui-status-item", () => {
|
|
|
3445
3459
|
|
|
3446
3460
|
// src/tab-strip.ts
|
|
3447
3461
|
var CSS16 = `
|
|
3448
|
-
:host { display: flex; align-items: stretch; min-width: 0; min-height:
|
|
3449
|
-
background:
|
|
3450
|
-
border-top:
|
|
3451
|
-
font-family:
|
|
3452
|
-
.step { flex: none; display: inline-grid; place-items: center; width:
|
|
3453
|
-
min-height:
|
|
3462
|
+
:host { display: flex; align-items: stretch; min-width: 0; min-height: ${tok("--office-tab-height")}; gap: ${tok("--office-space-0")}; padding: 0 ${tok("--office-space-1-5")};
|
|
3463
|
+
background: ${tok("--office-surface")}; color: ${tok("--office-muted-foreground")};
|
|
3464
|
+
border-top: ${tok("--office-border-width")} solid ${tok("--office-border")}; font-size: ${tok("--office-font-size-sm")};
|
|
3465
|
+
font-family: ${tok("--office-font")}; }
|
|
3466
|
+
.step { flex: none; display: inline-grid; place-items: center; width: ${tok("--office-target-size")};
|
|
3467
|
+
min-height: ${tok("--office-target-size")};
|
|
3454
3468
|
padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
|
|
3455
3469
|
.step:disabled { opacity: .4; cursor: default; }
|
|
3456
|
-
.add { font-size:
|
|
3470
|
+
.add { font-size: ${tok("--office-font-size-xl")}; line-height: 1; }
|
|
3457
3471
|
.add[hidden] { display: none; }
|
|
3458
3472
|
.list { display: flex; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
|
|
3459
|
-
.tab { flex: none; max-width:
|
|
3460
|
-
padding:
|
|
3461
|
-
border:
|
|
3473
|
+
.tab { flex: none; max-width: ${tok("--office-tab-max-width")}; min-height: ${tok("--office-target-size")}; margin-top: calc(-1 * ${tok("--office-space-px")});
|
|
3474
|
+
padding: ${tok("--office-space-0")} ${tok("--office-space-3-5")}; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
|
|
3475
|
+
border: ${tok("--office-border-width")} solid transparent; border-top: 0; border-radius: 0 0 ${tok("--office-radius")} ${tok("--office-radius")};
|
|
3462
3476
|
background: transparent; color: inherit; font: inherit; cursor: pointer; }
|
|
3463
|
-
.tab:hover { color:
|
|
3464
|
-
.tab[aria-selected="true"] { border-color:
|
|
3465
|
-
color:
|
|
3466
|
-
button:focus-visible { outline:
|
|
3467
|
-
svg { width:
|
|
3477
|
+
.tab:hover { color: ${tok("--office-foreground")}; }
|
|
3478
|
+
.tab[aria-selected="true"] { border-color: ${tok("--office-border")}; background: ${tok("--office-background")};
|
|
3479
|
+
color: ${tok("--office-accent")}; font-weight: 600; box-shadow: inset 0 ${tok("--office-border-width-thick")} 0 ${tok("--office-accent")}; }
|
|
3480
|
+
button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(-1 * ${tok("--office-focus-width")}); }
|
|
3481
|
+
svg { width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")};
|
|
3468
3482
|
stroke-linecap: round; stroke-linejoin: round; }
|
|
3469
3483
|
@media (forced-colors: active) {
|
|
3470
3484
|
:host { border-top-color: CanvasText; }
|
|
@@ -3631,19 +3645,19 @@ var defineTabStrip = definer("office-ui-tab-strip", () => {
|
|
|
3631
3645
|
|
|
3632
3646
|
// src/zoom-slider.ts
|
|
3633
3647
|
var CSS17 = `
|
|
3634
|
-
:host { display: inline-flex; align-items: center; gap:
|
|
3635
|
-
color:
|
|
3636
|
-
button { box-sizing: border-box; display: inline-grid; place-items: center; min-width:
|
|
3637
|
-
min-height:
|
|
3638
|
-
border-radius:
|
|
3639
|
-
font-size:
|
|
3640
|
-
button:hover:not(:disabled) { background:
|
|
3641
|
-
button:focus-visible, input:focus-visible { outline:
|
|
3648
|
+
:host { display: inline-flex; align-items: center; gap: ${tok("--office-space-0")}; font-size: ${tok("--office-font-size-xs")};
|
|
3649
|
+
color: ${tok("--office-foreground")}; font-family: ${tok("--office-font")}; }
|
|
3650
|
+
button { box-sizing: border-box; display: inline-grid; place-items: center; min-width: ${tok("--office-target-size")};
|
|
3651
|
+
min-height: ${tok("--office-target-size")}; padding: 0; border: ${tok("--office-border-width")} solid transparent;
|
|
3652
|
+
border-radius: ${tok("--office-radius")}; background: transparent; color: inherit; font: inherit;
|
|
3653
|
+
font-size: ${tok("--office-font-size-lg")}; line-height: 1; cursor: pointer; }
|
|
3654
|
+
button:hover:not(:disabled) { background: ${tok("--office-background")}; }
|
|
3655
|
+
button:focus-visible, input:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(${tok("--office-focus-offset")} / 2); }
|
|
3642
3656
|
button:disabled, input:disabled { opacity: .5; cursor: not-allowed; }
|
|
3643
|
-
input { width:
|
|
3644
|
-
accent-color:
|
|
3645
|
-
output { min-width:
|
|
3646
|
-
svg { width:
|
|
3657
|
+
input { width: ${tok("--office-zoom-slider-width")}; min-width: ${tok("--office-zoom-slider-min-width")}; margin: 0 ${tok("--office-space-0")};
|
|
3658
|
+
accent-color: ${tok("--office-accent")}; }
|
|
3659
|
+
output { min-width: ${tok("--office-zoom-value-width")}; text-align: center; font-variant-numeric: tabular-nums; }
|
|
3660
|
+
svg { width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")};
|
|
3647
3661
|
stroke-linecap: round; stroke-linejoin: round; }
|
|
3648
3662
|
:host(:not([fit])) .fit { display: none; }
|
|
3649
3663
|
@media (pointer: coarse), (max-width: 767px) { input { flex: 1; } }
|
|
@@ -3762,7 +3776,7 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
|
|
|
3762
3776
|
|
|
3763
3777
|
// src/keytips.ts
|
|
3764
3778
|
var BADGE_CSS = "position:fixed;inset:auto;margin:0;padding:0;border:0;background:transparent;overflow:visible;pointer-events:none";
|
|
3765
|
-
var TIP_CSS =
|
|
3779
|
+
var TIP_CSS = `position:fixed;transform:translate(-50%,-30%);min-width:${tok("--office-icon-size")};padding:${tok("--office-space-px")} ${tok("--office-space-1")};border:${tok("--office-border-width")} solid ${tok("--office-keytip-border")};border-radius:${tok("--office-radius-xs")};background:${tok("--office-keytip-background")};color:${tok("--office-keytip-foreground")};font:${tok("--office-font-weight-bold")} ${tok("--office-font-size-xs")}/${tok("--office-icon-size")} ${tok("--office-font")};text-align:center;box-shadow:${tok("--office-shadow-sm")}`;
|
|
3766
3780
|
var isDisabled = (el) => el.hasAttribute("disabled") || el.getAttribute("aria-disabled") === "true";
|
|
3767
3781
|
var visible = (el) => {
|
|
3768
3782
|
const box = el.getBoundingClientRect();
|