@einfach-excel/spreadsheet-ui-styles 0.0.0-stage → 0.2.0

package/features/protection-unlock-dialog.css

@@ -0,0 +1,127 @@
+/* Protection unlock owns this interior; dialog-skin.css owns the modal shell. */
+
+.protection-unlock-dialog {
+  width: min(400px, calc(100vw - 32px));
+}
+
+.protection-unlock-dialog .protection-unlock-header {
+  position: relative;
+  justify-content: space-between;
+}
+
+.protection-unlock-dialog .protection-unlock-title {
+  color: var(--text-default);
+  font-size: 14px;
+  font-weight: 600;
+  user-select: none;
+}
+
+.protection-unlock-dialog .protection-unlock-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  background: var(--bg-surface);
+}
+
+.protection-unlock-dialog .protection-unlock-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.protection-unlock-dialog .protection-unlock-target {
+  display: flex;
+  align-items: center;
+  min-height: var(--control-h);
+  gap: 8px;
+  padding: 4px 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--control-radius);
+  background: var(--bg-chrome-light);
+  color: var(--text-default);
+  overflow-wrap: anywhere;
+}
+
+.protection-unlock-dialog .protection-unlock-target::before {
+  color: var(--excel-green-text);
+  content: '🔒';
+  font-size: 12px;
+  line-height: 1;
+}
+
+.protection-unlock-dialog .protection-unlock-label {
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.protection-unlock-dialog .protection-unlock-input {
+  width: 100%;
+  padding: 0 8px;
+}
+
+.protection-unlock-dialog .protection-unlock-input[aria-invalid='true'] {
+  border-color: var(--error-text);
+}
+
+.protection-unlock-dialog .protection-unlock-error {
+  padding: 8px 10px;
+  border: 1px solid var(--error-text);
+  border-radius: var(--control-radius);
+  background: var(--error-bg);
+  color: var(--error-text);
+  font-size: 12px;
+}
+
+.protection-unlock-dialog .protection-unlock-actions {
+  min-height: 48px;
+}
+
+.protection-unlock-dialog .protection-unlock-btn {
+  min-width: 72px;
+  padding: 0 12px;
+  cursor: pointer;
+}
+
+.protection-unlock-dialog .protection-unlock-btn:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  background: var(--hover);
+}
+
+.protection-unlock-dialog .protection-unlock-btn-primary:hover:not(:disabled) {
+  border-color: var(--dialog-primary-hover);
+  background: var(--dialog-primary-hover);
+}
+
+.protection-unlock-dialog :is(.protection-unlock-input, .protection-unlock-btn):disabled {
+  border-color: var(--border);
+  background: var(--bg-chrome);
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+.protection-unlock-dialog[data-phase='verifying'] .protection-unlock-btn-primary::before {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-right: 6px;
+  animation: protection-unlock-spin 800ms linear infinite;
+  border: 1px solid var(--text-disabled);
+  border-top-color: var(--office-blue);
+  border-radius: 50%;
+  content: '';
+  vertical-align: -1px;
+}
+
+@keyframes protection-unlock-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .protection-unlock-dialog[data-phase='verifying'] .protection-unlock-btn-primary::before {
+    animation: none;
+  }
+}

package/features/remove-duplicates-dialog.css

@@ -0,0 +1,165 @@
+/* Remove Duplicates owns its form layout; dialog-skin.css owns the modal chrome. */
+
+.remove-duplicates-dialog {
+  width: 480px;
+  max-width: calc(100vw - 32px);
+}
+
+.remove-duplicates-dialog .rd-header {
+  justify-content: space-between;
+}
+
+.remove-duplicates-dialog .rd-title {
+  margin: 0;
+}
+
+.remove-duplicates-dialog .rd-body {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 16px;
+  overflow: auto;
+  background: var(--bg-surface);
+}
+
+.remove-duplicates-dialog .rd-option,
+.remove-duplicates-dialog .rd-checkbox,
+.remove-duplicates-dialog .rd-radio {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-default);
+  cursor: pointer;
+}
+
+.remove-duplicates-dialog :is(.rd-option, .rd-checkbox, .rd-radio):has(input:disabled) {
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.remove-duplicates-dialog :is(.rd-option, .rd-checkbox, .rd-radio) input {
+  accent-color: var(--excel-green);
+}
+
+.remove-duplicates-dialog .rd-fieldset {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.remove-duplicates-dialog .rd-legend {
+  padding: 0;
+  color: var(--text-default);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.remove-duplicates-dialog .rd-columns-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px 12px;
+  max-height: 132px;
+  padding: 8px 10px;
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-surface);
+}
+
+.remove-duplicates-dialog .rd-comparison-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px 12px;
+}
+
+.remove-duplicates-dialog .rd-column-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.remove-duplicates-dialog .rd-link-btn {
+  width: fit-content;
+  min-height: auto;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--office-blue-text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  text-decoration: underline;
+}
+
+.remove-duplicates-dialog .rd-link-btn:hover:not(:disabled) {
+  color: var(--office-blue-text);
+  text-decoration-thickness: 2px;
+}
+
+.remove-duplicates-dialog .rd-link-btn:disabled {
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.remove-duplicates-dialog .rd-preview {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 4px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-chrome-light);
+}
+
+.remove-duplicates-dialog .rd-preview-label {
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.remove-duplicates-dialog .rd-preview-text {
+  color: var(--text-default);
+}
+
+.remove-duplicates-dialog[aria-busy='true'] .rd-preview {
+  border-color: var(--office-blue);
+}
+
+.remove-duplicates-dialog .rd-error {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--error-text);
+  border-radius: var(--radius);
+  background: var(--error-bg);
+  color: var(--error-text);
+}
+
+.remove-duplicates-dialog .rd-footer {
+  min-height: 48px;
+}
+
+.remove-duplicates-dialog .rd-btn {
+  min-width: 72px;
+  padding: 0 12px;
+  cursor: pointer;
+}
+
+.remove-duplicates-dialog .rd-btn:hover:not(:disabled) {
+  background: var(--hover);
+}
+
+.remove-duplicates-dialog .rd-btn:disabled {
+  border-color: var(--border);
+  background: var(--bg-chrome);
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.remove-duplicates-dialog .rd-btn-primary:disabled {
+  background: var(--bg-chrome);
+}

package/features/remove-duplicates-dialog.css.d.ts

@@ -0,0 +1,7 @@
+// Side-effect CSS module — the dialog `.tsx` pulls this in for its styles.
+// Declaration is co-located so tsc is happy when the runtime-guarded
+// `import('./remove-duplicates-dialog.css')` is type-checked. The default
+// export is `unknown` because nothing consumes the returned namespace; we
+// only want the load side-effect.
+declare const css: unknown
+export default css

package/features/sheet-tab-delete-dialog.css

@@ -0,0 +1,64 @@
+/* Sheet-tab deletion owns this compact interior; dialog-skin.css owns the modal shell. */
+
+.sheet-tab-delete-dialog {
+  width: min(400px, calc(100vw - 32px));
+}
+
+.sheet-tab-delete-dialog .sheet-tab-delete-header {
+  justify-content: flex-start;
+}
+
+.sheet-tab-delete-dialog .sheet-tab-delete-header h2 {
+  margin: 0;
+  color: var(--text-default);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.sheet-tab-delete-dialog .sheet-tab-delete-body {
+  min-height: 68px;
+  padding: 16px;
+  background: var(--bg-surface);
+}
+
+.sheet-tab-delete-dialog .sheet-tab-delete-body p {
+  margin: 0;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+.sheet-tab-delete-dialog .sheet-tab-delete-footer {
+  min-height: 48px;
+}
+
+.sheet-tab-delete-dialog .sheet-tab-delete-footer button {
+  min-width: 72px;
+  padding: 0 12px;
+  cursor: pointer;
+}
+
+.sheet-tab-delete-dialog .sheet-tab-delete-footer button:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  background: var(--hover);
+}
+
+.sheet-tab-delete-dialog .sheet-tab-delete-footer button[data-variant='danger'] {
+  border-color: var(--error-text);
+  background: var(--bg-surface);
+  color: var(--error-text);
+}
+
+.sheet-tab-delete-dialog
+  .sheet-tab-delete-footer
+  button[data-variant='danger']:hover:not(:disabled) {
+  border-color: var(--error-text);
+  background: var(--error-bg);
+  color: var(--error-text);
+}
+
+.sheet-tab-delete-dialog .sheet-tab-delete-footer button:disabled {
+  border-color: var(--border);
+  background: var(--bg-chrome);
+  color: var(--text-disabled);
+  cursor: default;
+}

package/features/sheet-tab-delete-dialog.css.d.ts

@@ -0,0 +1,3 @@
+// Side-effect CSS module imported by the sheet-tab delete overlay.
+declare const stylesheet: string
+export default stylesheet

package/features/sort-confirmation-dialog.css

@@ -0,0 +1,157 @@
+.spreadsheet-sort-confirmation-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  place-items: center;
+  padding: 16px;
+  background: var(--dialog-overlay);
+}
+
+.spreadsheet-sort-confirmation-dialog {
+  width: min(360px, 100%);
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-surface);
+  box-shadow: var(--dialog-shadow);
+  color: var(--text-default);
+  font: 13px/1.5 var(--excel-font);
+}
+
+.spreadsheet-sort-confirmation-header,
+.spreadsheet-sort-confirmation-actions {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.spreadsheet-sort-confirmation-header {
+  flex: 0 0 var(--dialog-header-h);
+  justify-content: space-between;
+  min-height: var(--dialog-header-h);
+  padding: 0 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-surface);
+}
+
+.spreadsheet-sort-confirmation-header h2 {
+  margin: 0;
+  color: var(--text-default);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.spreadsheet-sort-confirmation-dialog .dialog-close-x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--control-h);
+  height: var(--control-h);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.spreadsheet-sort-confirmation-dialog .dialog-close-x:hover:not(:disabled) {
+  background: var(--hover);
+  color: var(--text-default);
+}
+
+.spreadsheet-sort-confirmation-body {
+  min-height: 92px;
+  padding: 16px;
+  background: var(--bg-surface);
+}
+
+.spreadsheet-sort-confirmation-body p {
+  margin: 0 0 12px;
+}
+
+.spreadsheet-sort-confirmation-body dl,
+.spreadsheet-sort-confirmation-body dl div {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+}
+
+.spreadsheet-sort-confirmation-body dl div {
+  grid-template-columns: 96px 1fr;
+}
+
+.spreadsheet-sort-confirmation-body dt {
+  color: var(--text-muted);
+}
+
+.spreadsheet-sort-confirmation-body dd {
+  margin: 0;
+  font-weight: 600;
+}
+
+.spreadsheet-sort-confirmation-actions {
+  justify-content: flex-end;
+  min-height: 48px;
+  padding: 10px 16px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-surface);
+}
+
+.spreadsheet-sort-confirmation-actions button {
+  box-sizing: border-box;
+  height: var(--control-h);
+  min-width: 72px;
+  padding: 0 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--control-radius);
+  background: var(--bg-surface);
+  color: var(--text-default);
+  cursor: pointer;
+  font: inherit;
+}
+
+.spreadsheet-sort-confirmation-actions button:hover:not(:disabled) {
+  background: var(--hover);
+}
+
+.spreadsheet-sort-confirmation-dialog :is(button):focus-visible {
+  border-color: var(--office-blue);
+  outline: 2px solid var(--office-blue);
+  outline-offset: 1px;
+}
+
+.spreadsheet-sort-confirmation-actions button[data-variant='primary'] {
+  border-color: var(--dialog-primary-bg);
+  background: var(--dialog-primary-bg);
+  color: var(--text-on-accent);
+}
+
+.spreadsheet-sort-confirmation-actions button[data-variant='primary']:hover:not(:disabled) {
+  border-color: var(--dialog-primary-hover);
+  background: var(--dialog-primary-hover);
+}
+
+.spreadsheet-sort-confirmation-actions button[data-variant='primary']:active:not(:disabled) {
+  border-color: var(--dialog-primary-active);
+  background: var(--dialog-primary-active);
+}
+
+.spreadsheet-sort-confirmation-actions button:disabled {
+  border-color: var(--border);
+  background: var(--bg-chrome);
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.spreadsheet-sort-confirmation-error {
+  padding: 8px 10px;
+  border: 1px solid var(--error-text);
+  border-radius: var(--radius);
+  background: var(--error-bg);
+  color: var(--error-text);
+}

package/features/sort-confirmation-dialog.css.d.ts

@@ -0,0 +1,2 @@
+declare const stylesheet: string
+export default stylesheet