@a3s-lab/office 0.12.0 → 0.13.0

package/dist/styles.css

@@ -6912,15 +6912,181 @@ button.work-office-collaboration-participant:hover .work-office-collaboration-lo
 
 .work-editor-loading.ds-state-view {
   background: var(--a3s-bg);
-  flex: 1;
+  flex: 1 1 0;
+  justify-content: center;
+  align-self: stretch;
+  align-items: center;
   width: 100%;
   min-width: 0;
-  min-height: 0;
+  max-width: none;
+  height: 100%;
+  min-height: 100%;
   margin: 0;
+  padding: clamp(24px, 5vw, 56px);
+  position: relative;
+  overflow: hidden;
+}
+
+.work-editor-loading.ds-state-view .ds-state-view-icon {
+  background: none;
+  border-radius: 22px;
+  width: 72px;
+  height: 72px;
+  margin-bottom: 16px;
+}
+
+.work-editor-loading-visual {
+  isolation: isolate;
+  place-items: center;
+  width: 64px;
+  height: 64px;
+  display: grid;
+  position: relative;
+}
+
+.work-editor-loading-focus {
+  z-index: -1;
+  background: color-mix(in srgb, var(--a3s-blue) 10%, var(--a3s-panel));
+  opacity: .44;
+  border-radius: 18px;
+  animation: 1.8s ease-in-out infinite work-editor-loading-focus;
+  position: absolute;
+  inset: 5px;
+}
+
+.work-editor-loading-page {
+  border: 1px solid color-mix(in srgb, var(--a3s-blue) 24%, var(--a3s-line));
+  background: var(--a3s-panel);
+  width: 32px;
+  height: 42px;
+  box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--a3s-blue) 70%, black);
+  border-radius: 7px;
+  flex-direction: column;
+  gap: 5px;
+  padding: 11px 7px 8px;
+  animation: 1.8s cubic-bezier(.16, 1, .3, 1) infinite work-editor-loading-page;
+  display: flex;
+  position: relative;
+}
+
+.work-editor-loading-page:after {
+  border-top: 1px solid color-mix(in srgb, var(--a3s-blue) 48%, transparent);
+  border-right: 1px solid color-mix(in srgb, var(--a3s-blue) 48%, transparent);
+  content: "";
+  border-radius: 0 2px 0 0;
+  width: 5px;
+  height: 5px;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+
+.work-editor-loading-line {
+  background: color-mix(in srgb, var(--a3s-ink) 36%, transparent);
+  transform-origin: 0;
+  border-radius: 2px;
+  flex: 0 0 2px;
+  width: 100%;
+  height: 2px;
+  animation: 1.8s cubic-bezier(.16, 1, .3, 1) infinite work-editor-loading-line;
+  display: block;
+}
+
+.work-editor-loading-line--accent {
+  background: var(--a3s-blue);
+  width: 68%;
+  animation-delay: -120ms;
+}
+
+.work-editor-loading-line--short {
+  width: 76%;
+  animation-delay: .12s;
 }
 
 .work-editor-loading.ds-state-view h2 {
+  letter-spacing: -.01em;
+  text-wrap: balance;
+  max-width: min(360px, 100%);
   font-size: 13px;
+  font-weight: 650;
+}
+
+@keyframes work-editor-loading-focus {
+  0%, 100% {
+    opacity: .34;
+    transform: scale(.88);
+  }
+
+  48% {
+    opacity: .72;
+    transform: scale(1);
+  }
+}
+
+@keyframes work-editor-loading-page {
+  0%, 100% {
+    box-shadow: 0 8px 20px -16px color-mix(in srgb, var(--a3s-blue) 56%, black);
+    transform: translateY(1px);
+  }
+
+  48% {
+    box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--a3s-blue) 72%, black);
+    transform: translateY(-1px);
+  }
+}
+
+@keyframes work-editor-loading-line {
+  0%, 12% {
+    opacity: .38;
+    transform: scaleX(.28);
+  }
+
+  44%, 72% {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+
+  100% {
+    opacity: .62;
+    transform: scaleX(.78);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .work-editor-loading-focus, .work-editor-loading-page, .work-editor-loading-line {
+    animation: none;
+  }
+
+  .work-editor-loading-focus {
+    opacity: .56;
+    transform: none;
+  }
+
+  .work-editor-loading-line {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .work-editor-loading-focus {
+    background: canvas;
+    outline: 1px solid highlight;
+  }
+
+  .work-editor-loading-page {
+    box-shadow: none;
+    background: canvas;
+    border-color: canvastext;
+  }
+
+  .work-editor-loading-line {
+    background: canvastext;
+  }
+
+  .work-editor-loading-line--accent {
+    background: highlight;
+  }
 }
 
 .work-version-history {
@@ -10727,6 +10893,10 @@ button.work-office-collaboration-participant:hover .work-office-collaboration-lo
   table-layout: auto;
 }
 
+.work-document-page .tiptap table[data-office-table-layout="autofit"][data-office-table-width-type="auto"] col, .work-document-page .tiptap table[data-office-table-layout="contents"] col {
+  width: auto !important;
+}
+
 .work-document-page .tiptap table[data-office-table-layout="fixed"] {
   table-layout: fixed;
 }
@@ -11129,13 +11299,29 @@ button.work-office-collaboration-participant:hover .work-office-collaboration-lo
 }
 
 .work-document-page .tiptap > .work-document-section {
-  column-count: var(--work-document-column-count, 1);
   column-gap: var(--work-document-column-gap, 12mm);
   column-rule: var(--work-document-column-rule, none);
   min-height: 120px;
   position: relative;
 }
 
+.work-document-page .tiptap > .work-document-section:not([data-section-column-count="1"]) {
+  column-count: var(--work-document-column-count);
+}
+
+.work-document-page .tiptap .work-document-chunk {
+  width: 100%;
+  display: flow-root;
+}
+
+.work-document-page .tiptap .work-document-chunk.placeholder {
+  box-sizing: border-box;
+  pointer-events: none;
+  -webkit-user-select: none;
+  user-select: none;
+  overflow: hidden;
+}
+
 .work-document-page .tiptap > .work-document-section:first-child {
   min-height: 760px;
 }
@@ -11249,6 +11435,10 @@ button.work-office-collaboration-participant:hover .work-office-collaboration-lo
   table-layout: auto;
 }
 
+.work-document-preview-page table[data-office-table-layout="autofit"][data-office-table-width-type="auto"] col, .work-document-print-body table[data-office-table-layout="autofit"][data-office-table-width-type="auto"] col, .work-document-preview-page table[data-office-table-layout="contents"] col, .work-document-print-body table[data-office-table-layout="contents"] col {
+  width: auto !important;
+}
+
 .work-document-preview-page table[data-office-table-layout="fixed"], .work-document-print-body table[data-office-table-layout="fixed"] {
   table-layout: fixed;
   width: auto;
@@ -14820,6 +15010,253 @@ button.work-office-collaboration-participant:hover .work-office-collaboration-lo
   color: currentColor;
 }
 
+.work-spreadsheet-border-split-root {
+  border-radius: 6px;
+  flex: none;
+  align-items: stretch;
+  height: 29px;
+  display: inline-flex;
+}
+
+.work-office-ribbon .work-office-toolbar .work-spreadsheet-border-primary, .work-office-ribbon .work-office-toolbar .work-spreadsheet-border-disclosure {
+  border-radius: 0;
+  height: 29px;
+  padding: 0;
+}
+
+.work-office-ribbon .work-office-toolbar .work-spreadsheet-border-primary {
+  border-radius: 6px 0 0 6px;
+  width: 29px;
+  min-width: 29px;
+}
+
+.work-office-ribbon .work-office-toolbar .work-spreadsheet-border-disclosure {
+  border-left: 1px solid color-mix(in srgb, var(--a3s-line) 72%, transparent);
+  border-radius: 0 6px 6px 0;
+  width: 16px;
+  min-width: 16px;
+}
+
+.work-spreadsheet-border-disclosure svg {
+  transition: transform .12s;
+}
+
+.work-spreadsheet-border-disclosure[aria-expanded="true"] svg {
+  transform: rotate(180deg);
+}
+
+.work-spreadsheet-border-primary:focus-visible, .work-spreadsheet-border-disclosure:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--work-spreadsheet-accent);
+  outline: 0;
+}
+
+.work-spreadsheet-border-panel {
+  --work-office-menu-accent: var(--work-office-control-accent, #159469);
+  width: min(292px, 100vw - 32px);
+  padding: 8px;
+}
+
+.work-spreadsheet-border-section-label {
+  color: var(--a3s-faint);
+  padding: 2px 6px 7px;
+  font-size: 10px;
+  font-weight: 650;
+}
+
+.work-spreadsheet-border-targets {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 2px;
+  display: grid;
+}
+
+.work-spreadsheet-border-targets > button {
+  min-width: 0;
+  min-height: 32px;
+  color: var(--a3s-muted);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 6px;
+  grid-template-columns: 22px minmax(0, 1fr);
+  align-items: center;
+  gap: 7px;
+  padding: 4px 7px;
+  display: grid;
+}
+
+.work-spreadsheet-border-targets > button:hover:not(:disabled), .work-spreadsheet-border-targets > button:focus-visible, .work-spreadsheet-border-targets > button[aria-checked="true"] {
+  background: color-mix(in srgb,
+    var(--work-office-menu-accent) 10%,
+    var(--a3s-panel));
+  color: var(--a3s-ink);
+  outline: 0;
+}
+
+.work-spreadsheet-border-targets > button:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--work-office-menu-accent);
+}
+
+.work-spreadsheet-border-targets > button:disabled {
+  cursor: not-allowed;
+  opacity: .4;
+}
+
+.work-spreadsheet-border-targets > button > span:last-child {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  overflow: hidden;
+}
+
+.work-spreadsheet-border-glyph {
+  border: 1px solid color-mix(in srgb, currentcolor 34%, transparent);
+  width: 17px;
+  height: 17px;
+  color: var(--work-office-menu-accent, var(--work-spreadsheet-accent));
+  flex: 0 0 17px;
+  display: block;
+  position: relative;
+}
+
+.work-spreadsheet-border-glyph:before, .work-spreadsheet-border-glyph:after {
+  content: "";
+  position: absolute;
+}
+
+.work-spreadsheet-border-glyph[data-border-target="top"] {
+  border-top: 2px solid;
+}
+
+.work-spreadsheet-border-glyph[data-border-target="bottom"] {
+  border-bottom: 2px solid;
+}
+
+.work-spreadsheet-border-glyph[data-border-target="left"] {
+  border-left: 2px solid;
+}
+
+.work-spreadsheet-border-glyph[data-border-target="right"] {
+  border-right: 2px solid;
+}
+
+.work-spreadsheet-border-glyph[data-border-target="outside"], .work-spreadsheet-border-glyph[data-border-target="all"] {
+  border: 2px solid;
+}
+
+.work-spreadsheet-border-glyph[data-border-target="inside"]:before, .work-spreadsheet-border-glyph[data-border-target="all"]:before, .work-spreadsheet-border-glyph[data-border-target="vertical"]:before {
+  border-left: 1px solid;
+  top: 1px;
+  bottom: 1px;
+  left: 7px;
+}
+
+.work-spreadsheet-border-glyph[data-border-target="inside"]:after, .work-spreadsheet-border-glyph[data-border-target="all"]:after, .work-spreadsheet-border-glyph[data-border-target="horizontal"]:after {
+  border-top: 1px solid;
+  top: 7px;
+  left: 1px;
+  right: 1px;
+}
+
+.work-spreadsheet-border-glyph[data-border-target="none"] {
+  border-style: dashed;
+}
+
+.work-spreadsheet-border-glyph[data-border-target="none"]:before, .work-spreadsheet-border-glyph[data-border-target="diagonal"]:before {
+  border-top: 1px solid;
+  top: 7px;
+  left: -1px;
+  right: -1px;
+  transform: rotate(-45deg);
+}
+
+.work-spreadsheet-border-glyph[data-border-target="none"]:after {
+  border-top: 1px solid;
+  top: 7px;
+  left: -1px;
+  right: -1px;
+  transform: rotate(45deg);
+}
+
+.work-spreadsheet-border-settings {
+  border-top: 1px solid var(--a3s-line);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 8px;
+  margin-top: 8px;
+  padding: 9px 6px 2px;
+  display: grid;
+}
+
+.work-spreadsheet-border-settings > label {
+  min-width: 0;
+  color: var(--a3s-faint);
+  gap: 5px;
+  font-size: 10px;
+  display: grid;
+}
+
+.work-spreadsheet-border-settings select, .work-spreadsheet-border-color-control {
+  border: 1px solid var(--a3s-line);
+  background: var(--a3s-panel);
+  width: 100%;
+  min-width: 0;
+  height: 30px;
+  color: var(--a3s-ink);
+  font: inherit;
+  border-radius: 6px;
+}
+
+.work-spreadsheet-border-settings select {
+  padding-inline: 7px;
+}
+
+.work-spreadsheet-border-color-control {
+  grid-template-columns: 18px minmax(0, 1fr);
+  align-items: center;
+  gap: 5px;
+  padding: 0 6px;
+  display: grid;
+  position: relative;
+}
+
+.work-spreadsheet-border-color-control input {
+  cursor: pointer;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  inset: 0;
+}
+
+.work-spreadsheet-border-color-swatch {
+  border: 1px solid var(--a3s-line-strong);
+  border-radius: 4px;
+  width: 16px;
+  height: 16px;
+}
+
+.work-spreadsheet-border-color-control output {
+  color: var(--a3s-muted);
+  text-overflow: ellipsis;
+  font-size: 9px;
+  overflow: hidden;
+}
+
+@media (width <= 480px) {
+  .work-spreadsheet-border-panel {
+    width: min(276px, 100vw - 24px);
+  }
+
+  .work-spreadsheet-border-targets > button {
+    min-height: 44px;
+  }
+
+  .work-spreadsheet-border-settings {
+    grid-template-columns: 1fr;
+  }
+}
+
 .work-spreadsheet-sheet-list {
   min-width: 220px;
 }