ooxml-ui 0.20.0 → 0.22.0

package/dist/tokens.d.ts

@@ -7,220 +7,251 @@
  * forced-colours values. Component tokens default to the semantic ones.
  */
 export declare const OFFICE_TOKENS: {
-    readonly '--office-foreground': "#1f2937";
-    readonly '--office-muted-foreground': "#6b7280";
-    readonly '--office-background': "#ffffff";
-    readonly '--office-surface': "#f3f4f6";
-    readonly '--office-selected': "#e5e7eb";
-    readonly '--office-border': "#d1d5db";
-    readonly '--office-accent': "#2563eb";
-    readonly '--office-accent-foreground': "#ffffff";
-    readonly '--office-ring': "#2563eb";
-    readonly '--office-danger': "#b91c1c";
-    readonly '--office-danger-foreground': "#ffffff";
-    readonly '--office-warning': "#d97706";
-    readonly '--office-warning-foreground': "#ffffff";
-    readonly '--office-info': "#3b82f6";
-    readonly '--office-popover': "var(--office-background, #ffffff)";
-    readonly '--office-popover-foreground': "var(--office-foreground, #1f2937)";
-    readonly '--office-overlay': "rgb(0 0 0 / 40%)";
-    readonly '--office-notice-background': "#fef3c7";
-    readonly '--office-notice-foreground': "#78350f";
-    readonly '--office-notice-border': "rgb(180 83 9 / 30%)";
-    readonly '--office-notice-accent': "#d97706";
-    readonly '--office-keytip-background': "#ffffff";
-    readonly '--office-keytip-foreground': "#1f1f1f";
-    readonly '--office-keytip-border': "#8a8886";
-    readonly '--office-highlight': "#dc2626";
-    readonly '--office-paper': "#ffffff";
-    readonly '--office-accent-hover': "color-mix(in srgb, var(--office-accent, #2563eb) 85%, #000)";
-    readonly '--office-font': "system-ui, -apple-system, \"Segoe UI\", sans-serif";
-    readonly '--office-font-size-3xs': "9px";
-    readonly '--office-font-size-2xs': "10px";
-    readonly '--office-font-size-xs': "11px";
-    readonly '--office-font-size-sm': "12px";
-    readonly '--office-font-size': "13px";
-    readonly '--office-font-size-md': "14px";
-    readonly '--office-font-size-lg': "15px";
-    readonly '--office-font-size-xl': "18px";
-    readonly '--office-font-weight-medium': "500";
-    readonly '--office-font-weight-bold': "600";
-    readonly '--office-line-height': "1.4";
-    readonly '--office-line-height-tight': "1.2";
-    readonly '--office-icon-stroke': "1.5";
-    readonly '--office-space-px': "1px";
-    readonly '--office-space-0': "2px";
-    readonly '--office-space-1': "4px";
-    readonly '--office-space-1-5': "6px";
-    readonly '--office-space-2': "8px";
-    readonly '--office-space-2-5': "10px";
-    readonly '--office-space-3': "12px";
-    readonly '--office-space-3-5': "14px";
-    readonly '--office-space-4': "16px";
-    readonly '--office-space-5': "20px";
-    readonly '--office-space-6': "24px";
-    readonly '--office-border-width': "1px";
-    readonly '--office-border-width-thick': "2px";
-    readonly '--office-radius-xs': "2px";
-    readonly '--office-radius-sm': "3px";
-    readonly '--office-radius': "4px";
-    readonly '--office-radius-md': "6px";
-    readonly '--office-radius-lg': "8px";
-    readonly '--office-radius-full': "999px";
-    readonly '--office-focus-width': "2px";
-    readonly '--office-focus-offset': "2px";
-    readonly '--office-target-size': "28px";
-    readonly '--office-target-size-touch': "44px";
-    readonly '--office-control-height': "24px";
-    readonly '--office-control-height-md': "28px";
-    readonly '--office-control-height-lg': "32px";
-    readonly '--office-input-height': "26px";
-    readonly '--office-control-height-xs': "22px";
-    readonly '--office-icon-size-xs': "10px";
-    readonly '--office-icon-size-sm': "12px";
-    readonly '--office-icon-size': "14px";
-    readonly '--office-icon-size-md': "16px";
-    readonly '--office-icon-size-ml': "18px";
-    readonly '--office-icon-size-lg': "20px";
-    readonly '--office-shadow-sm': "0 1px 3px rgb(0 0 0 / 20%)";
-    readonly '--office-shadow': "0 6px 20px rgb(0 0 0 / 18%)";
-    readonly '--office-shadow-lg': "0 10px 25px rgb(0 0 0 / 20%)";
-    readonly '--office-z-popover': "1100";
-    readonly '--office-z-dialog': "1000";
-    readonly '--office-z-backstage': "30";
-    readonly '--office-duration-fast': ".12s";
-    readonly '--office-duration': ".15s";
-    readonly '--office-duration-spin': ".8s";
-    readonly '--office-field-height': "28px";
-    readonly '--office-field-height-lg': "40px";
-    readonly '--office-field-radius': "5px";
-    readonly '--office-field-border': "var(--office-border, #d1d5db)";
-    readonly '--office-field-border-focus': "var(--office-ring, #2563eb)";
-    readonly '--office-field-background': "var(--office-background, #ffffff)";
-    readonly '--office-field-foreground': "var(--office-foreground, #1f2937)";
-    readonly '--office-field-placeholder': "var(--office-muted-foreground, #6b7280)";
-    readonly '--office-checkbox-size': "16px";
-    readonly '--office-checkbox-size-touch': "22px";
-    readonly '--office-checkbox-radius': "3px";
-    readonly '--office-checkbox-border': "var(--office-border, #d1d5db)";
-    readonly '--office-checkbox-background': "var(--office-background, #ffffff)";
-    readonly '--office-checkbox-accent': "var(--office-accent, #2563eb)";
-    readonly '--office-checkbox-accent-foreground': "var(--office-accent-foreground, #ffffff)";
-    readonly '--office-radio-dot-size': "8px";
-    readonly '--office-radio-dot-size-touch': "12px";
-    readonly '--office-switch-width': "32px";
-    readonly '--office-switch-height': "18px";
-    readonly '--office-switch-width-touch': "44px";
-    readonly '--office-switch-height-touch': "24px";
-    readonly '--office-switch-border-width': "1px";
-    readonly '--office-switch-knob-size': "12px";
-    readonly '--office-switch-knob-size-touch': "18px";
-    readonly '--office-switch-knob-offset': "2px";
-    readonly '--office-switch-border': "var(--office-border, #d1d5db)";
-    readonly '--office-switch-track': "var(--office-surface, #f3f4f6)";
-    readonly '--office-switch-track-on': "var(--office-accent, #2563eb)";
-    readonly '--office-switch-thumb': "var(--office-foreground, #1f2937)";
-    readonly '--office-switch-thumb-on': "var(--office-accent-foreground, #ffffff)";
-    readonly '--office-ribbon-tab-height': "35px";
-    readonly '--office-ribbon-group-gap': "2px";
-    readonly '--office-ribbon-group-height': "78px";
-    readonly '--office-ribbon-group-padding': "4px 8px 2px";
-    readonly '--office-ribbon-separator-inset': "0px";
-    readonly '--office-ribbon-separator': "color-mix(in srgb, var(--office-border, #d1d5db) 60%, transparent)";
-    readonly '--office-ribbon-caption-size': "10px";
-    readonly '--office-ribbon-caption-padding': "2px 0 0";
-    readonly '--office-launcher-inset-end': "-6px";
-    readonly '--office-launcher-inset-bottom': "-1px";
-    readonly '--office-ribbon-compact-row-max': "36px";
-    readonly '--office-ribbon-stack-max-height': "80px";
-    readonly '--office-ribbon-collapse-x': "8px";
-    readonly '--office-ribbon-collapse-y': "120px";
-    readonly '--office-command-icon-color': "currentColor";
-    readonly '--office-command-large-height': "66px";
-    readonly '--office-command-large-min-width': "48px";
-    readonly '--office-command-large-max-width': "80px";
-    readonly '--office-command-large-icon': "32px";
-    readonly '--office-command-small-icon': "16px";
-    readonly '--office-command-tall-height': "62px";
-    readonly '--office-command-tall-min-width': "40px";
-    readonly '--office-command-tall-icon': "30px";
-    readonly '--office-command-active': "color-mix(in srgb, var(--office-accent, #2563eb) 15%, transparent)";
-    readonly '--office-collapsed-group-min-width': "56px";
-    readonly '--office-ribbon-caption-line-height': "12px";
-    readonly '--office-ribbon-row-height': "22px";
-    readonly '--office-ribbon-file-min-width': "52px";
-    readonly '--office-launcher-width': "16px";
-    readonly '--office-launcher-height': "14px";
-    readonly '--office-tab-indicator-width': "2.5px";
-    readonly '--office-status-bar-height': "24px";
-    readonly '--office-tab-height': "28px";
-    readonly '--office-tab-max-width': "220px";
-    readonly '--office-zoom-slider-width': "120px";
-    readonly '--office-zoom-slider-min-width': "48px";
-    readonly '--office-zoom-value-width': "40px";
-    readonly '--office-dialog-width': "auto";
-    readonly '--office-dialog-max-width': "min(640px, 100vw)";
-    readonly '--office-dialog-max-height': "90vh";
-    readonly '--office-dialog-min-width': "min(320px, 100vw)";
-    readonly '--office-dialog-button-min-width': "76px";
-    readonly '--office-options-width': "min(820px, 100vw)";
-    readonly '--office-options-nav-width': "180px";
-    readonly '--office-options-min-height': "min(440px, 70vh)";
-    readonly '--office-options-label-width': "180px";
-    readonly '--office-options-row-height': "30px";
-    readonly '--office-options-number-width': "80px";
-    readonly '--office-info-size': "15px";
-    readonly '--office-selection-bar-width': "3px";
-    readonly '--office-backstage-nav-width': "200px";
-    readonly '--office-backstage-nav-background': "var(--office-accent, #2563eb)";
-    readonly '--office-backstage-nav-foreground': "var(--office-accent-foreground, #ffffff)";
-    readonly '--office-backstage-item-hover': "rgb(0 0 0 / 22%)";
-    readonly '--office-backstage-padding': "28px 40px";
-    readonly '--office-backstage-back-size': "36px";
-    readonly '--office-backstage-item-height': "38px";
-    readonly '--office-menu-min-width': "180px";
-    readonly '--office-menu-max-height': "60vh";
-    readonly '--office-context-menu-min-width': "200px";
-    readonly '--office-search-popup-min-width': "240px";
-    readonly '--office-search-popup-max-height': "320px";
-    readonly '--office-select-max-height': "240px";
-    readonly '--office-select-background': "var(--office-background, #ffffff)";
-    readonly '--office-select-menu-min-width': "90px";
-    readonly '--office-select-option-active': "color-mix(in srgb, var(--office-accent, #2563eb) 20%, var(--office-popover, #ffffff))";
-    readonly '--office-select-ribbon-menu-width': "192px";
-    readonly '--office-font-picker-max-height': "320px";
-    readonly '--office-font-picker-width': "256px";
-    readonly '--office-chevron-size': "6px";
-    readonly '--office-ribbon-combo-height': "28px";
-    readonly '--office-ribbon-icon-select-width': "36px";
-    readonly '--office-search-width': "320px";
-    readonly '--office-print-preview-width': "420px";
-    readonly '--office-find-max-width': "640px";
-    readonly '--office-find-bar-height': "40px";
-    readonly '--office-ruler-size': "18px";
-    readonly '--office-avatar-size': "48px";
-    readonly '--office-avatar-color': "var(--office-muted-foreground, #6b7280)";
-    readonly '--office-toast-width': "360px";
-    readonly '--office-account-field-width': "320px";
-    readonly '--office-gallery-trigger-height': "24px";
-    readonly '--office-gallery-strip-background': "color-mix(in srgb, var(--office-surface, #f3f4f6) 30%, transparent)";
-    readonly '--office-gallery-command-min-width': "54px";
-    readonly '--office-gallery-command-max-width': "78px";
-    readonly '--office-gallery-command-height': "58px";
-    readonly '--office-gallery-command-icon': "24px";
-    readonly '--office-gallery-popup-max-height': "65vh";
-    readonly '--office-title-bar-height': "36px";
-    readonly '--office-title-bar-below-height': "28px";
-    readonly '--office-title-bar-background': "var(--office-surface, #f3f4f6)";
-    readonly '--office-title-bar-foreground': "var(--office-foreground, #1f2937)";
-    readonly '--office-title-bar-border': "var(--office-border, #d1d5db)";
-    readonly '--office-title-bar-mark-size': "20px";
-    readonly '--office-title-bar-mark-background': "var(--office-accent, #2563eb)";
-    readonly '--office-title-bar-mark-foreground': "var(--office-accent-foreground, #ffffff)";
-    readonly '--office-title-bar-name-max-width': "240px";
-    readonly '--office-title-bar-name-max-width-narrow': "140px";
-    readonly '--office-title-bar-search-max-width': "448px";
-    readonly '--office-title-bar-results-max-height': "256px";
+    readonly '--office-foreground': '#1f2937';
+    readonly '--office-muted-foreground': '#6b7280';
+    readonly '--office-background': '#ffffff';
+    readonly '--office-surface': '#f3f4f6';
+    readonly '--office-selected': '#e5e7eb';
+    readonly '--office-border': '#d1d5db';
+    readonly '--office-accent': '#2563eb';
+    readonly '--office-accent-foreground': '#ffffff';
+    readonly '--office-ring': '#2563eb';
+    readonly '--office-danger': '#b91c1c';
+    readonly '--office-danger-foreground': '#ffffff';
+    readonly '--office-warning': '#d97706';
+    readonly '--office-warning-foreground': '#ffffff';
+    readonly '--office-info': '#3b82f6';
+    readonly '--office-popover': 'var(--office-background, #ffffff)';
+    readonly '--office-popover-foreground': 'var(--office-foreground, #1f2937)';
+    readonly '--office-overlay': 'rgb(0 0 0 / 40%)';
+    readonly '--office-notice-background': '#fef3c7';
+    readonly '--office-notice-foreground': '#78350f';
+    readonly '--office-notice-border': 'rgb(180 83 9 / 30%)';
+    readonly '--office-notice-accent': '#d97706';
+    readonly '--office-keytip-background': '#ffffff';
+    readonly '--office-keytip-foreground': '#1f1f1f';
+    readonly '--office-keytip-border': '#8a8886';
+    readonly '--office-highlight': '#dc2626';
+    readonly '--office-paper': '#ffffff';
+    readonly '--office-accent-hover': 'color-mix(in srgb, var(--office-accent, #2563eb) 85%, #000)';
+    readonly '--office-font': 'system-ui, -apple-system, "Segoe UI", sans-serif';
+    readonly '--office-font-size-3xs': '9px';
+    readonly '--office-font-size-2xs': '10px';
+    readonly '--office-font-size-xs': '11px';
+    readonly '--office-font-size-sm': '12px';
+    readonly '--office-font-size': '13px';
+    readonly '--office-font-size-md': '14px';
+    readonly '--office-font-size-lg': '15px';
+    readonly '--office-font-size-xl': '18px';
+    readonly '--office-font-weight-medium': '500';
+    readonly '--office-font-weight-bold': '600';
+    readonly '--office-line-height': '1.4';
+    readonly '--office-line-height-tight': '1.2';
+    readonly '--office-icon-stroke': '1.5';
+    readonly '--office-space-px': '1px';
+    readonly '--office-space-0': '2px';
+    readonly '--office-space-1': '4px';
+    readonly '--office-space-1-5': '6px';
+    readonly '--office-space-2': '8px';
+    readonly '--office-space-2-5': '10px';
+    readonly '--office-space-3': '12px';
+    readonly '--office-space-3-5': '14px';
+    readonly '--office-space-4': '16px';
+    readonly '--office-space-5': '20px';
+    readonly '--office-space-6': '24px';
+    readonly '--office-border-width': '1px';
+    readonly '--office-border-width-thick': '2px';
+    readonly '--office-radius-xs': '2px';
+    readonly '--office-radius-sm': '3px';
+    readonly '--office-radius': '4px';
+    readonly '--office-radius-md': '6px';
+    readonly '--office-radius-lg': '8px';
+    readonly '--office-radius-full': '999px';
+    readonly '--office-focus-width': '2px';
+    readonly '--office-focus-offset': '2px';
+    readonly '--office-target-size': '28px';
+    readonly '--office-target-size-touch': '44px';
+    readonly '--office-control-height': '24px';
+    readonly '--office-control-height-md': '28px';
+    readonly '--office-control-height-lg': '32px';
+    readonly '--office-input-height': '26px';
+    readonly '--office-control-height-xs': '22px';
+    readonly '--office-icon-size-xs': '10px';
+    readonly '--office-icon-size-sm': '12px';
+    readonly '--office-icon-size': '14px';
+    readonly '--office-icon-size-md': '16px';
+    readonly '--office-icon-size-ml': '18px';
+    readonly '--office-icon-size-lg': '20px';
+    readonly '--office-shadow-sm': '0 1px 3px rgb(0 0 0 / 20%)';
+    readonly '--office-shadow': '0 6px 20px rgb(0 0 0 / 18%)';
+    readonly '--office-shadow-lg': '0 10px 25px rgb(0 0 0 / 20%)';
+    readonly '--office-z-popover': '1100';
+    readonly '--office-z-dialog': '1000';
+    readonly '--office-z-backstage': '30';
+    readonly '--office-duration-fast': '.12s';
+    readonly '--office-duration': '.15s';
+    readonly '--office-duration-spin': '.8s';
+    readonly '--office-field-height': '28px';
+    readonly '--office-field-height-lg': '40px';
+    readonly '--office-field-radius': '5px';
+    readonly '--office-field-border': 'var(--office-border, #d1d5db)';
+    readonly '--office-field-border-focus': 'var(--office-ring, #2563eb)';
+    readonly '--office-field-background': 'var(--office-background, #ffffff)';
+    readonly '--office-field-foreground': 'var(--office-foreground, #1f2937)';
+    readonly '--office-field-placeholder': 'var(--office-muted-foreground, #6b7280)';
+    readonly '--office-checkbox-size': '16px';
+    readonly '--office-checkbox-size-touch': '22px';
+    readonly '--office-checkbox-radius': '3px';
+    readonly '--office-checkbox-border': 'var(--office-border, #d1d5db)';
+    readonly '--office-checkbox-background': 'var(--office-background, #ffffff)';
+    readonly '--office-checkbox-accent': 'var(--office-accent, #2563eb)';
+    readonly '--office-checkbox-accent-foreground': 'var(--office-accent-foreground, #ffffff)';
+    readonly '--office-radio-dot-size': '8px';
+    readonly '--office-radio-dot-size-touch': '12px';
+    readonly '--office-switch-width': '32px';
+    readonly '--office-switch-height': '18px';
+    readonly '--office-switch-width-touch': '44px';
+    readonly '--office-switch-height-touch': '24px';
+    readonly '--office-switch-border-width': '1px';
+    readonly '--office-switch-knob-size': '12px';
+    readonly '--office-switch-knob-size-touch': '18px';
+    readonly '--office-switch-knob-offset': '2px';
+    readonly '--office-switch-border': 'var(--office-border, #d1d5db)';
+    readonly '--office-switch-track': 'var(--office-surface, #f3f4f6)';
+    readonly '--office-switch-track-on': 'var(--office-accent, #2563eb)';
+    readonly '--office-switch-thumb': 'var(--office-foreground, #1f2937)';
+    readonly '--office-switch-thumb-on': 'var(--office-accent-foreground, #ffffff)';
+    readonly '--office-ribbon-tab-height': '35px';
+    readonly '--office-ribbon-group-gap': '2px';
+    readonly '--office-ribbon-group-height': '78px';
+    readonly '--office-ribbon-group-padding': '4px 8px 2px';
+    readonly '--office-ribbon-separator-inset': '0px';
+    readonly '--office-ribbon-separator': 'color-mix(in srgb, var(--office-border, #d1d5db) 60%, transparent)';
+    readonly '--office-ribbon-caption-size': '10px';
+    readonly '--office-ribbon-caption-padding': '2px 0 0';
+    readonly '--office-launcher-inset-end': '-6px';
+    readonly '--office-launcher-inset-bottom': '-1px';
+    readonly '--office-ribbon-compact-row-max': '36px';
+    readonly '--office-ribbon-stack-max-height': '80px';
+    readonly '--office-ribbon-collapse-x': '8px';
+    readonly '--office-ribbon-collapse-y': '120px';
+    readonly '--office-command-icon-color': 'currentColor';
+    readonly '--office-command-large-height': '66px';
+    readonly '--office-command-large-min-width': '48px';
+    readonly '--office-command-large-max-width': '80px';
+    readonly '--office-command-large-icon': '32px';
+    readonly '--office-command-small-icon': '16px';
+    readonly '--office-command-tall-height': '62px';
+    readonly '--office-command-tall-min-width': '40px';
+    readonly '--office-command-tall-icon': '30px';
+    readonly '--office-command-active': 'color-mix(in srgb, var(--office-accent, #2563eb) 15%, transparent)';
+    readonly '--office-collapsed-group-min-width': '56px';
+    readonly '--office-ribbon-caption-line-height': '12px';
+    readonly '--office-ribbon-row-height': '22px';
+    readonly '--office-ribbon-file-min-width': '52px';
+    readonly '--office-launcher-width': '16px';
+    readonly '--office-launcher-height': '14px';
+    readonly '--office-tab-indicator-width': '2.5px';
+    readonly '--office-status-bar-height': '24px';
+    readonly '--office-tab-height': '28px';
+    readonly '--office-tab-max-width': '220px';
+    readonly '--office-zoom-slider-width': '120px';
+    readonly '--office-zoom-slider-min-width': '48px';
+    readonly '--office-zoom-value-width': '40px';
+    readonly '--office-dialog-width': 'auto';
+    readonly '--office-dialog-max-width': 'min(640px, 100vw)';
+    readonly '--office-dialog-max-height': '90vh';
+    readonly '--office-dialog-min-width': 'min(320px, 100vw)';
+    readonly '--office-dialog-button-min-width': '76px';
+    readonly '--office-options-width': 'min(820px, 100vw)';
+    readonly '--office-options-nav-width': '180px';
+    readonly '--office-options-min-height': 'min(440px, 70vh)';
+    readonly '--office-options-label-width': '180px';
+    readonly '--office-options-row-height': '30px';
+    readonly '--office-options-number-width': '80px';
+    readonly '--office-info-size': '15px';
+    readonly '--office-selection-bar-width': '3px';
+    readonly '--office-backstage-nav-width': '200px';
+    readonly '--office-backstage-nav-background': 'var(--office-accent, #2563eb)';
+    readonly '--office-backstage-nav-foreground': 'var(--office-accent-foreground, #ffffff)';
+    readonly '--office-backstage-item-hover': 'rgb(0 0 0 / 22%)';
+    readonly '--office-backstage-padding': '28px 40px';
+    readonly '--office-backstage-back-size': '36px';
+    readonly '--office-backstage-item-height': '38px';
+    readonly '--office-menu-min-width': '180px';
+    readonly '--office-menu-max-height': '60vh';
+    readonly '--office-context-menu-min-width': '200px';
+    readonly '--office-search-popup-min-width': '240px';
+    readonly '--office-search-popup-max-height': '320px';
+    readonly '--office-select-max-height': '240px';
+    readonly '--office-select-background': 'var(--office-background, #ffffff)';
+    readonly '--office-select-menu-min-width': '90px';
+    readonly '--office-select-option-active': 'color-mix(in srgb, var(--office-accent, #2563eb) 20%, var(--office-popover, #ffffff))';
+    readonly '--office-select-ribbon-menu-width': '192px';
+    readonly '--office-font-picker-max-height': '320px';
+    readonly '--office-font-picker-width': '256px';
+    readonly '--office-chevron-size': '6px';
+    readonly '--office-ribbon-combo-height': '28px';
+    readonly '--office-ribbon-icon-select-width': '36px';
+    readonly '--office-search-width': '320px';
+    readonly '--office-print-preview-width': '420px';
+    readonly '--office-find-max-width': '640px';
+    readonly '--office-find-bar-height': '40px';
+    readonly '--office-ruler-size': '18px';
+    readonly '--office-avatar-size': '48px';
+    readonly '--office-avatar-color': 'var(--office-muted-foreground, #6b7280)';
+    readonly '--office-toast-width': '360px';
+    readonly '--office-account-field-width': '320px';
+    readonly '--office-gallery-trigger-height': '24px';
+    readonly '--office-gallery-strip-background': 'color-mix(in srgb, var(--office-surface, #f3f4f6) 30%, transparent)';
+    readonly '--office-gallery-command-min-width': '54px';
+    readonly '--office-gallery-command-max-width': '78px';
+    readonly '--office-gallery-command-height': '58px';
+    readonly '--office-gallery-command-icon': '24px';
+    readonly '--office-gallery-popup-max-height': '65vh';
+    readonly '--office-title-bar-height': '36px';
+    readonly '--office-title-bar-below-height': '28px';
+    readonly '--office-title-bar-background': 'var(--office-surface, #f3f4f6)';
+    readonly '--office-title-bar-foreground': 'var(--office-foreground, #1f2937)';
+    readonly '--office-title-bar-border': 'var(--office-border, #d1d5db)';
+    readonly '--office-title-bar-mark-size': '20px';
+    readonly '--office-title-bar-mark-background': 'var(--office-accent, #2563eb)';
+    readonly '--office-title-bar-mark-foreground': 'var(--office-accent-foreground, #ffffff)';
+    readonly '--office-title-bar-name-max-width': '240px';
+    readonly '--office-title-bar-name-max-width-narrow': '140px';
+    readonly '--office-title-bar-search-max-width': '448px';
+    readonly '--office-title-bar-results-max-height': '256px';
+    readonly '--office-teams-brand': '#5b5fc7';
+    readonly '--office-teams-brand-hover': '#4f52b2';
+    readonly '--office-teams-brand-pressed': '#3f4296';
+    readonly '--office-teams-brand-subtle': '#e8ebfa';
+    readonly '--office-teams-brand-foreground': '#ffffff';
+    readonly '--office-teams-rail': '#ebebeb';
+    readonly '--office-teams-panel': '#f5f5f5';
+    readonly '--office-teams-bubble': '#f5f5f5';
+    readonly '--office-teams-bubble-own': '#e8ebfa';
+    readonly '--office-teams-divider': '#e0e0e0';
+    readonly '--office-teams-text-subtle': '#616161';
+    readonly '--office-presence-available': '#6bb700';
+    readonly '--office-presence-busy': '#c50f1f';
+    readonly '--office-presence-away': '#eaa300';
+    readonly '--office-presence-offline': '#8a8886';
+    readonly '--office-file-docx': '#2b579a';
+    readonly '--office-file-xlsx': '#217346';
+    readonly '--office-file-pptx': '#c43e1c';
+    readonly '--office-file-vsdx': '#3955a3';
+    readonly '--office-file-other': '#6b7280';
+    readonly '--office-call-background': '#292929';
+    readonly '--office-call-tile': '#3d3d3d';
+    readonly '--office-call-foreground': '#ffffff';
+    readonly '--office-call-muted-foreground': '#c8c8c8';
+    readonly '--office-call-control': '#3d3d3d';
+    readonly '--office-call-control-hover': '#525252';
+    readonly '--office-call-danger': '#c4314b';
+    readonly '--office-call-danger-hover': '#a72a40';
+    readonly '--office-call-live': '#6bb700';
+    readonly '--office-call-scrim': 'rgb(0 0 0 / 60%)';
+    readonly '--office-shadow-teams': '0 2px 4px rgb(0 0 0 / 14%), 0 0 2px rgb(0 0 0 / 12%)';
 };
 export type OfficeToken = keyof typeof OFFICE_TOKENS;
 /** `var(--office-…, <default>)` for a declared token. The default comes from the table. */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ooxml-ui",
-	"version": "0.20.0",
+	"version": "0.22.0",
 	"description": "Shared, format-neutral web components and styles for the Office viewers (Word, PowerPoint, Excel)",
 	"keywords": [
 		"custom-elements",
@@ -63,6 +63,11 @@
 			"import": "./dist/smartart.js",
 			"default": "./dist/smartart.js"
 		},
+		"./teams": {
+			"types": "./dist/teams/index.d.ts",
+			"import": "./dist/teams.js",
+			"default": "./dist/teams.js"
+		},
 		"./package.json": "./package.json"
 	},
 	"publishConfig": {
@@ -76,14 +81,15 @@
 		"test:package": "node scripts/package-smoke.mjs"
 	},
 	"dependencies": {
-		"ooxml-core": "^0.14.1"
+		"lit": "^3.3.3",
+		"ooxml-core": "^0.15.0"
 	},
 	"devDependencies": {
-		"@types/jsdom": "^21.1.7",
-		"jsdom": "^26.1.0",
+		"@types/jsdom": "^30.0.0",
+		"jsdom": "^30.1.2",
 		"tsup": "^8.5.1",
-		"typescript": "^5.9.3",
-		"vitest": "^3.2.0"
+		"typescript": "^7.0.2",
+		"vitest": "^5.0.3"
 	},
 	"engines": {
 		"node": ">=22"

package/dist/backstage.d.ts

@@ -1,28 +0,0 @@
-/**
- * Office's File view (backstage): a navigation column and one page per item. Generalised from
- * pptx-viewer's `BACKSTAGE_NAV` model (render/backstage.ts) and the Visio viewer's backstage.
- */
-export interface OfficeBackstageItem {
-    id: string;
-    label: string;
-    /** Items in the footer group sit at the bottom of the column (Account, Options). */
-    group?: 'footer';
-    disabled?: boolean;
-    /** Tooltip, for example why an item is disabled. */
-    title?: string;
-}
-/** An item was chosen; cancelable (`preventDefault()` keeps the current page). */
-export type OfficeBackstageSelectEvent = CustomEvent<{
-    id: string;
-}>;
-export type OfficeBackstageCloseEvent = CustomEvent<{
-    reason: 'back' | 'escape' | 'api';
-}>;
-/**
- * `<office-ui-backstage>`: set `items`, put one light-DOM child per page with
- * `data-backstage-page="<id>"`, then `show(id)`. Choosing an item emits `office-backstage-select`
- * and, unless prevented, shows its page; items without a page (Save, Close) only emit. Back and
- * Escape emit a cancelable `office-backstage-close` and close. Attributes: `open`, `selected`,
- * `label` (default "File"), `back-label`. Nav buttons carry `data-backstage-item`.
- */
-export declare const defineBackstage: import("./registry.js").Definer;

package/dist/button.d.ts

@@ -1,14 +0,0 @@
-export type OfficeCommandEvent = CustomEvent<{
-    command: string;
-}>;
-/**
- * Command button. Attributes: `label`, `icon`, `command`, `disabled`, `pressed` (aria-pressed),
- * `expanded` (aria-expanded), `icon-only`, `variant="stacked"`, `size="large|small"` (ribbon
- * large and small commands), `tall` (with `icon-only`: a tool tile), `active`, `badge`, `caret`
- * (a trailing menu chevron), `title`, `keyshortcuts` (forwarded as aria-keyshortcuts).
- * Activation (pointer, Enter, Space) emits one bubbling, composed `office-command` `{ command }`;
- * Enter and Space never reach the host's own key handlers. Nothing happens when disabled.
- * Static `requestEvent`, `idAttribute` and `detailKey`, and the `iconName()` and `showsCaret()`
- * methods, let a product subclass keep its published contract and glyph set.
- */
-export declare const defineButton: import("./registry.js").Definer;

package/dist/checkable.d.ts

@@ -1,4 +0,0 @@
-/** `<office-ui-checkbox checked disabled value aria-label>`. */
-export declare const defineCheckbox: import("./registry.js").Definer;
-/** `<office-ui-switch>`: same contract as the checkbox with `role="switch"`. */
-export declare const defineSwitch: import("./registry.js").Definer;