ooxml-ui 0.12.0 → 0.14.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 +55 -34
- package/dist/{chunk-EY266IK3.js → chunk-3BHP4IFP.js} +5 -3
- package/dist/{chunk-KJV76AB7.js → chunk-4WUYOQRL.js} +4 -3
- package/dist/{chunk-H4KFVIGT.js → chunk-7CCQN3VM.js} +15 -15
- package/dist/chunk-BDJW2KDI.js +196 -0
- package/dist/{chunk-BN3UBHTC.js → chunk-EWNLGZPX.js} +787 -486
- package/dist/{chunk-RLPL7Q6J.js → chunk-WKLVWPI7.js} +8 -7
- package/dist/{chunk-YZ2JQNHX.js → chunk-WNSUNQIY.js} +1 -1
- 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/select-menu.d.ts +42 -0
- package/dist/select-styles.d.ts +6 -0
- package/dist/select.d.ts +11 -5
- 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 +194 -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-WNSUNQIY.js';
|
|
2
|
+
import { initialsOf } from './chunk-WKLVWPI7.js';
|
|
3
|
+
import { definer, attachStyles, controlCss, emit } from './chunk-3BHP4IFP.js';
|
|
4
|
+
import { tok, FOCUS_RING, OFFICE_TOKENS } from './chunk-BDJW2KDI.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,19 +1869,19 @@ 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
|
-
flex: none; place-items: center; border:
|
|
1871
|
-
border-radius:
|
|
1872
|
-
color:
|
|
1873
|
-
:host([checked]) { border-color:
|
|
1874
|
-
background:
|
|
1875
|
-
:host(:focus-visible) { outline:
|
|
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")}; }
|
|
1876
1879
|
:host([disabled]) { opacity: .5; cursor: not-allowed; }
|
|
1877
|
-
svg { display: none; width:
|
|
1880
|
+
svg { display: none; width: ${tok("--office-icon-size-sm")}; height: ${tok("--office-icon-size-sm")}; }
|
|
1878
1881
|
:host([checked]) svg { display: block; }
|
|
1879
1882
|
@media (pointer: coarse), (max-width: 767px) {
|
|
1880
|
-
:host { width:
|
|
1881
|
-
svg { width:
|
|
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")}; }
|
|
1882
1885
|
}
|
|
1883
1886
|
@media (forced-colors: active) {
|
|
1884
1887
|
:host { border-color: CanvasText; background: Canvas; color: CanvasText; forced-color-adjust: auto; }
|
|
@@ -1886,24 +1889,24 @@ svg { display: none; width: 12px; height: 12px; }
|
|
|
1886
1889
|
}
|
|
1887
1890
|
`;
|
|
1888
1891
|
var SWITCH_CSS = `
|
|
1889
|
-
:host { --_w:
|
|
1890
|
-
--_b:
|
|
1891
|
-
--_o:
|
|
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")};
|
|
1892
1895
|
display: inline-block; box-sizing: border-box; position: relative; width: var(--_w); height: var(--_h);
|
|
1893
|
-
flex: none; border: var(--_b) solid
|
|
1894
|
-
background:
|
|
1895
|
-
touch-action: manipulation; transition: background-color
|
|
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")}; }
|
|
1896
1899
|
:host::after { content: ""; position: absolute; top: calc((var(--_h) - 2 * var(--_b) - var(--_k)) / 2); left: var(--_o);
|
|
1897
|
-
width: var(--_k); height: var(--_k); border-radius: 50%; background:
|
|
1898
|
-
box-shadow:
|
|
1899
|
-
:host([checked]) { border-color:
|
|
1900
|
-
background:
|
|
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")}; }
|
|
1901
1904
|
:host([checked])::after { transform: translateX(var(--office-switch-knob-travel, calc(var(--_w) - var(--_k) - 2 * var(--_o) - 2 * var(--_b))));
|
|
1902
|
-
background:
|
|
1903
|
-
:host(:focus-visible) { outline:
|
|
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")}; }
|
|
1904
1907
|
:host([disabled]) { opacity: .5; cursor: not-allowed; }
|
|
1905
1908
|
svg { display: none; }
|
|
1906
|
-
@media (pointer: coarse), (max-width: 767px) { :host { --_w:
|
|
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")}; } }
|
|
1907
1910
|
@media (forced-colors: active) {
|
|
1908
1911
|
:host { border-color: CanvasText; background: Canvas; forced-color-adjust: none; }
|
|
1909
1912
|
:host::after { background: CanvasText; }
|
|
@@ -1995,21 +1998,21 @@ var defineSwitch = definer("office-ui-switch", makeCheckable("switch", SWITCH_CS
|
|
|
1995
1998
|
var CSS11 = `
|
|
1996
1999
|
:host { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; }
|
|
1997
2000
|
:host([open]) { display: flex; }
|
|
1998
|
-
.backdrop { position: absolute; inset: 0; background:
|
|
2001
|
+
.backdrop { position: absolute; inset: 0; background: ${tok("--office-overlay")}; }
|
|
1999
2002
|
.box { position: relative; box-sizing: border-box; display: flex; flex-direction: column;
|
|
2000
|
-
width:
|
|
2001
|
-
background:
|
|
2002
|
-
border:
|
|
2003
|
-
header { display: flex; align-items: center; justify-content: space-between; gap:
|
|
2004
|
-
border-bottom:
|
|
2005
|
-
h2 { margin: 0; font-size:
|
|
2006
|
-
.body { padding:
|
|
2007
|
-
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")}; }
|
|
2008
2011
|
footer[hidden] { display: none; }
|
|
2009
|
-
.close { display: inline-flex; align-items: center; justify-content: center; min-width:
|
|
2010
|
-
min-height:
|
|
2011
|
-
.close svg { width:
|
|
2012
|
-
.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")}; }
|
|
2013
2016
|
@media (forced-colors: active) { .box { border-color: CanvasText; background: Canvas; } .backdrop { background: transparent; } }
|
|
2014
2017
|
`;
|
|
2015
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])';
|
|
@@ -2129,26 +2132,26 @@ var defineDialog = definer("office-ui-dialog", () => {
|
|
|
2129
2132
|
|
|
2130
2133
|
// src/command-search.ts
|
|
2131
2134
|
var CSS12 = `
|
|
2132
|
-
:host { display: inline-flex; align-items: center; min-width: 0; font-family:
|
|
2133
|
-
.field { display: flex; align-items: center; gap:
|
|
2134
|
-
padding: 0
|
|
2135
|
-
color:
|
|
2136
|
-
.field:hover, .field:focus-within { border-color:
|
|
2137
|
-
input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color:
|
|
2138
|
-
font: inherit; font-size:
|
|
2139
|
-
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")};
|
|
2140
2143
|
stroke-linecap: round; stroke-linejoin: round; }
|
|
2141
|
-
ul { position: fixed; inset: auto; margin: 0; padding:
|
|
2142
|
-
box-sizing: border-box; list-style: none; background:
|
|
2143
|
-
border:
|
|
2144
|
-
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")}; }
|
|
2145
2148
|
ul[hidden] { display: none; }
|
|
2146
|
-
li { display: flex; flex-direction: column; justify-content: center; min-height:
|
|
2147
|
-
padding:
|
|
2148
|
-
li[data-active] { background:
|
|
2149
|
-
li[aria-disabled="true"] { cursor: not-allowed; color:
|
|
2150
|
-
li small { color:
|
|
2151
|
-
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")}; }
|
|
2152
2155
|
@media (forced-colors: active) {
|
|
2153
2156
|
.field, ul { border-color: CanvasText; background: Canvas; color: CanvasText; }
|
|
2154
2157
|
li[data-active] { background: Highlight; color: HighlightText; }
|
|
@@ -2327,15 +2330,15 @@ var defineCommandSearch = definer("office-ui-command-search", () => {
|
|
|
2327
2330
|
// src/context-menu.ts
|
|
2328
2331
|
var CSS13 = `
|
|
2329
2332
|
:host { display: contents; }
|
|
2330
|
-
.panel { position: fixed; inset: auto; margin: 0; min-width:
|
|
2331
|
-
background:
|
|
2332
|
-
border:
|
|
2333
|
-
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")}; }
|
|
2334
2337
|
.panel[hidden] { display: none; }
|
|
2335
2338
|
@media (forced-colors: active) { .panel { border-color: CanvasText; background: Canvas; color: CanvasText; } }
|
|
2336
2339
|
`;
|
|
2337
2340
|
var SEPARATOR_CSS = `
|
|
2338
|
-
: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")}; }
|
|
2339
2342
|
@media (forced-colors: active) { :host { background: CanvasText; } }
|
|
2340
2343
|
`;
|
|
2341
2344
|
var ITEMS = "office-ui-menu-item:not([disabled]):not([hidden])";
|
|
@@ -2458,28 +2461,28 @@ var defineContextMenu = definer("office-ui-context-menu", () => {
|
|
|
2458
2461
|
// src/menu.ts
|
|
2459
2462
|
var BUTTON_CSS = `
|
|
2460
2463
|
:host { display: inline-flex; vertical-align: middle; }
|
|
2461
|
-
.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")}; }
|
|
2462
2465
|
:host([variant="stacked"]) .wrap { flex-direction: column; }
|
|
2463
|
-
button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap:
|
|
2464
|
-
min-width:
|
|
2465
|
-
border: 0; border-radius:
|
|
2466
|
-
font: inherit; font-size:
|
|
2467
|
-
:host([variant="stacked"]) .main { flex-direction: column; padding:
|
|
2468
|
-
: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")}; }
|
|
2469
2472
|
:host([variant="stacked"]:not([command])) .main { padding-bottom: 0; }
|
|
2470
|
-
.wrap:hover:not(.disabled) { border-color:
|
|
2471
|
-
button:hover:not(:disabled) { background:
|
|
2472
|
-
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")}); }
|
|
2473
2476
|
button:disabled { opacity: .5; cursor: not-allowed; }
|
|
2474
|
-
button[aria-expanded="true"] { background:
|
|
2475
|
-
.caret svg { width:
|
|
2476
|
-
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")};
|
|
2477
2480
|
stroke-linecap: round; stroke-linejoin: round; }
|
|
2478
2481
|
svg:not([data-painted]) { display: none; }
|
|
2479
|
-
.panel { position: fixed; inset: auto; margin: 0; min-width:
|
|
2480
|
-
background:
|
|
2481
|
-
border:
|
|
2482
|
-
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")}; }
|
|
2483
2486
|
.panel[hidden] { display: none; }
|
|
2484
2487
|
@media (forced-colors: active) {
|
|
2485
2488
|
button { color: ButtonText; } button:disabled { color: GrayText; }
|
|
@@ -2489,13 +2492,13 @@ svg:not([data-painted]) { display: none; }
|
|
|
2489
2492
|
var ITEM_CSS = `
|
|
2490
2493
|
:host { display: block; }
|
|
2491
2494
|
:host([hidden]) { display: none; }
|
|
2492
|
-
button { box-sizing: border-box; display: flex; align-items: center; gap:
|
|
2493
|
-
min-height:
|
|
2494
|
-
background: transparent; color: inherit; font: inherit; font-size:
|
|
2495
|
-
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; }
|
|
2496
2499
|
button:disabled { opacity: .5; cursor: not-allowed; }
|
|
2497
|
-
.check { width:
|
|
2498
|
-
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")};
|
|
2499
2502
|
stroke-linecap: round; stroke-linejoin: round; }
|
|
2500
2503
|
svg:not([data-painted]) { visibility: hidden; }
|
|
2501
2504
|
@media (forced-colors: active) { button:focus-visible { background: Highlight; color: HighlightText; } }
|
|
@@ -2773,35 +2776,35 @@ function clampOptionNumber(raw, min, max) {
|
|
|
2773
2776
|
}
|
|
2774
2777
|
var CSS14 = `
|
|
2775
2778
|
:host { display: contents; }
|
|
2776
|
-
office-ui-dialog { --office-dialog-width:
|
|
2777
|
-
.layout { display: grid; grid-template-columns:
|
|
2778
|
-
nav { display: flex; flex-direction: column; padding:
|
|
2779
|
-
background:
|
|
2780
|
-
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;
|
|
2781
2784
|
font: inherit; text-align: start; cursor: pointer; }
|
|
2782
|
-
nav button[aria-selected="true"] { background:
|
|
2783
|
-
box-shadow: inset
|
|
2784
|
-
nav button:focus-visible { outline:
|
|
2785
|
-
[role="tabpanel"] { padding:
|
|
2786
|
-
.lead { margin: 0 0
|
|
2787
|
-
.unavailable { margin: 0 0
|
|
2788
|
-
section + section { margin-top:
|
|
2789
|
-
h3 { margin: 0 0
|
|
2790
|
-
.desc { margin: 0 0
|
|
2791
|
-
.row { display: flex; align-items: center; gap:
|
|
2792
|
-
.row.indent { padding-inline-start:
|
|
2793
|
-
.row.field > span:first-child { min-width:
|
|
2794
|
-
.row[data-disabled] { color:
|
|
2795
|
-
input[type="text"], input[type="number"], select { min-height:
|
|
2796
|
-
border:
|
|
2797
|
-
input[type="number"] { width:
|
|
2798
|
-
.info { display: inline-grid; place-items: center; width:
|
|
2799
|
-
border-radius: 50%; font-size:
|
|
2800
|
-
.actions { display: flex; gap:
|
|
2801
|
-
.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; }
|
|
2802
2805
|
@media (max-width: 600px) {
|
|
2803
2806
|
.layout { grid-template-columns: 1fr; }
|
|
2804
|
-
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")}; }
|
|
2805
2808
|
nav button { white-space: nowrap; }
|
|
2806
2809
|
.row.field { flex-wrap: wrap; }
|
|
2807
2810
|
}
|
|
@@ -3035,22 +3038,22 @@ function text(doc, tag, content, className) {
|
|
|
3035
3038
|
var GROUP_CSS = `
|
|
3036
3039
|
:host { display: inline-flex; flex: none; align-self: stretch; }
|
|
3037
3040
|
.group { box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;
|
|
3038
|
-
min-height:
|
|
3039
|
-
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); }
|
|
3040
3043
|
:host(:last-child) .group { border-inline-end: 0; }
|
|
3041
|
-
.row { display: flex; align-items: flex-start; gap:
|
|
3044
|
+
.row { display: flex; align-items: flex-start; gap: ${tok("--office-space-1")}; }
|
|
3042
3045
|
::slotted(*) { flex-shrink: 0; }
|
|
3043
|
-
.foot { position: relative; display: flex; justify-content: center; padding-top:
|
|
3044
|
-
.caption { color:
|
|
3045
|
-
line-height:
|
|
3046
|
-
.launcher { position: absolute; inset-inline-end: -6px; bottom: -
|
|
3047
|
-
width:
|
|
3048
|
-
color:
|
|
3049
|
-
.launcher:hover:not(:disabled) { background:
|
|
3050
|
-
.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")}; }
|
|
3051
3054
|
.launcher:disabled { opacity: .45; cursor: not-allowed; }
|
|
3052
3055
|
.launcher[hidden] { display: none; }
|
|
3053
|
-
.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")};
|
|
3054
3057
|
stroke-linecap: round; stroke-linejoin: round; }
|
|
3055
3058
|
@media (forced-colors: active) { .group { border-inline-end-color: CanvasText; } .caption { color: CanvasText; } }
|
|
3056
3059
|
`;
|
|
@@ -3107,14 +3110,14 @@ var defineRibbonGroup = definer("office-ui-ribbon-group", () => {
|
|
|
3107
3110
|
return OfficeUiRibbonGroup;
|
|
3108
3111
|
});
|
|
3109
3112
|
var TOOLBAR_CSS = `
|
|
3110
|
-
:host { display: flex; flex-wrap: wrap; align-items: stretch; gap:
|
|
3111
|
-
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")}; }
|
|
3112
3115
|
@media (forced-colors: active) { :host { border-bottom-color: CanvasText; background: Canvas; } }
|
|
3113
3116
|
`;
|
|
3114
3117
|
var STACK_CSS = `
|
|
3115
3118
|
:host { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
|
|
3116
|
-
gap:
|
|
3117
|
-
: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; }
|
|
3118
3121
|
::slotted(*) { flex-shrink: 0; }
|
|
3119
3122
|
`;
|
|
3120
3123
|
var defineRibbonStack = definer("office-ui-ribbon-stack", () => {
|
|
@@ -3164,208 +3167,506 @@ var defineToolbar = definer("office-ui-toolbar", () => {
|
|
|
3164
3167
|
return OfficeUiToolbar;
|
|
3165
3168
|
});
|
|
3166
3169
|
|
|
3167
|
-
// src/select.ts
|
|
3168
|
-
var
|
|
3169
|
-
|
|
3170
|
-
|
|
3171
|
-
|
|
3172
|
-
|
|
3173
|
-
|
|
3174
|
-
|
|
3175
|
-
|
|
3176
|
-
|
|
3177
|
-
|
|
3178
|
-
|
|
3179
|
-
|
|
3180
|
-
|
|
3181
|
-
|
|
3182
|
-
|
|
3183
|
-
|
|
3184
|
-
|
|
3170
|
+
// src/select-menu.ts
|
|
3171
|
+
var SELECT_OPTION_ATTRIBUTES = [
|
|
3172
|
+
"value",
|
|
3173
|
+
"disabled",
|
|
3174
|
+
"label",
|
|
3175
|
+
"selected",
|
|
3176
|
+
"hidden",
|
|
3177
|
+
"data-display-label",
|
|
3178
|
+
"data-description",
|
|
3179
|
+
"style"
|
|
3180
|
+
];
|
|
3181
|
+
function collectSelectChoices(options) {
|
|
3182
|
+
return options.map((option) => {
|
|
3183
|
+
const parent = option.parentElement;
|
|
3184
|
+
const group = parent?.localName === "optgroup" ? parent : null;
|
|
3185
|
+
return {
|
|
3186
|
+
value: option.value,
|
|
3187
|
+
label: option.label || option.textContent?.trim() || "",
|
|
3188
|
+
disabled: option.disabled || Boolean(group?.disabled),
|
|
3189
|
+
hidden: Boolean(option.hidden) || Boolean(group?.hidden),
|
|
3190
|
+
group: group?.label ?? "",
|
|
3191
|
+
...option.dataset.displayLabel ? { displayLabel: option.dataset.displayLabel } : {},
|
|
3192
|
+
...option.dataset.description ? { description: option.dataset.description } : {},
|
|
3193
|
+
...option.style.fontFamily ? { fontFamily: option.style.fontFamily } : {}
|
|
3194
|
+
};
|
|
3195
|
+
});
|
|
3196
|
+
}
|
|
3197
|
+
function renderSelectMenu(menu, choices, value) {
|
|
3198
|
+
const doc = menu.ownerDocument;
|
|
3199
|
+
const items = [];
|
|
3200
|
+
let previousGroup = "";
|
|
3201
|
+
choices.forEach((choice, index) => {
|
|
3202
|
+
if (choice.hidden) return;
|
|
3203
|
+
if (choice.group && choice.group !== previousGroup) {
|
|
3204
|
+
const heading = doc.createElement("div");
|
|
3205
|
+
heading.className = "group";
|
|
3206
|
+
heading.setAttribute("role", "presentation");
|
|
3207
|
+
heading.textContent = choice.group;
|
|
3208
|
+
items.push(heading);
|
|
3209
|
+
}
|
|
3210
|
+
previousGroup = choice.group;
|
|
3211
|
+
const item = doc.createElement("div");
|
|
3212
|
+
item.className = "option";
|
|
3213
|
+
item.setAttribute("role", "option");
|
|
3214
|
+
item.setAttribute("aria-selected", String(choice.value === value));
|
|
3215
|
+
item.setAttribute("aria-disabled", String(choice.disabled));
|
|
3216
|
+
item.id = `${menu.id}-${index}`;
|
|
3217
|
+
item.dataset.index = String(index);
|
|
3218
|
+
item.textContent = choice.displayLabel ?? choice.label;
|
|
3219
|
+
if (choice.fontFamily) item.style.fontFamily = choice.fontFamily;
|
|
3220
|
+
if (choice.description) {
|
|
3221
|
+
const description = doc.createElement("span");
|
|
3222
|
+
description.className = "description";
|
|
3223
|
+
description.textContent = choice.description;
|
|
3224
|
+
item.append(description);
|
|
3225
|
+
}
|
|
3226
|
+
items.push(item);
|
|
3227
|
+
});
|
|
3228
|
+
menu.replaceChildren(...items);
|
|
3229
|
+
}
|
|
3230
|
+
function tokenPx(el, name, fallback) {
|
|
3231
|
+
const value = el.ownerDocument.defaultView?.getComputedStyle(el).getPropertyValue(name).trim();
|
|
3232
|
+
const px = value?.endsWith("px") ? parseFloat(value) : NaN;
|
|
3233
|
+
return Number.isFinite(px) ? px : fallback;
|
|
3234
|
+
}
|
|
3235
|
+
function positionSelectMenu(menu, trigger, host) {
|
|
3236
|
+
const view = menu.ownerDocument.defaultView;
|
|
3237
|
+
const rect = trigger.getBoundingClientRect();
|
|
3238
|
+
const margin = tokenPx(host, "--office-space-2", 8);
|
|
3239
|
+
const gap = tokenPx(host, "--office-space-1", 4);
|
|
3240
|
+
const width = Math.max(0, view.innerWidth - margin * 2);
|
|
3241
|
+
const below = Math.max(0, view.innerHeight - rect.bottom - gap - margin);
|
|
3242
|
+
const above = Math.max(0, rect.top - gap - margin);
|
|
3243
|
+
menu.style.minWidth = `${Math.min(rect.width, width)}px`;
|
|
3244
|
+
menu.style.maxWidth = `${width}px`;
|
|
3245
|
+
const cap = host.getAttribute("data-font-picker") === "family" ? tokenPx(host, "--office-font-picker-max-height", 320) : tokenPx(host, "--office-select-max-height", 240);
|
|
3246
|
+
menu.style.maxHeight = `${cap}px`;
|
|
3247
|
+
const preferred = menu.getBoundingClientRect().height;
|
|
3248
|
+
const flip = below < preferred && above > below;
|
|
3249
|
+
menu.style.maxHeight = `${Math.min(cap, flip ? above : below)}px`;
|
|
3250
|
+
const { height, width: menuWidth } = menu.getBoundingClientRect();
|
|
3251
|
+
menu.style.top = `${Math.max(margin, flip ? rect.top - gap - height : rect.bottom + gap)}px`;
|
|
3252
|
+
menu.style.left = `${Math.max(margin, Math.min(rect.left, view.innerWidth - menuWidth - margin))}px`;
|
|
3253
|
+
}
|
|
3254
|
+
function markSelectActive(menu, trigger, active, open) {
|
|
3255
|
+
for (const item of menu.querySelectorAll("[data-index]"))
|
|
3256
|
+
item.toggleAttribute("data-active", Number(item.dataset.index) === active && open);
|
|
3257
|
+
if (open && active >= 0) trigger.setAttribute("aria-activedescendant", `${menu.id}-${active}`);
|
|
3258
|
+
menu.querySelector("[data-active]")?.scrollIntoView?.({ block: "nearest" });
|
|
3259
|
+
}
|
|
3260
|
+
function nextSelectActive(choices, active, step) {
|
|
3261
|
+
for (let i = 0; i < choices.length; i++) {
|
|
3262
|
+
active = (active + step + choices.length) % choices.length;
|
|
3263
|
+
if (!choices[active].disabled && !choices[active].hidden) return active;
|
|
3264
|
+
}
|
|
3265
|
+
return active;
|
|
3266
|
+
}
|
|
3267
|
+
var SELECT_PAGE_SIZE = 8;
|
|
3268
|
+
function pageSelectActive(choices, active, direction) {
|
|
3269
|
+
const usable = (index) => !choices[index]?.disabled && !choices[index]?.hidden;
|
|
3270
|
+
const last = choices.length - 1;
|
|
3271
|
+
const target = Math.max(0, Math.min(last, Math.max(active, 0) + direction * SELECT_PAGE_SIZE));
|
|
3272
|
+
for (let index = target; index >= 0 && index <= last; index -= direction)
|
|
3273
|
+
if (usable(index)) return index;
|
|
3274
|
+
return active;
|
|
3275
|
+
}
|
|
3276
|
+
function createSelectTrigger(doc) {
|
|
3277
|
+
const trigger = doc.createElement("button");
|
|
3278
|
+
trigger.type = "button";
|
|
3279
|
+
trigger.setAttribute("part", "trigger");
|
|
3280
|
+
trigger.setAttribute("role", "combobox");
|
|
3281
|
+
trigger.setAttribute("aria-haspopup", "listbox");
|
|
3282
|
+
trigger.setAttribute("aria-expanded", "false");
|
|
3283
|
+
const icon2 = doc.createElement("slot");
|
|
3284
|
+
icon2.name = "icon";
|
|
3285
|
+
const text2 = doc.createElement("span");
|
|
3286
|
+
text2.className = "value";
|
|
3287
|
+
text2.setAttribute("part", "value");
|
|
3288
|
+
const chevron = doc.createElement("span");
|
|
3289
|
+
chevron.className = "chevron";
|
|
3290
|
+
chevron.setAttribute("part", "indicator");
|
|
3291
|
+
chevron.setAttribute("aria-hidden", "true");
|
|
3292
|
+
const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
3293
|
+
svg.setAttribute("viewBox", "0 0 24 24");
|
|
3294
|
+
svg.setAttribute("fill", "none");
|
|
3295
|
+
svg.setAttribute("stroke", "currentColor");
|
|
3296
|
+
svg.setAttribute("stroke-width", "2");
|
|
3297
|
+
svg.setAttribute("stroke-linecap", "round");
|
|
3298
|
+
svg.setAttribute("stroke-linejoin", "round");
|
|
3299
|
+
const path = doc.createElementNS(svg.namespaceURI, "path");
|
|
3300
|
+
path.setAttribute("d", "m6 9 6 6 6-6");
|
|
3301
|
+
svg.append(path);
|
|
3302
|
+
chevron.append(svg);
|
|
3303
|
+
trigger.append(icon2, text2, chevron);
|
|
3304
|
+
return { trigger, text: text2 };
|
|
3305
|
+
}
|
|
3306
|
+
function prependSelectCustomSlot(host, menu) {
|
|
3307
|
+
if (!host.querySelector('[slot="custom"]')) return;
|
|
3308
|
+
const custom = host.ownerDocument.createElement("slot");
|
|
3309
|
+
custom.name = "custom";
|
|
3310
|
+
menu.prepend(custom);
|
|
3311
|
+
}
|
|
3312
|
+
|
|
3313
|
+
// src/select-styles.ts
|
|
3314
|
+
var SELECT_CSS = `
|
|
3315
|
+
:host { display: inline-block; box-sizing: border-box; min-width: 0; max-width: 100%;
|
|
3316
|
+
color: ${tok("--office-foreground")}; font: inherit; font-size: ${tok("--office-font-size-sm")}; vertical-align: middle; }
|
|
3317
|
+
:host([disabled]) { opacity: .5; cursor: not-allowed; }
|
|
3318
|
+
button { box-sizing: border-box; width: 100%; min-height: ${tok("--office-field-height")}; display: flex; align-items: center;
|
|
3319
|
+
justify-content: space-between; gap: ${tok("--office-space-2-5")}; padding: ${tok("--office-space-1")} ${tok("--office-space-1-5")};
|
|
3320
|
+
border: ${tok("--office-border-width")} solid ${tok("--office-field-border")}; border-radius: ${tok("--office-field-radius")};
|
|
3321
|
+
background: ${tok("--office-select-background")}; color: inherit; font: inherit; font-size: inherit; text-align: start; cursor: pointer; }
|
|
3322
|
+
button:focus-visible { ${FOCUS_RING} }
|
|
3323
|
+
button:disabled { cursor: not-allowed; }
|
|
3324
|
+
.value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
3325
|
+
.chevron svg { display: none; }
|
|
3326
|
+
.chevron { flex: none; width: ${tok("--office-chevron-size")}; height: ${tok("--office-chevron-size")};
|
|
3327
|
+
margin: 0 ${tok("--office-space-0")} ${tok("--office-space-0")} 0;
|
|
3328
|
+
border-right: calc(${tok("--office-border-width")} * 1.5) solid currentColor;
|
|
3329
|
+
border-bottom: calc(${tok("--office-border-width")} * 1.5) solid currentColor; transform: rotate(45deg); }
|
|
3330
|
+
:host([open]) .chevron { margin: ${tok("--office-space-0")} ${tok("--office-space-0")} 0 0; transform: rotate(225deg); }
|
|
3331
|
+
.menu { box-sizing: border-box; position: fixed; margin: 0; padding: ${tok("--office-space-1")};
|
|
3332
|
+
min-width: ${tok("--office-select-menu-min-width")}; max-height: min(${tok("--office-select-max-height")}, 50vh); overflow: auto;
|
|
3333
|
+
border: ${tok("--office-border-width")} solid ${tok("--office-field-border")}; border-radius: ${tok("--office-field-radius")};
|
|
3334
|
+
background: ${tok("--office-popover")}; color: ${tok("--office-popover-foreground")}; box-shadow: ${tok("--office-shadow")};
|
|
3335
|
+
font: inherit; font-size: inherit; }
|
|
3336
|
+
.menu:not(:popover-open):not([data-fallback-open]) { display: none; }
|
|
3337
|
+
.option { display: block; box-sizing: border-box; width: 100%; padding: ${tok("--office-space-1-5")} ${tok("--office-space-2")};
|
|
3338
|
+
border-radius: ${tok("--office-radius-sm")}; cursor: pointer; white-space: nowrap; }
|
|
3339
|
+
.group { padding: ${tok("--office-space-1-5")} ${tok("--office-space-2")} ${tok("--office-space-0")};
|
|
3340
|
+
color: ${tok("--office-muted-foreground")}; font-size: .9em; font-weight: ${tok("--office-font-weight-bold")}; }
|
|
3341
|
+
.option:not([aria-disabled="true"]):hover, .option[data-active]:not([aria-selected="true"]) {
|
|
3342
|
+
background: ${tok("--office-select-option-active")}; }
|
|
3343
|
+
.option[aria-selected="true"] { background: ${tok("--office-accent")}; color: ${tok("--office-accent-foreground")}; }
|
|
3344
|
+
.option[aria-selected="true"]:hover { filter: brightness(1.08); }
|
|
3345
|
+
.option[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
|
|
3346
|
+
.description { flex: none; color: ${tok("--office-muted-foreground")}; font-size: ${tok("--office-font-size-2xs")}; }
|
|
3347
|
+
|
|
3348
|
+
:host([variant^="ribbon-"][disabled]) { opacity: .4; }
|
|
3349
|
+
:host([variant^="ribbon-"]) button { height: ${tok("--office-ribbon-combo-height")}; min-height: ${tok("--office-ribbon-combo-height")};
|
|
3350
|
+
padding: ${tok("--office-space-1")} ${tok("--office-space-2")}; gap: ${tok("--office-space-1")};
|
|
3351
|
+
border: ${tok("--office-border-width")} solid color-mix(in oklab, ${tok("--office-border")} 60%, transparent);
|
|
3352
|
+
border-radius: ${tok("--office-radius-sm")}; font-size: ${tok("--office-font-size-sm")};
|
|
3353
|
+
background: color-mix(in oklab, ${tok("--office-background")} 60%, transparent); color: ${tok("--office-foreground")}; }
|
|
3354
|
+
:host([variant^="ribbon-"]) .value { flex: 1; min-width: 0; }
|
|
3355
|
+
:host([variant^="ribbon-"]) .chevron { width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; margin: 0; border: 0; transform: none; }
|
|
3356
|
+
:host([variant^="ribbon-"]) .chevron svg { display: block; width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; }
|
|
3357
|
+
:host([variant="ribbon-font"]) .chevron { color: ${tok("--office-muted-foreground")}; }
|
|
3358
|
+
:host([variant="ribbon-font"][data-font-picker="size"]) button { padding-inline: ${tok("--office-space-1-5")}; }
|
|
3359
|
+
:host([variant="ribbon-icon"]) button { width: ${tok("--office-ribbon-icon-select-width")}; gap: ${tok("--office-space-1-5")};
|
|
3360
|
+
padding: ${tok("--office-space-1-5")} ${tok("--office-space-2-5")}; border: 0; background: ${tok("--office-surface")}; justify-content: center; }
|
|
3361
|
+
:host([variant="ribbon-icon"]) :is(.value, .chevron) { display: none; }
|
|
3362
|
+
::slotted(svg[slot="icon"]) { display: block; width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; flex: none; }
|
|
3363
|
+
:host([variant^="ribbon-"]) button:hover:not(:disabled) { background: ${tok("--office-selected")}; }
|
|
3364
|
+
:host([variant^="ribbon-"]) .menu { width: ${tok("--office-select-ribbon-menu-width")}; padding: ${tok("--office-space-1")} 0;
|
|
3365
|
+
border-radius: ${tok("--office-radius-lg")}; font-size: ${tok("--office-font-size-sm")}; }
|
|
3366
|
+
:host([data-font-picker="family"]) .menu { width: ${tok("--office-font-picker-width")}; }
|
|
3367
|
+
:host([variant^="ribbon-"]) .option { display: flex; justify-content: space-between; gap: ${tok("--office-space-3")};
|
|
3368
|
+
padding: ${tok("--office-space-1-5")} ${tok("--office-space-3")}; border-radius: 0; }
|
|
3369
|
+
:host([variant^="ribbon-"]) .option[aria-selected="true"] { background: transparent; color: ${tok("--office-foreground")}; }
|
|
3370
|
+
:host([variant^="ribbon-"]) .option:hover, :host([variant^="ribbon-"]) .option[data-active] { background: ${tok("--office-surface")}; filter: none; }
|
|
3371
|
+
:host([variant^="ribbon-"]) .group { padding: ${tok("--office-space-2")} ${tok("--office-space-3")} ${tok("--office-space-1")};
|
|
3372
|
+
text-transform: uppercase; letter-spacing: .02em; font-size: ${tok("--office-font-size-2xs")}; }
|
|
3373
|
+
@media (pointer: coarse), (max-width: 767px) {
|
|
3374
|
+
button, :host([variant^="ribbon-"]) button { min-height: ${tok("--office-target-size-touch")}; }
|
|
3375
|
+
:host([variant^="ribbon-"]) button { height: ${tok("--office-target-size-touch")}; }
|
|
3376
|
+
}
|
|
3185
3377
|
@media (forced-colors: active) {
|
|
3186
|
-
button,
|
|
3187
|
-
|
|
3378
|
+
button, .menu { border-color: CanvasText; background: Canvas; color: CanvasText; }
|
|
3379
|
+
.option[aria-selected="true"], .option[data-active], .option:not([aria-disabled="true"]):hover {
|
|
3380
|
+
background: Highlight; color: HighlightText; }
|
|
3188
3381
|
}
|
|
3189
3382
|
`;
|
|
3383
|
+
|
|
3384
|
+
// src/select.ts
|
|
3190
3385
|
var uid2 = 0;
|
|
3191
3386
|
var defineSelect = definer("office-ui-select", () => {
|
|
3192
3387
|
class OfficeUiSelect extends HTMLElement {
|
|
3388
|
+
static formAssociated = true;
|
|
3193
3389
|
static observedAttributes = ["value", "disabled", "aria-label"];
|
|
3194
|
-
|
|
3195
|
-
current = "";
|
|
3196
|
-
active = -1;
|
|
3197
|
-
typed = "";
|
|
3198
|
-
typedAt = 0;
|
|
3390
|
+
internals;
|
|
3199
3391
|
trigger;
|
|
3200
|
-
|
|
3201
|
-
|
|
3202
|
-
|
|
3392
|
+
text;
|
|
3393
|
+
menu;
|
|
3394
|
+
observer;
|
|
3395
|
+
refreshFrame = 0;
|
|
3396
|
+
data = [];
|
|
3397
|
+
choices = [];
|
|
3398
|
+
active = -1;
|
|
3399
|
+
isOpen = false;
|
|
3400
|
+
search = "";
|
|
3401
|
+
searchTimer = 0;
|
|
3402
|
+
defaultValue = "";
|
|
3403
|
+
menuKey = "";
|
|
3203
3404
|
constructor() {
|
|
3204
3405
|
super();
|
|
3406
|
+
try {
|
|
3407
|
+
this.internals = this.attachInternals();
|
|
3408
|
+
} catch {
|
|
3409
|
+
this.internals = void 0;
|
|
3410
|
+
}
|
|
3205
3411
|
const doc = this.ownerDocument;
|
|
3206
3412
|
const root = this.attachShadow({ mode: "open", delegatesFocus: true });
|
|
3207
|
-
attachStyles(root, controlCss(
|
|
3208
|
-
this.trigger = doc
|
|
3209
|
-
this.
|
|
3210
|
-
this.
|
|
3211
|
-
this.
|
|
3212
|
-
this.
|
|
3213
|
-
this.
|
|
3214
|
-
this.
|
|
3215
|
-
|
|
3216
|
-
|
|
3217
|
-
|
|
3218
|
-
this.trigger.
|
|
3219
|
-
this.
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
this.
|
|
3223
|
-
|
|
3224
|
-
|
|
3225
|
-
this.trigger.addEventListener("keydown", (event) => this.onKey(event));
|
|
3226
|
-
this.trigger.addEventListener("blur", () => this.close());
|
|
3227
|
-
this.list.addEventListener("mousedown", (event) => event.preventDefault());
|
|
3228
|
-
this.list.addEventListener("click", (event) => {
|
|
3229
|
-
const item = event.target.closest("li");
|
|
3230
|
-
if (item) this.choose(Number(item.dataset.index));
|
|
3413
|
+
attachStyles(root, controlCss(SELECT_CSS));
|
|
3414
|
+
({ trigger: this.trigger, text: this.text } = createSelectTrigger(doc));
|
|
3415
|
+
this.menu = doc.createElement("div");
|
|
3416
|
+
this.menu.className = "menu";
|
|
3417
|
+
this.menu.id = `office-ui-select-options-${++uid2}`;
|
|
3418
|
+
this.menu.setAttribute("role", "listbox");
|
|
3419
|
+
this.menu.setAttribute("popover", "manual");
|
|
3420
|
+
this.menu.setAttribute("part", "popup");
|
|
3421
|
+
this.trigger.setAttribute("aria-controls", this.menu.id);
|
|
3422
|
+
root.append(this.trigger, this.menu);
|
|
3423
|
+
this.trigger.addEventListener("click", () => this.isOpen ? this.close() : this.show());
|
|
3424
|
+
this.trigger.addEventListener("keydown", (event) => this.onKeyDown(event));
|
|
3425
|
+
this.menu.addEventListener("pointerdown", (event) => {
|
|
3426
|
+
if (event.target.closest("[data-index]")) event.preventDefault();
|
|
3427
|
+
});
|
|
3428
|
+
this.menu.addEventListener("click", (event) => {
|
|
3429
|
+
const target = event.target.closest("[data-index]");
|
|
3430
|
+
if (target) this.commit(Number(target.dataset.index));
|
|
3231
3431
|
});
|
|
3432
|
+
const Observer = doc.defaultView?.MutationObserver;
|
|
3433
|
+
this.observer = Observer ? new Observer(() => {
|
|
3434
|
+
const view = this.ownerDocument.defaultView;
|
|
3435
|
+
if (this.refreshFrame || !view) return;
|
|
3436
|
+
this.refreshFrame = view.requestAnimationFrame(() => {
|
|
3437
|
+
this.refreshFrame = 0;
|
|
3438
|
+
this.refresh();
|
|
3439
|
+
});
|
|
3440
|
+
}) : void 0;
|
|
3232
3441
|
}
|
|
3233
3442
|
connectedCallback() {
|
|
3234
|
-
this.
|
|
3443
|
+
this.defaultValue = this.getAttribute("value") ?? "";
|
|
3444
|
+
this.observer?.observe(this, {
|
|
3445
|
+
childList: true,
|
|
3446
|
+
subtree: true,
|
|
3447
|
+
attributes: true,
|
|
3448
|
+
characterData: true,
|
|
3449
|
+
attributeFilter: SELECT_OPTION_ATTRIBUTES
|
|
3450
|
+
});
|
|
3451
|
+
this.refresh();
|
|
3235
3452
|
}
|
|
3236
|
-
|
|
3237
|
-
|
|
3238
|
-
this.
|
|
3453
|
+
disconnectedCallback() {
|
|
3454
|
+
this.close();
|
|
3455
|
+
const view = this.ownerDocument.defaultView;
|
|
3456
|
+
view?.clearTimeout(this.searchTimer);
|
|
3457
|
+
this.searchTimer = 0;
|
|
3458
|
+
this.search = "";
|
|
3459
|
+
this.observer?.disconnect();
|
|
3460
|
+
if (this.refreshFrame) view?.cancelAnimationFrame(this.refreshFrame);
|
|
3461
|
+
this.refreshFrame = 0;
|
|
3239
3462
|
}
|
|
3463
|
+
attributeChangedCallback() {
|
|
3464
|
+
this.refresh();
|
|
3465
|
+
}
|
|
3466
|
+
/** The `<option>` children, or the programmatic options when there are none. */
|
|
3240
3467
|
get options() {
|
|
3241
|
-
|
|
3468
|
+
const children = [...this.querySelectorAll("option")];
|
|
3469
|
+
return children.length ? children : this.data;
|
|
3242
3470
|
}
|
|
3243
3471
|
set options(next) {
|
|
3244
|
-
this.
|
|
3245
|
-
this.
|
|
3472
|
+
this.data = [...next];
|
|
3473
|
+
this.refresh();
|
|
3246
3474
|
}
|
|
3247
3475
|
get value() {
|
|
3248
|
-
|
|
3476
|
+
const requested = this.getAttribute("value");
|
|
3477
|
+
const choices = this.choices.length ? this.choices : this.collect();
|
|
3478
|
+
if (requested !== null && this.getAttribute("variant") === "ribbon-font") return requested;
|
|
3479
|
+
if (requested !== null && (!choices.length || choices.some((c) => c.value === requested)))
|
|
3480
|
+
return requested;
|
|
3481
|
+
return [...this.querySelectorAll("option")].find((option) => option.selected)?.value ?? choices.find((choice) => !choice.disabled && !choice.hidden)?.value ?? choices[0]?.value ?? requested ?? "";
|
|
3249
3482
|
}
|
|
3250
3483
|
set value(next) {
|
|
3251
|
-
this.
|
|
3252
|
-
this.sync();
|
|
3484
|
+
this.setAttribute("value", String(next ?? ""));
|
|
3253
3485
|
}
|
|
3254
3486
|
get selectedIndex() {
|
|
3255
|
-
return this.
|
|
3487
|
+
return this.options.findIndex((option) => option.value === this.value);
|
|
3256
3488
|
}
|
|
3257
3489
|
set selectedIndex(index) {
|
|
3258
|
-
|
|
3259
|
-
if (option) this.value = option.value;
|
|
3490
|
+
this.value = this.options[index]?.value ?? "";
|
|
3260
3491
|
}
|
|
3261
3492
|
get disabled() {
|
|
3262
3493
|
return this.hasAttribute("disabled");
|
|
3263
3494
|
}
|
|
3264
|
-
set disabled(
|
|
3265
|
-
this.toggleAttribute("disabled", Boolean(
|
|
3495
|
+
set disabled(next) {
|
|
3496
|
+
this.toggleAttribute("disabled", Boolean(next));
|
|
3266
3497
|
}
|
|
3267
|
-
|
|
3268
|
-
|
|
3498
|
+
focus(options) {
|
|
3499
|
+
this.trigger.focus(options);
|
|
3269
3500
|
}
|
|
3270
|
-
|
|
3271
|
-
|
|
3272
|
-
this.list.hidden = false;
|
|
3273
|
-
this.trigger.setAttribute("aria-expanded", "true");
|
|
3274
|
-
this.setActive(this.selectedIndex >= 0 ? this.selectedIndex : this.step(-1, 1));
|
|
3501
|
+
formResetCallback() {
|
|
3502
|
+
this.value = this.defaultValue;
|
|
3275
3503
|
}
|
|
3276
|
-
|
|
3277
|
-
this.
|
|
3278
|
-
|
|
3279
|
-
|
|
3280
|
-
|
|
3504
|
+
formDisabledCallback(disabled) {
|
|
3505
|
+
this.disabled = disabled;
|
|
3506
|
+
}
|
|
3507
|
+
collect() {
|
|
3508
|
+
const children = [...this.querySelectorAll("option")];
|
|
3509
|
+
if (children.length) return collectSelectChoices(children);
|
|
3510
|
+
return this.data.map((option) => ({
|
|
3511
|
+
value: option.value,
|
|
3512
|
+
label: option.label,
|
|
3513
|
+
disabled: option.disabled === true,
|
|
3514
|
+
hidden: false,
|
|
3515
|
+
group: ""
|
|
3516
|
+
}));
|
|
3281
3517
|
}
|
|
3282
|
-
|
|
3283
|
-
|
|
3284
|
-
|
|
3518
|
+
refresh() {
|
|
3519
|
+
if (!this.trigger) return;
|
|
3520
|
+
this.choices = this.collect();
|
|
3521
|
+
if (!this.hasAttribute("value") && this.choices.length) {
|
|
3522
|
+
const children = [...this.querySelectorAll("option")];
|
|
3523
|
+
this.setAttribute(
|
|
3524
|
+
"value",
|
|
3525
|
+
children.find((option) => option.selected)?.value ?? this.choices.find((choice) => !choice.disabled && !choice.hidden)?.value ?? this.choices[0].value
|
|
3526
|
+
);
|
|
3527
|
+
return;
|
|
3285
3528
|
}
|
|
3286
|
-
|
|
3529
|
+
const shown = this.choices.find((choice) => choice.value === this.value);
|
|
3530
|
+
this.text.textContent = shown?.displayLabel ?? shown?.label ?? this.value;
|
|
3531
|
+
this.trigger.disabled = this.disabled;
|
|
3532
|
+
if (this.disabled) this.close();
|
|
3533
|
+
const name = this.getAttribute("aria-label");
|
|
3534
|
+
if (name) this.trigger.setAttribute("aria-label", name);
|
|
3535
|
+
else this.trigger.removeAttribute("aria-label");
|
|
3536
|
+
this.internals?.setFormValue?.(this.disabled ? null : this.value);
|
|
3537
|
+
if ((this.isOpen || this.menu.childElementCount) && this.menuKey !== this.currentMenuKey())
|
|
3538
|
+
this.renderMenu();
|
|
3287
3539
|
}
|
|
3288
|
-
|
|
3289
|
-
this.
|
|
3290
|
-
this.list.querySelectorAll("li").forEach((item, i) => item.toggleAttribute("data-active", i === index));
|
|
3291
|
-
if (index >= 0) this.trigger.setAttribute("aria-activedescendant", `${this.domId}-${index}`);
|
|
3540
|
+
currentMenuKey() {
|
|
3541
|
+
return `${this.value}|${JSON.stringify(this.choices)}`;
|
|
3292
3542
|
}
|
|
3293
|
-
|
|
3294
|
-
|
|
3295
|
-
|
|
3296
|
-
|
|
3297
|
-
this.
|
|
3543
|
+
renderMenu() {
|
|
3544
|
+
this.menuKey = this.currentMenuKey();
|
|
3545
|
+
renderSelectMenu(this.menu, this.choices, this.value);
|
|
3546
|
+
prependSelectCustomSlot(this, this.menu);
|
|
3547
|
+
markSelectActive(this.menu, this.trigger, this.active, this.isOpen);
|
|
3548
|
+
}
|
|
3549
|
+
show() {
|
|
3550
|
+
if (this.disabled || this.isOpen || !this.choices.some((c) => !c.disabled && !c.hidden))
|
|
3551
|
+
return;
|
|
3552
|
+
this.isOpen = true;
|
|
3553
|
+
this.setAttribute("open", "");
|
|
3554
|
+
const selected = this.choices.findIndex(
|
|
3555
|
+
(choice) => choice.value === this.value && !choice.disabled && !choice.hidden
|
|
3556
|
+
);
|
|
3557
|
+
this.active = selected >= 0 ? selected : this.choices.findIndex((choice) => !choice.disabled && !choice.hidden);
|
|
3558
|
+
this.renderMenu();
|
|
3559
|
+
if (typeof this.menu.showPopover === "function") this.menu.showPopover();
|
|
3560
|
+
else this.menu.dataset.fallbackOpen = "";
|
|
3561
|
+
this.trigger.setAttribute("aria-expanded", "true");
|
|
3562
|
+
this.position();
|
|
3563
|
+
markSelectActive(this.menu, this.trigger, this.active, this.isOpen);
|
|
3564
|
+
const view = this.ownerDocument.defaultView;
|
|
3565
|
+
this.ownerDocument.addEventListener("pointerdown", this.onOutside, true);
|
|
3566
|
+
view?.addEventListener("resize", this.position);
|
|
3567
|
+
view?.addEventListener("scroll", this.position, true);
|
|
3568
|
+
}
|
|
3569
|
+
close() {
|
|
3570
|
+
if (!this.isOpen) return;
|
|
3571
|
+
this.isOpen = false;
|
|
3572
|
+
const view = this.ownerDocument.defaultView;
|
|
3573
|
+
view?.clearTimeout(this.searchTimer);
|
|
3574
|
+
this.search = "";
|
|
3575
|
+
this.removeAttribute("open");
|
|
3576
|
+
try {
|
|
3577
|
+
if (this.menu.matches(":popover-open")) this.menu.hidePopover();
|
|
3578
|
+
} catch {
|
|
3579
|
+
}
|
|
3580
|
+
delete this.menu.dataset.fallbackOpen;
|
|
3581
|
+
this.trigger.setAttribute("aria-expanded", "false");
|
|
3582
|
+
this.trigger.removeAttribute("aria-activedescendant");
|
|
3583
|
+
this.ownerDocument.removeEventListener("pointerdown", this.onOutside, true);
|
|
3584
|
+
view?.removeEventListener("resize", this.position);
|
|
3585
|
+
view?.removeEventListener("scroll", this.position, true);
|
|
3586
|
+
}
|
|
3587
|
+
onOutside = (event) => {
|
|
3588
|
+
if (!event.composedPath().includes(this)) this.close();
|
|
3589
|
+
};
|
|
3590
|
+
position = () => {
|
|
3591
|
+
if (this.isOpen) positionSelectMenu(this.menu, this.trigger, this);
|
|
3592
|
+
};
|
|
3593
|
+
move(step) {
|
|
3594
|
+
if (!this.isOpen) this.show();
|
|
3595
|
+
if (!this.isOpen) return;
|
|
3596
|
+
this.active = nextSelectActive(this.choices, this.active, step);
|
|
3597
|
+
markSelectActive(this.menu, this.trigger, this.active, this.isOpen);
|
|
3598
|
+
}
|
|
3599
|
+
commit(index) {
|
|
3600
|
+
const choice = this.choices[index];
|
|
3601
|
+
if (!choice || choice.disabled || choice.hidden) return;
|
|
3602
|
+
const changed = this.value !== choice.value;
|
|
3603
|
+
this.value = choice.value;
|
|
3298
3604
|
this.close();
|
|
3605
|
+
this.trigger.focus();
|
|
3299
3606
|
if (changed) {
|
|
3300
3607
|
this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
|
|
3301
3608
|
this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
|
|
3302
3609
|
}
|
|
3303
3610
|
}
|
|
3304
|
-
|
|
3611
|
+
onKeyDown(event) {
|
|
3305
3612
|
if (this.disabled) return;
|
|
3306
|
-
const
|
|
3307
|
-
if (key === "ArrowDown" || key === "ArrowUp") {
|
|
3613
|
+
const stop = () => {
|
|
3308
3614
|
event.preventDefault();
|
|
3309
|
-
|
|
3310
|
-
|
|
3311
|
-
|
|
3312
|
-
|
|
3313
|
-
|
|
3314
|
-
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
} else if (key === "
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
this.
|
|
3324
|
-
|
|
3325
|
-
|
|
3326
|
-
|
|
3327
|
-
this.
|
|
3328
|
-
|
|
3329
|
-
|
|
3330
|
-
|
|
3331
|
-
|
|
3615
|
+
event.stopPropagation();
|
|
3616
|
+
};
|
|
3617
|
+
if (event.key === "ArrowDown" || event.key === "ArrowUp") {
|
|
3618
|
+
stop();
|
|
3619
|
+
this.move(event.key === "ArrowDown" ? 1 : -1);
|
|
3620
|
+
} else if (event.key === "Home" || event.key === "End") {
|
|
3621
|
+
stop();
|
|
3622
|
+
this.show();
|
|
3623
|
+
this.active = event.key === "Home" ? nextSelectActive(this.choices, -1, 1) : nextSelectActive(this.choices, 0, -1);
|
|
3624
|
+
markSelectActive(this.menu, this.trigger, this.active, this.isOpen);
|
|
3625
|
+
} else if (event.key === "PageUp" || event.key === "PageDown") {
|
|
3626
|
+
stop();
|
|
3627
|
+
this.show();
|
|
3628
|
+
this.active = pageSelectActive(
|
|
3629
|
+
this.choices,
|
|
3630
|
+
this.active,
|
|
3631
|
+
event.key === "PageDown" ? 1 : -1
|
|
3632
|
+
);
|
|
3633
|
+
markSelectActive(this.menu, this.trigger, this.active, this.isOpen);
|
|
3634
|
+
} else if (event.key === "Enter" || event.key === " ") {
|
|
3635
|
+
stop();
|
|
3636
|
+
if (this.isOpen) this.commit(this.active);
|
|
3637
|
+
else this.show();
|
|
3638
|
+
} else if (event.key === "Escape" && this.isOpen) {
|
|
3639
|
+
stop();
|
|
3640
|
+
this.close();
|
|
3641
|
+
this.trigger.focus();
|
|
3642
|
+
} else if (event.key === "Tab") this.close();
|
|
3643
|
+
else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
|
|
3644
|
+
event.stopPropagation();
|
|
3645
|
+
const view = this.ownerDocument.defaultView;
|
|
3646
|
+
this.search += event.key.toLocaleLowerCase();
|
|
3647
|
+
view?.clearTimeout(this.searchTimer);
|
|
3648
|
+
this.searchTimer = view?.setTimeout(() => {
|
|
3649
|
+
this.search = "";
|
|
3650
|
+
}, 700) ?? 0;
|
|
3651
|
+
this.show();
|
|
3652
|
+
const index = this.choices.findIndex(
|
|
3653
|
+
(choice) => !choice.disabled && !choice.hidden && choice.label.toLocaleLowerCase().startsWith(this.search)
|
|
3332
3654
|
);
|
|
3333
3655
|
if (index >= 0) {
|
|
3334
|
-
|
|
3335
|
-
|
|
3656
|
+
this.active = index;
|
|
3657
|
+
markSelectActive(this.menu, this.trigger, this.active, this.isOpen);
|
|
3336
3658
|
}
|
|
3337
3659
|
}
|
|
3338
3660
|
}
|
|
3339
|
-
sync() {
|
|
3340
|
-
this.trigger.disabled = this.disabled;
|
|
3341
|
-
this.setAttribute("aria-disabled", String(this.disabled));
|
|
3342
|
-
const name = this.getAttribute("aria-label");
|
|
3343
|
-
if (name) this.trigger.setAttribute("aria-label", name);
|
|
3344
|
-
else this.trigger.removeAttribute("aria-label");
|
|
3345
|
-
this.label.textContent = this.opts[this.selectedIndex]?.label ?? "";
|
|
3346
|
-
this.list.replaceChildren(
|
|
3347
|
-
...this.opts.map((option, index) => {
|
|
3348
|
-
const item = this.ownerDocument.createElement("li");
|
|
3349
|
-
item.id = `${this.domId}-${index}`;
|
|
3350
|
-
item.dataset.index = String(index);
|
|
3351
|
-
item.setAttribute("role", "option");
|
|
3352
|
-
item.setAttribute("aria-selected", String(option.value === this.current));
|
|
3353
|
-
if (option.disabled) item.setAttribute("aria-disabled", "true");
|
|
3354
|
-
item.textContent = option.label;
|
|
3355
|
-
return item;
|
|
3356
|
-
})
|
|
3357
|
-
);
|
|
3358
|
-
if (this.isOpen) this.setActive(Math.min(this.active, this.opts.length - 1));
|
|
3359
|
-
}
|
|
3360
3661
|
}
|
|
3361
3662
|
return OfficeUiSelect;
|
|
3362
3663
|
});
|
|
3363
3664
|
|
|
3364
3665
|
// src/status-bar.ts
|
|
3365
3666
|
var BAR_CSS = `
|
|
3366
|
-
:host { display: flex; align-items: center; gap:
|
|
3367
|
-
background:
|
|
3368
|
-
border-top:
|
|
3667
|
+
: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")};
|
|
3668
|
+
background: ${tok("--office-surface")}; color: ${tok("--office-foreground")};
|
|
3669
|
+
border-top: ${tok("--office-border-width")} solid ${tok("--office-border")}; font-family: ${tok("--office-font")}; }
|
|
3369
3670
|
::slotted([slot="end"]) { margin-inline-start: auto; }
|
|
3370
3671
|
@media (forced-colors: active) { :host { background: Canvas; color: CanvasText; border-top-color: CanvasText; } }
|
|
3371
3672
|
`;
|
|
@@ -3388,12 +3689,12 @@ var defineStatusBar = definer("office-ui-status-bar", () => {
|
|
|
3388
3689
|
return OfficeUiStatusBar;
|
|
3389
3690
|
});
|
|
3390
3691
|
var ITEM_CSS2 = `
|
|
3391
|
-
:host { display: inline-flex; align-items: center; gap:
|
|
3392
|
-
.label { color:
|
|
3393
|
-
button { all: unset; display: inline-flex; gap:
|
|
3394
|
-
min-height:
|
|
3395
|
-
button:hover { background:
|
|
3396
|
-
button:focus-visible { outline:
|
|
3692
|
+
:host { display: inline-flex; align-items: center; gap: ${tok("--office-space-1")}; white-space: nowrap; }
|
|
3693
|
+
.label { color: ${tok("--office-muted-foreground")}; }
|
|
3694
|
+
button { all: unset; display: inline-flex; gap: ${tok("--office-space-1")}; align-items: center; cursor: pointer; padding: 0 ${tok("--office-space-1")};
|
|
3695
|
+
min-height: ${tok("--office-target-size")}; border-radius: ${tok("--office-radius-sm")}; }
|
|
3696
|
+
button:hover { background: ${tok("--office-background")}; }
|
|
3697
|
+
button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; }
|
|
3397
3698
|
@media (forced-colors: active) { .label { color: GrayText; } button:focus-visible { outline-color: Highlight; } }
|
|
3398
3699
|
`;
|
|
3399
3700
|
var defineStatusItem = definer("office-ui-status-item", () => {
|
|
@@ -3444,7 +3745,7 @@ var defineStatusItem = definer("office-ui-status-item", () => {
|
|
|
3444
3745
|
} else {
|
|
3445
3746
|
wrap = doc.createElement("span");
|
|
3446
3747
|
wrap.style.display = "inline-flex";
|
|
3447
|
-
wrap.style.gap = "
|
|
3748
|
+
wrap.style.gap = tok("--office-space-1");
|
|
3448
3749
|
}
|
|
3449
3750
|
wrap.className = "wrap";
|
|
3450
3751
|
wrap.append(content);
|
|
@@ -3455,27 +3756,27 @@ var defineStatusItem = definer("office-ui-status-item", () => {
|
|
|
3455
3756
|
});
|
|
3456
3757
|
|
|
3457
3758
|
// src/tab-strip.ts
|
|
3458
|
-
var
|
|
3459
|
-
:host { display: flex; align-items: stretch; min-width: 0; min-height:
|
|
3460
|
-
background:
|
|
3461
|
-
border-top:
|
|
3462
|
-
font-family:
|
|
3463
|
-
.step { flex: none; display: inline-grid; place-items: center; width:
|
|
3464
|
-
min-height:
|
|
3759
|
+
var CSS15 = `
|
|
3760
|
+
: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")};
|
|
3761
|
+
background: ${tok("--office-surface")}; color: ${tok("--office-muted-foreground")};
|
|
3762
|
+
border-top: ${tok("--office-border-width")} solid ${tok("--office-border")}; font-size: ${tok("--office-font-size-sm")};
|
|
3763
|
+
font-family: ${tok("--office-font")}; }
|
|
3764
|
+
.step { flex: none; display: inline-grid; place-items: center; width: ${tok("--office-target-size")};
|
|
3765
|
+
min-height: ${tok("--office-target-size")};
|
|
3465
3766
|
padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
|
|
3466
3767
|
.step:disabled { opacity: .4; cursor: default; }
|
|
3467
|
-
.add { font-size:
|
|
3768
|
+
.add { font-size: ${tok("--office-font-size-xl")}; line-height: 1; }
|
|
3468
3769
|
.add[hidden] { display: none; }
|
|
3469
3770
|
.list { display: flex; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
|
|
3470
|
-
.tab { flex: none; max-width:
|
|
3471
|
-
padding:
|
|
3472
|
-
border:
|
|
3771
|
+
.tab { flex: none; max-width: ${tok("--office-tab-max-width")}; min-height: ${tok("--office-target-size")}; margin-top: calc(-1 * ${tok("--office-space-px")});
|
|
3772
|
+
padding: ${tok("--office-space-0")} ${tok("--office-space-3-5")}; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
|
|
3773
|
+
border: ${tok("--office-border-width")} solid transparent; border-top: 0; border-radius: 0 0 ${tok("--office-radius")} ${tok("--office-radius")};
|
|
3473
3774
|
background: transparent; color: inherit; font: inherit; cursor: pointer; }
|
|
3474
|
-
.tab:hover { color:
|
|
3475
|
-
.tab[aria-selected="true"] { border-color:
|
|
3476
|
-
color:
|
|
3477
|
-
button:focus-visible { outline:
|
|
3478
|
-
svg { width:
|
|
3775
|
+
.tab:hover { color: ${tok("--office-foreground")}; }
|
|
3776
|
+
.tab[aria-selected="true"] { border-color: ${tok("--office-border")}; background: ${tok("--office-background")};
|
|
3777
|
+
color: ${tok("--office-accent")}; font-weight: 600; box-shadow: inset 0 ${tok("--office-border-width-thick")} 0 ${tok("--office-accent")}; }
|
|
3778
|
+
button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(-1 * ${tok("--office-focus-width")}); }
|
|
3779
|
+
svg { width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")};
|
|
3479
3780
|
stroke-linecap: round; stroke-linejoin: round; }
|
|
3480
3781
|
@media (forced-colors: active) {
|
|
3481
3782
|
:host { border-top-color: CanvasText; }
|
|
@@ -3502,7 +3803,7 @@ var defineTabStrip = definer("office-ui-tab-strip", () => {
|
|
|
3502
3803
|
super();
|
|
3503
3804
|
const doc = this.ownerDocument;
|
|
3504
3805
|
const root = this.attachShadow({ mode: "open" });
|
|
3505
|
-
attachStyles(root, controlCss(
|
|
3806
|
+
attachStyles(root, controlCss(CSS15));
|
|
3506
3807
|
const step = (name, icon2) => {
|
|
3507
3808
|
const button = doc.createElement("button");
|
|
3508
3809
|
button.type = "button";
|
|
@@ -3641,20 +3942,20 @@ var defineTabStrip = definer("office-ui-tab-strip", () => {
|
|
|
3641
3942
|
});
|
|
3642
3943
|
|
|
3643
3944
|
// src/zoom-slider.ts
|
|
3644
|
-
var
|
|
3645
|
-
:host { display: inline-flex; align-items: center; gap:
|
|
3646
|
-
color:
|
|
3647
|
-
button { box-sizing: border-box; display: inline-grid; place-items: center; min-width:
|
|
3648
|
-
min-height:
|
|
3649
|
-
border-radius:
|
|
3650
|
-
font-size:
|
|
3651
|
-
button:hover:not(:disabled) { background:
|
|
3652
|
-
button:focus-visible, input:focus-visible { outline:
|
|
3945
|
+
var CSS16 = `
|
|
3946
|
+
:host { display: inline-flex; align-items: center; gap: ${tok("--office-space-0")}; font-size: ${tok("--office-font-size-xs")};
|
|
3947
|
+
color: ${tok("--office-foreground")}; font-family: ${tok("--office-font")}; }
|
|
3948
|
+
button { box-sizing: border-box; display: inline-grid; place-items: center; min-width: ${tok("--office-target-size")};
|
|
3949
|
+
min-height: ${tok("--office-target-size")}; padding: 0; border: ${tok("--office-border-width")} solid transparent;
|
|
3950
|
+
border-radius: ${tok("--office-radius")}; background: transparent; color: inherit; font: inherit;
|
|
3951
|
+
font-size: ${tok("--office-font-size-lg")}; line-height: 1; cursor: pointer; }
|
|
3952
|
+
button:hover:not(:disabled) { background: ${tok("--office-background")}; }
|
|
3953
|
+
button:focus-visible, input:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(${tok("--office-focus-offset")} / 2); }
|
|
3653
3954
|
button:disabled, input:disabled { opacity: .5; cursor: not-allowed; }
|
|
3654
|
-
input { width:
|
|
3655
|
-
accent-color:
|
|
3656
|
-
output { min-width:
|
|
3657
|
-
svg { width:
|
|
3955
|
+
input { width: ${tok("--office-zoom-slider-width")}; min-width: ${tok("--office-zoom-slider-min-width")}; margin: 0 ${tok("--office-space-0")};
|
|
3956
|
+
accent-color: ${tok("--office-accent")}; }
|
|
3957
|
+
output { min-width: ${tok("--office-zoom-value-width")}; text-align: center; font-variant-numeric: tabular-nums; }
|
|
3958
|
+
svg { width: ${tok("--office-icon-size-md")}; height: ${tok("--office-icon-size-md")}; fill: none; stroke: currentColor; stroke-width: ${tok("--office-icon-stroke")};
|
|
3658
3959
|
stroke-linecap: round; stroke-linejoin: round; }
|
|
3659
3960
|
:host(:not([fit])) .fit { display: none; }
|
|
3660
3961
|
@media (pointer: coarse), (max-width: 767px) { input { flex: 1; } }
|
|
@@ -3677,7 +3978,7 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
|
|
|
3677
3978
|
super();
|
|
3678
3979
|
const doc = this.ownerDocument;
|
|
3679
3980
|
const root = this.attachShadow({ mode: "open" });
|
|
3680
|
-
attachStyles(root, controlCss(
|
|
3981
|
+
attachStyles(root, controlCss(CSS16));
|
|
3681
3982
|
const button = (name, text2) => {
|
|
3682
3983
|
const element = doc.createElement("button");
|
|
3683
3984
|
element.type = "button";
|
|
@@ -3773,7 +4074,7 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
|
|
|
3773
4074
|
|
|
3774
4075
|
// src/keytips.ts
|
|
3775
4076
|
var BADGE_CSS = "position:fixed;inset:auto;margin:0;padding:0;border:0;background:transparent;overflow:visible;pointer-events:none";
|
|
3776
|
-
var TIP_CSS =
|
|
4077
|
+
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")}`;
|
|
3777
4078
|
var isDisabled = (el) => el.hasAttribute("disabled") || el.getAttribute("aria-disabled") === "true";
|
|
3778
4079
|
var visible = (el) => {
|
|
3779
4080
|
const box = el.getBoundingClientRect();
|