@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/collection/components/co-rich-text-toolbar/co-rich-text-toolbar.css

@@ -0,0 +1,837 @@
+/* ============================================================
+   co-rich-text-toolbar  —  formatting toolbar (shadow DOM)
+   ============================================================ */
+
+:host {
+  display: block;
+  font-family: var(--co-font-family-primary);
+  z-index: 10;
+  flex-shrink: 0;
+  background: var(--co-semantic-surface-secondary, #fff);
+  overflow: visible;
+}
+
+.co-rich-text-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--co-spacing-xxs, 2px);
+  padding: var(--co-spacing-xs) var(--co-spacing-sm);
+  border-bottom: 1px solid var(--co-semantic-border-subtle);
+  background: var(--co-semantic-surface-secondary);
+}
+
+/* ── Fast CSS tooltips (replaces slow native title) ── */
+.co-rich-text-toolbar__btn-wrap,
+.co-rich-text-toolbar__split-wrap {
+  overflow: visible;
+}
+[data-tooltip] {
+  position: relative;
+}
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 8px;
+  background: var(--co-color-base-negro, #1a1a1a);
+  color: var(--co-color-base-blanco, #fff);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.3;
+  white-space: nowrap;
+  border-radius: 4px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  z-index: 9999;
+}
+[data-tooltip]:hover::after {
+  opacity: 1;
+  transition-delay: 0.4s;
+}
+[data-tooltip]:active::after,
+[data-tooltip][aria-expanded="true"]::after {
+  opacity: 0 !important;
+  transition-delay: 0s;
+}
+
+/* ── Button wrapper (for popover anchoring) ── */
+.co-rich-text-toolbar__btn-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+/* ── Buttons ── */
+.co-rich-text-toolbar__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: none;
+  border-radius: var(--co-border-radius-xxs);
+  background: transparent;
+  color: var(--co-semantic-text-default, #333);
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+
+.co-rich-text-toolbar__btn:hover:not(:disabled):not(.co-rich-text-toolbar__btn--active) {
+  background: var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.08));
+  color: var(--co-semantic-text-default, #1a1a1a);
+}
+
+.co-rich-text-toolbar__btn--active {
+  background: var(--co-color-base-negro, #1a1a1a);
+  color: var(--co-color-base-blanco, #fff);
+}
+
+.co-rich-text-toolbar__btn--active:hover {
+  background: var(--co-color-base-negro, #333);
+  color: var(--co-color-base-blanco, #fff);
+}
+
+.co-rich-text-toolbar__btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.co-rich-text-toolbar__btn:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus, var(--co-color-base-negro, #1a1a1a));
+  outline-offset: 1px;
+}
+
+/* ── Select-style dropdown buttons (heading, font, size) ── */
+.co-rich-text-toolbar__select-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  height: 30px;
+  padding: 0 6px;
+  border: 1px solid transparent;
+  border-radius: var(--co-border-radius-xxs, 4px);
+  background: transparent;
+  color: var(--co-semantic-text-default, #333);
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-12, 12px);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.12s, border-color 0.12s;
+}
+
+.co-rich-text-toolbar__select-btn:hover:not(:disabled) {
+  background: var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.06));
+  border-color: var(--co-semantic-border-default, #e0e0e0);
+}
+
+.co-rich-text-toolbar__select-btn--open {
+  background: var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.06));
+  border-color: var(--co-semantic-border-default, #e0e0e0);
+}
+
+.co-rich-text-toolbar__select-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.co-rich-text-toolbar__select-label {
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── Separator ── */
+.co-rich-text-toolbar__sep {
+  display: inline-block;
+  width: 1px;
+  height: 20px;
+  margin: 0 var(--co-spacing-xs, 4px);
+  background: var(--co-semantic-border-subtle, rgba(0, 0, 0, 0.12));
+}
+
+/* ── Popover (link / image / youtube input) ── */
+.co-rich-text-toolbar__popover {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-xs, 4px);
+  min-width: 280px;
+  padding: var(--co-spacing-sm, 8px);
+  background: var(--co-semantic-surface-secondary, #fff);
+  border: 1px solid var(--co-semantic-border-default, #e0e0e0);
+  border-radius: var(--co-border-radius-xs, 8px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  margin-top: var(--co-spacing-xs, 4px);
+}
+
+.co-rich-text-toolbar__popover-input {
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid var(--co-semantic-border-default, #ccc);
+  border-radius: var(--co-border-radius-xxs, 4px);
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14, 14px);
+  outline: none;
+  box-sizing: border-box;
+}
+
+.co-rich-text-toolbar__popover-input:focus {
+  border-color: var(--co-color-base-negro, #1a1a1a);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+}
+
+.co-rich-text-toolbar__popover-actions {
+  display: flex;
+  gap: var(--co-spacing-xs, 4px);
+}
+
+.co-rich-text-toolbar__popover-btn {
+  padding: 4px 12px;
+  border: 1px solid var(--co-semantic-border-default, #ccc);
+  border-radius: var(--co-border-radius-xxs, 4px);
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-12, 12px);
+  cursor: pointer;
+  background: var(--co-semantic-surface-secondary, #fff);
+  color: var(--co-semantic-text-default, #333);
+  transition: background 0.12s;
+}
+
+.co-rich-text-toolbar__popover-btn:hover:not(.co-rich-text-toolbar__popover-btn--primary) {
+  background: var(--co-semantic-surface-hover, #f5f5f5);
+}
+
+.co-rich-text-toolbar__popover-btn--primary {
+  background: var(--co-color-base-negro, #1a1a1a);
+  color: #fff;
+  border-color: var(--co-color-base-negro, #1a1a1a);
+}
+
+.co-rich-text-toolbar__popover-btn--primary:hover {
+  background: var(--co-color-base-negro, #333);
+  color: #fff;
+}
+
+.co-rich-text-toolbar__popover-btn--danger {
+  color: var(--co-color-status-error, #aa2e1b);
+  border-color: var(--co-color-status-error, #aa2e1b);
+}
+
+.co-rich-text-toolbar__popover-option {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm, 8px);
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  border-radius: var(--co-border-radius-xxs, 4px);
+  background: transparent;
+  color: var(--co-semantic-text-default, #333);
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14, 14px);
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.1s;
+}
+
+.co-rich-text-toolbar__popover-option:hover {
+  background: var(--co-semantic-surface-hover, #f5f5f5);
+}
+
+/* ── Dropdown (callout types) ── */
+.co-rich-text-toolbar__dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  min-width: 180px;
+  max-height: 360px;
+  overflow-y: auto;
+  padding: var(--co-spacing-xs, 4px);
+  background: var(--co-semantic-surface-secondary, #fff);
+  border: 1px solid var(--co-semantic-border-default, #e0e0e0);
+  border-radius: var(--co-border-radius-xs, 8px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  margin-top: var(--co-spacing-xs, 4px);
+}
+
+.co-rich-text-toolbar__dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm, 8px);
+  padding: 6px 10px;
+  border: none;
+  border-radius: var(--co-border-radius-xxs, 4px);
+  background: transparent;
+  color: var(--co-semantic-text-default, #333);
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14, 14px);
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.12s;
+}
+
+.co-rich-text-toolbar__dropdown-item:hover {
+  background: var(--co-semantic-surface-hover, #f5f5f5);
+}
+
+.co-rich-text-toolbar__dropdown-sep {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--co-semantic-border-default, #e0e0e0);
+}
+
+.co-rich-text-toolbar__dropdown-sep-label {
+  padding: 6px 10px 2px;
+  font-family: var(--co-font-family-primary);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--co-semantic-text-muted, #999);
+  letter-spacing: 0.03em;
+  border-top: 1px solid var(--co-semantic-border-default, #e0e0e0);
+  margin-top: 2px;
+}
+
+.co-rich-text-toolbar__dropdown-input-wrap {
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--co-semantic-border-default, #e0e0e0);
+}
+
+.co-rich-text-toolbar__dropdown-input {
+  width: 100%;
+  padding: 4px 8px;
+  border: 1px solid var(--co-semantic-border-default, #e0e0e0);
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: var(--co-font-family-primary);
+  outline: none;
+  box-sizing: border-box;
+}
+
+.co-rich-text-toolbar__dropdown-input:focus {
+  border-color: var(--co-color-base-negro, #1a1a1a);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+}
+
+/* ── Color Picker ── */
+.co-rich-text-toolbar__color-picker {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-xs, 4px);
+  padding: var(--co-spacing-sm, 8px);
+  background: var(--co-semantic-surface-secondary, #fff);
+  border: 1px solid var(--co-semantic-border-default, #e0e0e0);
+  border-radius: var(--co-border-radius-xs, 8px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  margin-top: var(--co-spacing-xs, 4px);
+}
+
+.co-rich-text-toolbar__color-grid {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  gap: 2px;
+}
+
+.co-rich-text-toolbar__color-swatch {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.co-rich-text-toolbar__color-swatch:hover {
+  transform: scale(1.2);
+  box-shadow: 0 0 0 2px var(--co-color-base-negro, #1a1a1a);
+}
+
+.co-rich-text-toolbar__color-clear {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-xs, 4px);
+  padding: 4px 8px;
+  border: none;
+  background: transparent;
+  color: var(--co-semantic-text-secondary, #666);
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-12, 12px);
+  cursor: pointer;
+  border-radius: var(--co-border-radius-xxs, 4px);
+  margin-top: var(--co-spacing-xxs, 2px);
+}
+
+.co-rich-text-toolbar__color-clear:hover {
+  background: var(--co-semantic-surface-hover, #f5f5f5);
+  color: var(--co-semantic-text-default, #333);
+}
+
+/* ── Table Grid Picker (enhanced with tabs) ── */
+.co-rich-text-toolbar__table-picker {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+  padding: var(--co-spacing-lg, 16px);
+  background: var(--co-semantic-surface-secondary, #fff);
+  border: 1px solid var(--co-semantic-border-default, #e0e0e0);
+  border-radius: var(--co-border-radius-xs, 8px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  margin-top: var(--co-spacing-xs, 4px);
+}
+
+.co-rich-text-toolbar__table-header {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm, 8px);
+  margin-bottom: var(--co-spacing-md, 12px);
+}
+
+.co-rich-text-toolbar__table-title {
+  flex: 1;
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-12, 12px);
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: var(--co-semantic-text-secondary, #666);
+}
+
+.co-rich-text-toolbar__table-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: var(--co-border-radius-xxs, 4px);
+  background: transparent;
+  color: var(--co-semantic-text-secondary, #666);
+  cursor: pointer;
+}
+
+.co-rich-text-toolbar__table-close:hover {
+  background: var(--co-semantic-surface-hover, #f0f0f0);
+}
+
+/* Tabs */
+.co-rich-text-toolbar__table-tabs {
+  display: flex;
+  gap: 0;
+  margin-bottom: var(--co-spacing-md, 12px);
+  border: 1px solid var(--co-semantic-border-default, #e0e0e0);
+  border-radius: var(--co-border-radius-xxs, 4px);
+  overflow: hidden;
+}
+
+.co-rich-text-toolbar__table-tab {
+  flex: 1;
+  padding: var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px);
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-13, 13px);
+  font-weight: 500;
+  border: none;
+  background: transparent;
+  color: var(--co-semantic-text-secondary, #666);
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+}
+
+.co-rich-text-toolbar__table-tab:hover {
+  background: var(--co-semantic-surface-hover, #f5f5f5);
+}
+
+.co-rich-text-toolbar__table-tab--active {
+  background: var(--co-color-base-negro, #1a1a1a);
+  color: var(--co-color-base-blanco, #fff);
+}
+
+/* Grid container */
+.co-rich-text-toolbar__grid-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-sm, 8px);
+  margin-bottom: var(--co-spacing-md, 12px);
+}
+
+.co-rich-text-toolbar__grid {
+  display: grid;
+  gap: 3px;
+}
+
+.co-rich-text-toolbar__grid-cell {
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--co-semantic-border-default, #d0d0d0);
+  border-radius: 3px;
+  background: transparent;
+  cursor: pointer;
+  transition: background 0.08s, border-color 0.08s;
+}
+
+.co-rich-text-toolbar__grid-cell:hover,
+.co-rich-text-toolbar__grid-cell--active {
+  background: var(--co-color-base-negro, #1a1a1a);
+  border-color: var(--co-color-base-negro, #1a1a1a);
+}
+
+.co-rich-text-toolbar__grid-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.co-rich-text-toolbar__grid-label {
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-12, 12px);
+  color: var(--co-semantic-text-muted, #999);
+}
+
+.co-rich-text-toolbar__grid-reset {
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-12, 12px);
+  color: var(--co-semantic-text-default, #333);
+  text-decoration: underline;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+}
+
+/* Manual tab */
+.co-rich-text-toolbar__table-manual {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-md, 12px);
+  margin-bottom: var(--co-spacing-md, 12px);
+}
+
+.co-rich-text-toolbar__table-field {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-md, 12px);
+}
+
+.co-rich-text-toolbar__table-field label {
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14, 14px);
+  color: var(--co-semantic-text-default, #333);
+  min-width: 70px;
+}
+
+.co-rich-text-toolbar__table-field input {
+  flex: 1;
+  padding: var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px);
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14, 14px);
+  border: 1px solid var(--co-semantic-border-default, #e0e0e0);
+  border-radius: var(--co-border-radius-xxs, 4px);
+  background: var(--co-semantic-surface-secondary, #fff);
+  outline: none;
+}
+
+.co-rich-text-toolbar__table-field input:focus {
+  border-color: var(--co-color-base-negro, #1a1a1a);
+}
+
+/* Checkbox */
+.co-rich-text-toolbar__table-check {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm, 8px);
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14, 14px);
+  color: var(--co-semantic-text-default, #333);
+  cursor: pointer;
+  margin-bottom: var(--co-spacing-md, 12px);
+}
+
+.co-rich-text-toolbar__table-check input {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  accent-color: var(--co-color-base-negro, #1a1a1a);
+}
+
+/* Action buttons */
+.co-rich-text-toolbar__table-actions {
+  display: flex;
+  gap: var(--co-spacing-sm, 8px);
+  justify-content: flex-end;
+}
+
+.co-rich-text-toolbar__table-btn {
+  padding: var(--co-spacing-sm, 8px) var(--co-spacing-lg, 16px);
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-13, 13px);
+  font-weight: 500;
+  border: none;
+  border-radius: var(--co-border-radius-xxs, 4px);
+  cursor: pointer;
+  transition: opacity 0.12s;
+}
+
+.co-rich-text-toolbar__table-btn--primary {
+  background: var(--co-color-base-negro, #1a1a1a);
+  color: var(--co-color-base-blanco, #fff);
+}
+
+.co-rich-text-toolbar__table-btn--primary:hover { opacity: 0.85; }
+
+.co-rich-text-toolbar__table-btn--secondary {
+  background: transparent;
+  color: var(--co-semantic-text-default, #333);
+}
+
+.co-rich-text-toolbar__table-btn--secondary:hover {
+  background: var(--co-semantic-surface-hover, #f5f5f5);
+}
+
+/* ── Split button (list pickers) ── */
+.co-rich-text-toolbar__split-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.co-rich-text-toolbar__split-main {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  width: 28px;
+}
+
+.co-rich-text-toolbar__split-caret {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 30px;
+  padding: 0;
+  border: none;
+  border-radius: var(--co-border-radius-xxs);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  background: transparent;
+  color: var(--co-semantic-text-default, #333);
+  cursor: pointer;
+  transition: background 0.12s ease;
+}
+
+.co-rich-text-toolbar__split-caret:hover:not(:disabled),
+.co-rich-text-toolbar__split-caret--open {
+  background: var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.08));
+}
+
+.co-rich-text-toolbar__split-caret:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* List marker picker grid — clean Google-Docs-style tiles */
+.co-rich-text-toolbar__listpicker {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+  padding: 16px;
+  background: var(--co-semantic-surface-secondary, #fff);
+  border: 1px solid var(--co-semantic-border-default, #e0e0e0);
+  border-radius: var(--co-border-radius-xs, 8px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
+  margin-top: var(--co-spacing-xs, 4px);
+}
+
+.co-rich-text-toolbar__listpicker-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 76px;
+  height: 60px;
+  padding: 0;
+  border: 1px solid var(--co-semantic-border-default, #e3e3e3);
+  border-radius: 8px;
+  background: var(--co-semantic-surface-secondary, #fff);
+  cursor: pointer;
+  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
+}
+
+.co-rich-text-toolbar__listpicker-item:hover {
+  border-color: var(--co-color-base-negro, #1a1a1a);
+  background: var(--co-semantic-surface-hover, #fafafa);
+}
+
+.co-rich-text-toolbar__listpicker-item--active {
+  border-color: var(--co-color-base-negro, #1a1a1a);
+  box-shadow: 0 0 0 1.5px var(--co-color-base-negro, #1a1a1a);
+}
+
+.co-rich-text-toolbar__listpicker-preview {
+  margin: 0;
+  padding: 0 0 0 22px;
+  list-style-position: outside;
+  pointer-events: none;
+}
+
+.co-rich-text-toolbar__listpicker-preview li {
+  height: 3px;
+  width: 30px;
+  margin: 7px 0;
+  background: var(--co-semantic-border-default, #cfcfcf);
+  border-radius: 2px;
+}
+
+.co-rich-text-toolbar__listpicker-preview li::marker {
+  color: var(--co-color-base-negro, #1a1a1a);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+/* Task-list variant picker — checkbox previews */
+.co-rich-text-toolbar__listpicker--task {
+  grid-template-columns: repeat(2, 1fr);
+}
+.co-rich-text-toolbar__listpicker-item--task {
+  width: 92px;
+  justify-content: center;
+}
+.co-rich-text-toolbar__taskpreview {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+.co-rich-text-toolbar__taskpreview-row {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+.co-rich-text-toolbar__taskpreview-box {
+  flex: 0 0 auto;
+  width: 11px;
+  height: 11px;
+  border: 1.5px solid var(--co-color-base-negro, #1a1a1a);
+  border-radius: 3px;
+  box-sizing: border-box;
+}
+.co-rich-text-toolbar__taskpreview-box--checked {
+  position: relative;
+  background: var(--co-color-base-negro, #1a1a1a);
+}
+.co-rich-text-toolbar__taskpreview-box--checked::after {
+  content: '';
+  position: absolute;
+  left: 3px;
+  top: 0.5px;
+  width: 3px;
+  height: 6px;
+  border: solid #fff;
+  border-width: 0 1.5px 1.5px 0;
+  transform: rotate(45deg);
+}
+.co-rich-text-toolbar__taskpreview-line {
+  position: relative;
+  width: 34px;
+  height: 3px;
+  background: var(--co-semantic-border-default, #cfcfcf);
+  border-radius: 2px;
+}
+/* "strike" variant: the completed row's line shows a strikethrough */
+.co-rich-text-toolbar__taskpreview[data-variant="strike"] .co-rich-text-toolbar__taskpreview-row--checked .co-rich-text-toolbar__taskpreview-line::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 1.5px;
+  background: var(--co-color-base-negro, #1a1a1a);
+}
+
+/* ── Dropdown checkmark column ── */
+.co-rich-text-toolbar__dropdown-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  flex-shrink: 0;
+}
+
+.co-rich-text-toolbar__dropdown-item--active {
+  background: var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04));
+  font-weight: 600;
+}
+
+/* ── Alignment icon group (Google Docs style) ── */
+.co-rich-text-toolbar__align-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+}
+
+/* ── Color indicator (A + colored bar) ── */
+.co-rich-text-toolbar__color-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+  line-height: 1;
+}
+
+.co-rich-text-toolbar__color-letter {
+  font-family: var(--co-font-family-primary);
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--co-semantic-text-default, #333);
+  line-height: 1;
+}
+
+.co-rich-text-toolbar__color-bar {
+  width: 14px;
+  height: 3px;
+  border-radius: 1px;
+}
+
+/* ── Color hex input row ── */
+.co-rich-text-toolbar__color-hex {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 6px;
+}
+
+.co-rich-text-toolbar__color-hex-input {
+  width: 100%;
+  padding: 3px 6px;
+  border: 1px solid var(--co-semantic-border-default, #ccc);
+  border-radius: 3px;
+  background: var(--co-semantic-surface-secondary, #fff);
+  color: var(--co-semantic-text-default, #333);
+  font-family: var(--co-font-family-mono, monospace);
+  font-size: 11px;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.co-rich-text-toolbar__color-hex-input:focus {
+  border-color: var(--co-color-base-negro, #1a1a1a);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+}