@a3s-lab/office 0.26.0 → 0.27.0

package/dist/styles.css

@@ -5826,6 +5826,33 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   overflow: hidden;
 }
 
+.work-office-ribbon-group[data-has-dialog-launcher="true"] > span {
+  right: 15px;
+}
+
+.work-office-ribbon .work-office-toolbar .work-office-ribbon-dialog-launcher {
+  width: 11px;
+  min-width: 11px;
+  height: 11px;
+  color: var(--a3s-faint);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 2px;
+  place-items: center;
+  padding: 0;
+  display: grid;
+  position: absolute;
+  bottom: 0;
+  right: 2px;
+}
+
+.work-office-ribbon .work-office-toolbar .work-office-ribbon-dialog-launcher:hover, .work-office-ribbon .work-office-toolbar .work-office-ribbon-dialog-launcher:focus-visible {
+  background: var(--a3s-panel-strong);
+  color: var(--work-office-accent);
+  outline: 0;
+}
+
 .work-office-ribbon .work-office-toolbar[data-density="compact-low"] .work-office-ribbon-group[data-priority="low"], .work-office-ribbon .work-office-toolbar[data-density="compact-normal"] .work-office-ribbon-group:not([data-priority="high"]) {
   padding-left: 4px;
   padding-right: 4px;
@@ -7395,6 +7422,329 @@ button.work-office-collaboration-participant:hover .work-office-collaboration-lo
   display: flex;
 }
 
+.work-document-underline-control, .work-document-underline-split-root {
+  flex: none;
+  align-items: stretch;
+  display: inline-flex;
+}
+
+.work-document-underline-control {
+  gap: 2px;
+}
+
+.work-document-underline-split-root {
+  border-radius: 6px;
+  height: 29px;
+}
+
+.work-office-ribbon .work-office-toolbar .work-document-underline-split-root > button {
+  border-radius: 0;
+  height: 29px;
+  padding: 0;
+}
+
+.work-office-ribbon .work-office-toolbar .work-document-underline-split-root > .work-document-underline-primary {
+  border-radius: 6px 0 0 6px;
+  width: 27px;
+  min-width: 27px;
+}
+
+.work-office-ribbon .work-office-toolbar .work-document-underline-split-root > .work-document-underline-disclosure {
+  border-left: 1px solid color-mix(in srgb, var(--a3s-line) 72%, transparent);
+  border-radius: 0 6px 6px 0;
+  width: 14px;
+  min-width: 14px;
+}
+
+.work-document-underline-disclosure svg {
+  transition: transform .12s;
+}
+
+.work-document-underline-disclosure[aria-expanded="true"] svg {
+  transform: rotate(180deg);
+}
+
+.work-document-underline-primary:focus-visible, .work-document-underline-disclosure:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--work-office-accent);
+  outline: 0;
+}
+
+.work-document-underline-color {
+  flex: 0 0 25px;
+  width: 25px;
+  height: 29px;
+}
+
+.work-document-underline-color .work-office-color-trigger {
+  width: 25px;
+  min-width: 25px;
+  height: 29px;
+  padding: 0;
+}
+
+.work-document-underline-menu {
+  --work-office-menu-accent: var(--work-office-accent);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  width: min(520px, 100vw - 24px);
+}
+
+.work-document-underline-menu > button {
+  grid-template-columns: 34px minmax(0, 1fr) auto;
+}
+
+.work-document-underline-menu > button[aria-checked="true"] {
+  background: color-mix(in srgb,
+    var(--work-office-menu-accent) 10%,
+    transparent);
+}
+
+.work-document-underline-menu > button[aria-checked="true"]:after {
+  color: var(--work-office-menu-accent);
+  content: "✓";
+  grid-column: 3;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.work-document-underline-menu > button[aria-checked="true"] > kbd:last-child {
+  display: none;
+}
+
+.work-document-underline-glyph {
+  width: 32px;
+  height: 22px;
+  color: var(--work-office-menu-accent);
+  place-items: center;
+  font-size: 11px;
+  line-height: 17px;
+  display: grid;
+  position: relative;
+}
+
+.work-document-underline-glyph > span {
+  text-underline-offset: 2px;
+  text-decoration-line: underline;
+}
+
+.work-document-underline-glyph[data-underline-style="none"] {
+  opacity: .45;
+}
+
+.work-document-underline-glyph[data-underline-style="none"] > span {
+  text-decoration: none;
+}
+
+.work-document-underline-glyph[data-underline-style="none"]:after {
+  content: "";
+  background: currentColor;
+  width: 25px;
+  height: 1px;
+  position: absolute;
+  transform: rotate(-32deg);
+}
+
+.work-document-underline-glyph[data-underline-style="double"] > span, .work-document-underline-glyph[data-underline-style="wavyDouble"] > span {
+  text-decoration-style: double;
+}
+
+.work-document-underline-glyph[data-underline-style="dotted"] > span, .work-document-underline-glyph[data-underline-style="dottedHeavy"] > span {
+  text-decoration-style: dotted;
+}
+
+.work-document-underline-glyph[data-underline-style="dash"] > span, .work-document-underline-glyph[data-underline-style="dashedHeavy"] > span, .work-document-underline-glyph[data-underline-style="dashLong"] > span, .work-document-underline-glyph[data-underline-style="dashLongHeavy"] > span, .work-document-underline-glyph[data-underline-style="dotDash"] > span, .work-document-underline-glyph[data-underline-style="dashDotHeavy"] > span, .work-document-underline-glyph[data-underline-style="dotDotDash"] > span, .work-document-underline-glyph[data-underline-style="dashDotDotHeavy"] > span {
+  text-decoration-style: dashed;
+}
+
+.work-document-underline-glyph[data-underline-style="wave"] > span, .work-document-underline-glyph[data-underline-style="wavyHeavy"] > span, .work-document-underline-glyph[data-underline-style="wavyDouble"] > span {
+  text-decoration-style: wavy;
+}
+
+.work-document-underline-glyph[data-underline-style="thick"] > span, .work-document-underline-glyph[data-underline-style="dottedHeavy"] > span, .work-document-underline-glyph[data-underline-style="dashedHeavy"] > span, .work-document-underline-glyph[data-underline-style="dashLongHeavy"] > span, .work-document-underline-glyph[data-underline-style="dashDotHeavy"] > span, .work-document-underline-glyph[data-underline-style="dashDotDotHeavy"] > span, .work-document-underline-glyph[data-underline-style="wavyHeavy"] > span {
+  text-decoration-thickness: 2px;
+}
+
+.work-document-ribbon .work-document-font-actions .work-document-underline-split-root, .work-document-ribbon .work-document-font-actions .work-document-underline-split-root > button {
+  height: 24px;
+}
+
+.work-document-ribbon .work-document-font-actions .work-document-underline-split-root > .work-document-underline-primary {
+  width: 23px;
+  min-width: 23px;
+}
+
+.work-document-ribbon .work-document-font-actions .work-document-underline-split-root > .work-document-underline-disclosure {
+  width: 12px;
+  min-width: 12px;
+}
+
+.work-document-selection-toolbar > .work-document-underline-control {
+  gap: 0;
+  height: 28px;
+}
+
+.work-document-selection-toolbar .work-document-underline-split-root, .work-document-selection-toolbar .work-document-underline-split-root > button {
+  height: 28px;
+}
+
+.work-document-selection-toolbar .work-document-underline-split-root > .work-document-underline-primary {
+  border-radius: 5px 0 0 5px;
+  width: 26px;
+  min-width: 26px;
+  padding: 0;
+}
+
+.work-document-selection-toolbar .work-document-underline-split-root > .work-document-underline-disclosure {
+  border-left: 1px solid var(--a3s-line);
+  border-radius: 0 5px 5px 0;
+  width: 12px;
+  min-width: 12px;
+  padding: 0;
+}
+
+.work-document-strike-control, .work-document-strike-split-root {
+  flex: none;
+  align-items: stretch;
+  display: inline-flex;
+}
+
+.work-document-strike-split-root {
+  border-radius: 6px;
+  height: 29px;
+}
+
+.work-office-ribbon .work-office-toolbar .work-document-strike-split-root > button {
+  border-radius: 0;
+  height: 29px;
+  padding: 0;
+}
+
+.work-office-ribbon .work-office-toolbar .work-document-strike-split-root > .work-document-strike-primary {
+  border-radius: 6px 0 0 6px;
+  width: 27px;
+  min-width: 27px;
+}
+
+.work-office-ribbon .work-office-toolbar .work-document-strike-split-root > .work-document-strike-disclosure {
+  border-left: 1px solid color-mix(in srgb, var(--a3s-line) 72%, transparent);
+  border-radius: 0 6px 6px 0;
+  width: 14px;
+  min-width: 14px;
+}
+
+.work-document-strike-disclosure svg {
+  transition: transform .12s;
+}
+
+.work-document-strike-disclosure[aria-expanded="true"] svg {
+  transform: rotate(180deg);
+}
+
+.work-document-strike-primary:focus-visible, .work-document-strike-disclosure:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--work-office-accent);
+  outline: 0;
+}
+
+.work-document-strike-menu {
+  --work-office-menu-accent: var(--work-office-accent);
+  width: min(260px, 100vw - 24px);
+}
+
+.work-document-strike-menu > button {
+  grid-template-columns: 34px minmax(0, 1fr) auto;
+}
+
+.work-document-strike-menu > button[aria-checked="true"] {
+  background: color-mix(in srgb,
+    var(--work-office-menu-accent) 10%,
+    transparent);
+}
+
+.work-document-strike-menu > button[aria-checked="true"]:after {
+  color: var(--work-office-menu-accent);
+  content: "✓";
+  grid-column: 3;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.work-document-strike-glyph {
+  width: 32px;
+  height: 22px;
+  color: var(--work-office-menu-accent);
+  place-items: center;
+  font-size: 11px;
+  line-height: 17px;
+  display: grid;
+  position: relative;
+}
+
+.work-document-strike-glyph > span {
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+  text-decoration-line: line-through;
+}
+
+.work-document-strike-glyph[data-strike-style="none"] {
+  opacity: .45;
+}
+
+.work-document-strike-glyph[data-strike-style="none"] > span {
+  text-decoration: none;
+}
+
+.work-document-strike-glyph[data-strike-style="none"]:after {
+  content: "";
+  background: currentColor;
+  width: 25px;
+  height: 1px;
+  position: absolute;
+  transform: rotate(-32deg);
+}
+
+.work-document-strike-glyph[data-strike-style="double"] > span {
+  text-decoration-style: double;
+}
+
+.work-document-ribbon .work-document-font-actions .work-document-strike-split-root, .work-document-ribbon .work-document-font-actions .work-document-strike-split-root > button {
+  height: 24px;
+}
+
+.work-document-ribbon .work-document-font-actions .work-document-strike-split-root > .work-document-strike-primary {
+  width: 23px;
+  min-width: 23px;
+}
+
+.work-document-ribbon .work-document-font-actions .work-document-strike-split-root > .work-document-strike-disclosure {
+  width: 12px;
+  min-width: 12px;
+}
+
+.work-document-selection-toolbar > .work-document-strike-control, .work-document-selection-toolbar .work-document-strike-split-root, .work-document-selection-toolbar .work-document-strike-split-root > button {
+  height: 28px;
+}
+
+.work-document-selection-toolbar .work-document-strike-split-root > .work-document-strike-primary {
+  border-radius: 5px 0 0 5px;
+  width: 26px;
+  min-width: 26px;
+  padding: 0;
+}
+
+.work-document-selection-toolbar .work-document-strike-split-root > .work-document-strike-disclosure {
+  border-left: 1px solid var(--a3s-line);
+  border-radius: 0 5px 5px 0;
+  width: 12px;
+  min-width: 12px;
+  padding: 0;
+}
+
+@media (width <= 640px) {
+  .work-document-underline-menu {
+    grid-template-columns: minmax(0, 1fr);
+    width: min(300px, 100vw - 16px);
+  }
+}
+
 .work-document-ribbon .work-document-font-tools .work-office-select > button[role="combobox"], .work-document-ribbon .work-document-paragraph-tools .work-office-select > button[role="combobox"] {
   min-width: 0;
   height: 24px;
@@ -9218,93 +9568,242 @@ button.work-office-collaboration-participant:hover .work-office-collaboration-lo
   border-radius: 2px;
 }
 
-.work-document-editor .work-document-find-match.active {
-  outline-offset: 1px;
-  background: #ffd66b;
-  outline: 1px solid #d99316b3;
+.work-document-editor .work-document-find-match.active {
+  outline-offset: 1px;
+  background: #ffd66b;
+  outline: 1px solid #d99316b3;
+}
+
+@media (width <= 900px) {
+  .work-document-review-surface.comments-open {
+    gap: 0;
+  }
+
+  .work-document-comments-panel {
+    flex-basis: 276px;
+    align-self: flex-start;
+    width: 276px;
+    min-height: min(720px, 100dvh - 176px);
+    position: sticky;
+    right: 0;
+    box-shadow: -10px 0 24px #1e26371a;
+  }
+}
+
+@media (width <= 620px) {
+  .work-document-review-surface.comments-open {
+    justify-content: flex-start;
+  }
+
+  .work-document-comment-connectors {
+    display: none;
+  }
+
+  .work-document-comments-panel {
+    background: var(--a3s-panel);
+    flex-basis: min(360px, 100vw);
+    align-self: flex-start;
+    width: min(360px, 100vw);
+    min-height: min(640px, 100dvh - 160px);
+    max-height: calc(100dvh - 160px);
+    position: sticky;
+    top: 0;
+    right: 0;
+    overflow-y: auto;
+    box-shadow: -14px 0 30px #1e263729;
+  }
+
+  .work-document-comment-track {
+    align-content: start;
+    gap: 8px;
+    padding: 8px;
+    display: grid;
+    min-height: 0 !important;
+  }
+
+  .work-document-comment-track > .work-document-comment-card, .work-document-comment-track > .work-document-comment-draft-item > .work-document-comment-composer {
+    position: relative;
+    left: auto;
+    right: auto;
+    top: auto !important;
+  }
+
+  .work-document-comments-empty.ds-collection-state {
+    position: static;
+  }
+}
+
+.work-document-editor ins[data-document-change], .work-pdf-export-page.document ins[data-document-change] {
+  color: #216b43;
+  background: #e7f6ed;
+  border-bottom: 1px solid #2d8a58;
+  text-decoration: none;
+}
+
+.work-document-editor del[data-document-change], .work-pdf-export-page.document del[data-document-change] {
+  color: #b9483d;
+  background: #fff0ee;
+  text-decoration-thickness: 1px;
+}
+
+.work-document-editor span[data-document-change][data-change-kind="formatting"], .work-pdf-export-page.document span[data-document-change][data-change-kind="formatting"] {
+  color: inherit;
+  background: #f0edff;
+  border-bottom: 1px dashed #6d5bd0;
+  text-decoration: none;
+}
+
+.work-document-editor :is(p, h1, h2, h3, h4, h5, h6)[data-document-change][data-change-kind="paragraph-formatting"], .work-pdf-export-page.document :is(p, h1, h2, h3, h4, h5, h6)[data-document-change][data-change-kind="paragraph-formatting"] {
+  box-shadow: inset 3px 0 #8b5cf6;
+}
+
+.work-document-font-dialog {
+  width: min(680px, 100%);
+}
+
+.work-document-font-dialog form {
+  gap: 18px;
+  display: grid;
+}
+
+.work-document-font-dialog-script-fonts, .work-document-font-dialog-spacing {
+  border: 1px solid var(--a3s-line);
+  border-radius: 10px;
+  gap: 14px 18px;
+  margin: 0;
+  padding: 15px 16px 17px;
+  display: grid;
+}
+
+.work-document-font-dialog-script-fonts {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.work-document-font-dialog-spacing {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.work-document-font-dialog-script-fonts > legend, .work-document-font-dialog-spacing > legend {
+  color: var(--a3s-ink);
+  padding: 0 5px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.work-document-font-dialog-field {
+  min-width: 0;
+  color: var(--a3s-muted);
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 650;
+  display: grid;
+}
+
+.work-document-font-dialog-hidden-text {
+  justify-content: start;
+  align-self: end;
+  min-height: 32px;
+}
+
+.work-document-font-dialog-field > .work-office-select, .work-document-font-dialog-field .work-office-number-field, .work-document-font-dialog-field button[role="combobox"] {
+  width: 100%;
+}
+
+.work-document-font-dialog-measure {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  display: grid;
+}
+
+.work-document-font-dialog-measure > span {
+  color: var(--a3s-muted);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.work-document-font-dialog-mixed, .work-document-font-dialog-error {
+  grid-column: 1 / -1;
+  margin: -2px 0 0;
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.work-document-font-dialog-mixed {
+  color: var(--a3s-muted);
+}
+
+.work-document-font-dialog-error {
+  color: var(--a3s-red);
 }
 
-@media (width <= 900px) {
-  .work-document-review-surface.comments-open {
-    gap: 0;
-  }
-
-  .work-document-comments-panel {
-    flex-basis: 276px;
-    align-self: flex-start;
-    width: 276px;
-    min-height: min(720px, 100dvh - 176px);
-    position: sticky;
-    right: 0;
-    box-shadow: -10px 0 24px #1e26371a;
-  }
+.work-document-font-dialog-preview {
+  border: 1px solid var(--a3s-line);
+  background: var(--a3s-panel-soft);
+  border-radius: 10px;
+  place-items: center;
+  min-height: 106px;
+  padding: 14px 18px 18px;
+  display: grid;
+  overflow: hidden;
 }
 
-@media (width <= 620px) {
-  .work-document-review-surface.comments-open {
-    justify-content: flex-start;
-  }
+.work-document-font-dialog-preview > span {
+  color: var(--a3s-muted);
+  justify-self: start;
+  font-size: 10px;
+  font-weight: 650;
+}
 
-  .work-document-comment-connectors {
-    display: none;
-  }
+.work-document-font-dialog-preview > output {
+  max-width: 100%;
+  color: var(--a3s-ink);
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 22px;
+  line-height: 1.5;
+  overflow: hidden;
+}
 
-  .work-document-comments-panel {
-    background: var(--a3s-panel);
-    flex-basis: min(360px, 100vw);
-    align-self: flex-start;
-    width: min(360px, 100vw);
-    min-height: min(640px, 100dvh - 160px);
-    max-height: calc(100dvh - 160px);
-    position: sticky;
-    top: 0;
-    right: 0;
-    overflow-y: auto;
-    box-shadow: -14px 0 30px #1e263729;
+@media (width <= 620px) {
+  .work-document-font-dialog-script-fonts, .work-document-font-dialog-spacing {
+    grid-template-columns: minmax(0, 1fr);
   }
 
-  .work-document-comment-track {
-    align-content: start;
-    gap: 8px;
-    padding: 8px;
-    display: grid;
-    min-height: 0 !important;
+  .work-document-font-dialog-preview {
+    min-height: 88px;
   }
 
-  .work-document-comment-track > .work-document-comment-card, .work-document-comment-track > .work-document-comment-draft-item > .work-document-comment-composer {
-    position: relative;
-    left: auto;
-    right: auto;
-    top: auto !important;
+  .work-document-font-dialog-preview > output {
+    font-size: 19px;
   }
+}
 
-  .work-document-comments-empty.ds-collection-state {
-    position: static;
-  }
+[data-office-character-position-half-points] {
+  vertical-align: var(--work-document-character-position);
 }
 
-.work-document-editor ins[data-document-change], .work-pdf-export-page.document ins[data-document-change] {
-  color: #216b43;
-  background: #e7f6ed;
-  border-bottom: 1px solid #2d8a58;
-  text-decoration: none;
+sub [data-office-character-position-half-points], sup [data-office-character-position-half-points], [data-office-character-position-half-points]:has(sub), [data-office-character-position-half-points]:has(sup) {
+  vertical-align: baseline;
 }
 
-.work-document-editor del[data-document-change], .work-pdf-export-page.document del[data-document-change] {
-  color: #b9483d;
-  background: #fff0ee;
-  text-decoration-thickness: 1px;
+[data-office-hidden-text="true"] {
+  display: none;
 }
 
-.work-document-editor span[data-document-change][data-change-kind="formatting"], .work-pdf-export-page.document span[data-document-change][data-change-kind="formatting"] {
-  color: inherit;
-  background: #f0edff;
-  border-bottom: 1px dashed #6d5bd0;
-  text-decoration: none;
+.work-document-editor.show-hidden-text:not(.preview) [data-office-hidden-text="true"] {
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+  text-underline-offset: .18em;
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: currentColor;
+  display: inline;
 }
 
-.work-document-editor :is(p, h1, h2, h3, h4, h5, h6)[data-document-change][data-change-kind="paragraph-formatting"], .work-pdf-export-page.document :is(p, h1, h2, h3, h4, h5, h6)[data-document-change][data-change-kind="paragraph-formatting"] {
-  box-shadow: inset 3px 0 #8b5cf6;
+.work-document-editor.preview [data-office-hidden-text="true"], .work-document-editor.preview.show-hidden-text [data-office-hidden-text="true"], .work-document-live-pdf-snapshot [data-office-hidden-text="true"] {
+  display: none;
 }
 
 .work-document-list-tools {
@@ -10267,6 +10766,7 @@ button.work-office-collaboration-participant:hover .work-office-collaboration-lo
   isolation: isolate;
   color: #20232b;
   font-family: var(--work-document-render-font-family);
+  font-kerning: none;
   font-size: var(--work-document-render-font-size);
   line-height: var(--work-document-render-line-height);
   overflow-wrap: break-word;
@@ -10294,6 +10794,7 @@ button.work-office-collaboration-participant:hover .work-office-collaboration-lo
   color: #7a8395;
   min-height: 28px;
   font-family: var(--work-document-render-font-family);
+  font-kerning: none;
   font-size: var(--work-document-render-font-size);
   line-height: var(--work-document-render-line-height);
   white-space: pre-wrap;
@@ -15866,7 +16367,7 @@ button.work-office-collaboration-participant:hover .work-office-collaboration-lo
 }
 
 .work-spreadsheet-format-cells-dialog {
-  width: min(680px, 100%);
+  width: min(760px, 100%);
 }
 
 .work-spreadsheet-format-cells-dialog > .ds-dialog-body {
@@ -16129,28 +16630,187 @@ button.work-office-collaboration-participant:hover .work-office-collaboration-lo
 }
 
 .work-spreadsheet-format-cells-fill {
-  grid-template-columns: minmax(190px, 1fr) auto;
+  gap: 18px;
+  display: grid;
+}
+
+.work-spreadsheet-format-cells-fill-modes.ds-segmented-control {
+  width: min(460px, 100%);
+}
+
+.work-spreadsheet-format-cells-fill-layout {
+  grid-template-columns: minmax(0, 1fr) minmax(210px, .68fr);
+  align-items: start;
+  gap: 22px;
+  display: grid;
+}
+
+.work-spreadsheet-format-cells-fill-controls, .work-spreadsheet-format-cells-pattern-controls, .work-spreadsheet-format-cells-gradient-controls {
+  gap: 14px;
+  min-width: 0;
+  display: grid;
+}
+
+.work-spreadsheet-format-cells-pattern-controls {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.work-spreadsheet-format-cells-pattern-controls > .work-spreadsheet-format-cells-field:first-child {
+  grid-column: 1 / -1;
+}
+
+.work-spreadsheet-format-cells-fill-empty-copy {
+  color: var(--a3s-muted);
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.65;
+}
+
+.work-spreadsheet-format-cells-fill-controls > [role="alert"] {
+  color: var(--a3s-red);
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.55;
+}
+
+.work-spreadsheet-format-cells-gradient-geometry {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   align-items: end;
-  gap: 16px;
-  max-width: 430px;
+  gap: 12px;
   display: grid;
 }
 
-.work-spreadsheet-format-cells-fill-preview {
-  border: 1px solid var(--a3s-line);
-  min-height: 118px;
-  color: var(--a3s-ink);
-  border-radius: 9px;
+.work-spreadsheet-format-cells-path-geometry {
   grid-column: 1 / -1;
-  place-items: center;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px 12px;
+  display: grid;
+}
+
+.work-spreadsheet-format-cells-gradient-stops-heading {
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  padding-top: 2px;
+  display: flex;
+}
+
+.work-spreadsheet-format-cells-gradient-stops-heading > div {
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+  display: flex;
+}
+
+.work-spreadsheet-format-cells-gradient-stops-heading strong {
+  color: var(--a3s-ink);
   font-size: 11px;
   font-weight: 650;
+}
+
+.work-spreadsheet-format-cells-gradient-stops-heading span {
+  color: var(--a3s-muted);
+  font-size: 10px;
+}
+
+.work-spreadsheet-format-cells-gradient-stops-heading > .ds-button {
+  flex: none;
+  gap: 5px;
+}
+
+.work-spreadsheet-format-cells-gradient-stops {
+  border-block: 1px solid var(--a3s-line);
+  scrollbar-width: thin;
+  max-height: 214px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
   display: grid;
+  overflow: auto;
 }
 
-.work-spreadsheet-format-cells-fill-preview.empty {
-  background: var(--a3s-panel-soft);
+.work-spreadsheet-format-cells-gradient-stop {
+  grid-template-columns: 20px minmax(112px, 1fr) minmax(86px, .7fr) 28px;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding: 8px 2px;
+  display: grid;
+}
+
+.work-spreadsheet-format-cells-gradient-stop + .work-spreadsheet-format-cells-gradient-stop {
+  border-top: 1px solid var(--a3s-line);
+}
+
+.work-spreadsheet-format-cells-gradient-stop-index {
+  color: var(--a3s-muted);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  font-size: 10px;
+}
+
+.work-spreadsheet-format-cells-gradient-stop > .work-office-color-picker, .work-spreadsheet-format-cells-gradient-stop .work-office-color-trigger {
+  width: 100%;
+}
+
+.work-spreadsheet-format-cells-stop-position {
+  min-width: 0;
+  color: var(--a3s-muted);
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  display: grid;
+}
+
+.work-spreadsheet-format-cells-gradient-stop-remove.ds-icon-button {
+  width: 28px;
+  height: 28px;
+}
+
+.work-spreadsheet-format-cells-gradient-help {
   color: var(--a3s-muted);
+  font-size: 10px;
+  line-height: 1.55;
+}
+
+.work-spreadsheet-format-cells-fill-preview {
+  border: 1px solid var(--a3s-line);
+  background: var(--a3s-panel-soft);
+  border-radius: 9px;
+  min-width: 0;
+  margin: 0;
+  display: grid;
+  overflow: hidden;
+}
+
+.work-spreadsheet-format-cells-fill-preview > canvas {
+  width: 100%;
+  height: 142px;
+  display: block;
+}
+
+.work-spreadsheet-format-cells-fill-preview.none > canvas {
+  background: linear-gradient(45deg, var(--a3s-line) 25%, transparent 25%) 0 0 / 16px 16px,
+    linear-gradient(-45deg, var(--a3s-line) 25%, transparent 25%) 0 8px / 16px
+    16px,
+    linear-gradient(45deg, transparent 75%, var(--a3s-line) 75%) 8px -8px / 16px
+    16px,
+    linear-gradient(-45deg, transparent 75%, var(--a3s-line) 75%) -8px 0 / 16px
+    16px;
+}
+
+.work-spreadsheet-format-cells-fill-preview > figcaption {
+  border-top: 1px solid var(--a3s-line);
+  background: var(--a3s-panel);
+  color: var(--a3s-ink);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 9px 11px;
+  font-size: 10px;
+  font-weight: 600;
+  overflow: hidden;
 }
 
 .work-spreadsheet-format-cells-protection {
@@ -16193,11 +16853,41 @@ button.work-office-collaboration-participant:hover .work-office-collaboration-lo
   }
 
   .work-spreadsheet-format-cells-fill {
+    gap: 14px;
+  }
+
+  .work-spreadsheet-format-cells-fill-modes.ds-segmented-control {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-auto-columns: auto;
+    grid-auto-flow: row;
+  }
+
+  .work-spreadsheet-format-cells-fill-layout {
     grid-template-columns: minmax(0, 1fr);
+    gap: 16px;
   }
 
   .work-spreadsheet-format-cells-fill-preview {
-    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .work-spreadsheet-format-cells-fill-controls {
+    grid-row: 2;
+  }
+
+  .work-spreadsheet-format-cells-fill-preview > canvas {
+    height: 108px;
+  }
+}
+
+@media (width <= 420px) {
+  .work-spreadsheet-format-cells-pattern-controls, .work-spreadsheet-format-cells-gradient-geometry, .work-spreadsheet-format-cells-path-geometry {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .work-spreadsheet-format-cells-gradient-stop {
+    grid-template-columns: 18px minmax(88px, 1fr) 80px 28px;
+    gap: 6px;
   }
 }