@freegridjs/core 1.1.0 → 1.7.0

package/dist/cdn/freegrid.css

@@ -112,6 +112,12 @@
   background: var(--fg-input-bg); color: inherit; font: inherit;
 }
 .fg-input:focus, .fg-filter-op:focus { outline: 2px solid var(--fg-focus); outline-offset: -1px; }
+/* every select in the grid, its menus and dialogs: a drawn chevron with room on the right */
+.fg-root select:not([multiple]):not([size]), .fg-menu select:not([multiple]):not([size]) {
+  appearance: none; -webkit-appearance: none; padding-right: 26px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238a93a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat; background-position: right 9px center; background-size: 11px;
+}
 .fg-set-list { max-height: 220px; overflow: auto; display: flex; flex-direction: column; }
 .fg-set-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .fg-set-item:hover { background: var(--fg-row-hover); }
@@ -130,6 +136,16 @@
   font: 600 var(--fg-font-size) var(--fg-font); cursor: pointer;
 }
 .fg-sidebar-tab[aria-expanded="true"] { color: var(--fg-accent); box-shadow: inset 2px 0 var(--fg-accent); }
+.fg-sidebar-open .fg-sidebar-tabs { width: 32px; gap: 4px; padding: 8px 4px 8px 0; }
+.fg-sidebar-open .fg-sidebar-tab {
+  position: relative; margin-left: -1px; padding: 14px 0; border: 1px solid var(--fg-border); border-left-color: transparent;
+  border-radius: 0 7px 7px 0; background: var(--fg-header-bg); color: var(--fg-muted);
+}
+.fg-sidebar-open .fg-sidebar-tab:hover { color: var(--fg-header-fg); background: var(--fg-row-hover); }
+.fg-sidebar-open .fg-sidebar-tab[aria-expanded="true"] {
+  background: var(--fg-bg); color: var(--fg-accent); border-left-color: var(--fg-bg); box-shadow: inset -3px 0 var(--fg-accent); z-index: 1;
+}
+.fg-sidebar-open .fg-sidebar-tab:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: -2px; }
 .fg-chooser { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-height: 0; flex: 1; }
 .fg-chooser-dialog { width: 280px; }
 .fg-chooser-dialog .fg-chooser { max-height: 420px; }
@@ -195,6 +211,7 @@
 .fg-theme-classic .fg-sort-icon, .fg-theme-classic .fg-menu-btn.fg-filter-active { color: #ffd166; }
 .fg-theme-classic .fg-sidebar-tab { color: #c9d2e0; }
 .fg-theme-classic .fg-sidebar-tab[aria-expanded="true"] { color: #ffd166; box-shadow: inset 2px 0 #ffd166; }
+.fg-theme-classic .fg-sidebar-open .fg-sidebar-tab[aria-expanded="true"] { color: var(--fg-accent); box-shadow: inset -3px 0 var(--fg-accent); }
 .fg-theme-board .fg-header-cell, .fg-theme-erp .fg-header-cell, .fg-theme-excel .fg-header-cell, .fg-theme-classic .fg-header-cell { flex-direction: row; justify-content: center; }
 .fg-theme-board .fg-menu-btn, .fg-theme-erp .fg-menu-btn, .fg-theme-excel .fg-menu-btn, .fg-theme-classic .fg-menu-btn {
   position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin: 0;
@@ -439,9 +456,15 @@ textarea.fg-editor-control { padding-top: 8px; resize: none; }
 .fg-tooltip.fg-theme-dark { background: #e6e9f0; color: #11141b; }
 
 /* cells changed by applyTransaction */
-.fg-cell-flash { animation: fg-flash 1s ease-out; }
+.fg-cell-flash { animation: fg-flash var(--fg-flash-duration, 1s) ease-out; }
 @keyframes fg-flash { from { background: color-mix(in srgb, var(--fg-accent) 35%, transparent); } to { background: transparent; } }
-@media (prefers-reduced-motion: reduce) { .fg-cell-flash { animation: none; outline: 1px solid var(--fg-accent); outline-offset: -1px; } }
+.fg-cell-flash-up { animation-name: fg-flash-up; }
+.fg-cell-flash-down { animation-name: fg-flash-down; }
+@keyframes fg-flash-up { from { background: color-mix(in srgb, var(--fg-up, #16a34a) 32%, transparent); } to { background: transparent; } }
+@keyframes fg-flash-down { from { background: color-mix(in srgb, var(--fg-down, #dc2626) 32%, transparent); } to { background: transparent; } }
+@media (prefers-reduced-motion: reduce) { .fg-cell-flash { animation: none; outline: 1px solid var(--fg-accent); outline-offset: -1px; }
+  .fg-cell-flash-up { outline-color: var(--fg-up, #16a34a); }
+  .fg-cell-flash-down { outline-color: var(--fg-down, #dc2626); } }
 
 /* editType 'row': the row being edited */
 .fg-row-editing { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fg-accent) 45%, transparent); background: color-mix(in srgb, var(--fg-accent) 5%, var(--fg-bg)); }
@@ -468,3 +491,35 @@ textarea.fg-editor-control { padding-top: 8px; resize: none; }
 /* density */
 .fg-density-compact { --fg-cell-px: 7px; }
 .fg-density-comfortable { --fg-cell-px: 14px; }
+
+/* conditional formats */
+.fg-cf-bar { background-image: linear-gradient(to right, transparent var(--fg-bar-from), color-mix(in srgb, var(--fg-bar-color) 38%, transparent) var(--fg-bar-from), color-mix(in srgb, var(--fg-bar-color) 38%, transparent) var(--fg-bar-to), transparent var(--fg-bar-to)); background-repeat: no-repeat; background-size: 100% 70%; background-position: 0 50%; }
+.fg-cf-icon { display: inline-block; margin-inline-end: 6px; font-size: .9em; line-height: 1; }
+.fg-cf-dialog { width: 340px; }
+.fg-cf-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
+.fg-cf-rule { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border: 1px solid var(--fg-border); border-radius: 6px; }
+.fg-cf-rule-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fg-cf-sample { flex: none; width: 34px; height: 18px; border-radius: 4px; border: 1px solid var(--fg-border); display: grid; place-items: center; font-size: 11px; }
+.fg-cf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
+.fg-cf-form > .fg-cf-wide { grid-column: 1 / -1; }
+.fg-cf-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
+.fg-cf-swatch { width: 30px; height: 22px; border-radius: 5px; border: 1px solid var(--fg-border); cursor: pointer; font: 600 11px/1 var(--fg-font); padding: 0; }
+.fg-cf-swatch[aria-pressed="true"] { outline: 2px solid var(--fg-accent); outline-offset: 1px; }
+.fg-cf-empty { color: var(--fg-muted); padding: 4px 0; }
+
+/* AI assistant */
+.fg-ai-panel { width: 360px; display: flex; flex-direction: column; gap: 8px; }
+.fg-ai-log { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
+.fg-ai-log:empty { display: none; }
+.fg-ai-msg { padding: 7px 10px; border-radius: 10px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 92%; }
+.fg-ai-user { align-self: flex-end; background: var(--fg-accent); color: var(--fg-accent-fg); border-bottom-right-radius: 3px; }
+.fg-ai-ai { align-self: flex-start; background: var(--fg-header-bg); border: 1px solid var(--fg-border); border-bottom-left-radius: 3px; }
+.fg-ai-error { align-self: flex-start; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
+.fg-ai-wait { color: var(--fg-muted); }
+.fg-ai-note { margin-top: 4px; font-size: .9em; color: var(--fg-muted); }
+.fg-ai-undo { margin-top: 6px; height: 24px; padding: 0 10px; }
+.fg-ai-form { display: flex; gap: 6px; align-items: flex-end; }
+.fg-ai-input { flex: 1; resize: vertical; min-height: 40px; max-height: 140px; padding: 6px 8px; font: inherit; }
+.fg-ai-tips { display: flex; flex-wrap: wrap; gap: 6px; }
+.fg-ai-tip { border: 1px solid var(--fg-border); border-radius: 999px; background: none; color: inherit; font: inherit; font-size: .92em; padding: 3px 10px; cursor: pointer; }
+.fg-ai-tip:hover { background: var(--fg-row-hover); }