@evotecit/canopyx 0.3.11 → 0.3.15

package/CanopyX.Html/Assets/canopyx-filter-editor.css

@@ -1,19 +1,19 @@
-.cx-pop-h{display:flex;align-items:center;justify-content:space-between;padding:var(--cx-size-10px) var(--cx-size-12px);border-bottom:var(--cx-size-1px) solid var(--cx-line);font-weight:700;}
-.cx-pop-h span{color:var(--cx-muted);font-weight:400;}
+.cx-pop-h{display:flex;align-items:center;justify-content:space-between;padding:var(--cx-size-10px) var(--cx-size-12px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));font-weight:700;}
+.cx-pop-h span{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-weight:400;}
 .cx-pop-b{padding:var(--cx-size-10px) var(--cx-size-12px);display:grid;gap:var(--cx-size-8px);}
-.cx-pop-f{display:flex;justify-content:space-between;align-items:center;padding:var(--cx-size-8px) var(--cx-size-12px);border-top:var(--cx-size-1px) solid var(--cx-line);}
-.cx-mi{display:flex;align-items:center;gap:var(--cx-size-10px);height:var(--cx-size-32px);padding:0 var(--cx-size-10px);border-radius:var(--cx-radius-sm);color:var(--cx-text);cursor:pointer;}
-.cx-mi:hover{background:var(--cx-hover);}
-.cx-mi .ico{width:var(--cx-size-16px);color:var(--cx-muted);display:inline-grid;place-items:center;}
-.cx-mi.on .ico{color:var(--cx-accent-text);}
-.cx-input{height:var(--cx-control-h);width:100%;border:var(--cx-size-1px) solid var(--cx-control-border);border-radius:var(--cx-radius);padding:0 var(--cx-size-10px);background:var(--cx-surface);color:var(--cx-text);font:var(--cx-size-14px) var(--cx-font);display:flex;align-items:center;gap:var(--cx-size-8px);}
-.cx-input.sel::after{content:"";margin-left:auto;width:var(--cx-size-7px);height:var(--cx-size-7px);border-right:var(--cx-size-1d5px) solid var(--cx-muted);border-bottom:var(--cx-size-1d5px) solid var(--cx-muted);transform:rotate(45deg) translateY(var(--cx-size-neg-2px));}
-.cx-input .ph{color:var(--cx-muted);}
-.cx-seg{display:inline-flex;border:var(--cx-size-1px) solid var(--cx-line-strong);border-radius:var(--cx-radius);overflow:hidden;}
-.cx-grid-overlay.cx-phone{border-radius:var(--cx-radius) var(--cx-radius) 0 0;max-width:100%;}
+.cx-pop-f{display:flex;justify-content:space-between;align-items:center;padding:var(--cx-size-8px) var(--cx-size-12px);border-top:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-mi{display:flex;align-items:center;gap:var(--cx-size-10px);height:var(--hfx-menu-item-height,calc(32px - var(--cx-compact,0) * 4px));padding:0 var(--cx-size-10px);border-radius:var(--hfx-radius-sm,4px);color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));cursor:pointer;}
+.cx-mi:hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
+.cx-mi .ico{width:var(--cx-size-16px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));display:inline-grid;place-items:center;}
+.cx-mi.on .ico{color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));}
+.cx-input{height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));width:100%;border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));padding:0 var(--cx-size-10px);background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font:var(--hfx-control-font-size,calc(var(--hfx-type-body-size,0.875rem) - var(--cx-compact,0) * .0625rem)) var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);display:flex;align-items:center;gap:var(--cx-size-8px);}
+.cx-input.sel::after{content:"";margin-left:auto;width:var(--cx-size-7px);height:var(--cx-size-7px);border-right:var(--cx-size-1d5px) solid var(--hfx-color-text-muted,light-dark(#626770,#8f949d));border-bottom:var(--cx-size-1d5px) solid var(--hfx-color-text-muted,light-dark(#626770,#8f949d));transform:rotate(45deg) translateY(var(--cx-size-neg-2px));}
+.cx-input .ph{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-seg{display:inline-flex;border:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));overflow:hidden;}
+.cx-grid-overlay.cx-phone{border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px)) var(--hfx-radius-control,var(--hfx-radius-md,6px)) 0 0;max-width:100%;}
 .cx-grid-overlay.cx-phone .cx-mi,.cx-grid-overlay.cx-phone .cx-val,.cx-grid-overlay.cx-phone .cx-input{min-height:var(--cx-size-44px);}
 .cx-grid-overlay.cx-phone .cx-button{min-height:var(--cx-size-44px);min-width:var(--cx-size-44px);}
-.cx-grid-overlay.cx-phone.cx-pop::before{content:"";display:block;width:var(--cx-size-32px);height:var(--cx-size-4px);border-radius:var(--cx-radius);background:var(--cx-muted);margin:var(--cx-size-8px) auto;}
+.cx-grid-overlay.cx-phone.cx-pop::before{content:"";display:block;width:var(--cx-size-32px);height:var(--cx-size-4px);border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));margin:var(--cx-size-8px) auto;}
 .cx-data-grid.cx-phone .cx-cond,.cx-data-grid.cx-phone .cx-grid-filter-group .cx-cond{grid-template-columns:1fr 1fr var(--cx-size-32px)!important;}
 .cx-data-grid.cx-phone .cx-cond .w{grid-column:1/-1;text-align:left;}
 .cx-data-grid.cx-phone .cx-grid-filter > button.icon{grid-column:3;grid-row:2;min-height:var(--cx-size-44px);}
@@ -22,54 +22,54 @@
 .cx-fb{width:100%;max-width:var(--cx-size-640px);}
 .cx-fb .cx-pop-b{gap:var(--cx-size-10px);}
 .cx-cond{display:grid;grid-template-columns:var(--cx-size-56px) 1.2fr 1fr 1.2fr var(--cx-size-32px);gap:var(--cx-size-8px);align-items:start;}
-.cx-cond .w{font-size:var(--cx-size-13px);line-height:var(--cx-control-h);color:var(--cx-muted);text-align:right;}
-.cx-grid-filter-group{border-left:var(--cx-size-2px) solid var(--cx-line-strong);padding:var(--cx-size-8px) 0 var(--cx-size-8px) var(--cx-size-12px);margin-left:var(--cx-size-20px);display:grid;gap:var(--cx-size-8px);}
-.cx-group-h{display:flex;align-items:center;gap:var(--cx-size-8px);font-size:var(--cx-size-13px);color:var(--cx-muted);}
+.cx-cond .w{font-size:var(--cx-size-13px);line-height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));text-align:right;}
+.cx-grid-filter-group{border-left:var(--cx-size-2px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));padding:var(--cx-size-8px) 0 var(--cx-size-8px) var(--cx-size-12px);margin-left:var(--cx-size-20px);display:grid;gap:var(--cx-size-8px);}
+.cx-group-h{display:flex;align-items:center;gap:var(--cx-size-8px);font-size:var(--cx-size-13px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
 .cx-adds{display:flex;gap:var(--cx-size-14px);padding-left:var(--cx-size-64px);}
-.cx-grid-overlay.cx-pop{position:fixed;z-index:1000;margin:0;min-height:0;height:auto;padding:0;overflow:auto;display:block;border:var(--cx-size-1px) solid var(--cx-line);border-radius:var(--cx-radius);box-shadow:var(--cx-panel-shadow);background:var(--cx-surface);}
+.cx-grid-overlay.cx-pop{position:fixed;z-index:var(--hfx-z-popover,1000);margin:0;min-height:0;height:auto;padding:0;overflow:auto;display:block;border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-overlay,var(--hfx-radius-lg,10px));box-shadow:var(--hfx-elevation-2,0 1px 2px rgba(22,24,28,.05),0 6px 18px -10px rgba(22,24,28,.18));background:var(--hfx-color-surface-raised,light-dark(#ffffff,#1e2126));}
 .cx-grid-overlay.cx-column-menu{width:var(--cx-size-244px);padding:var(--cx-size-4px);}
 .cx-grid-overlay.cx-column-menu .cx-mi{width:100%;border:0;background:transparent;font:inherit;text-align:left;}
-.cx-column-menu .cx-mi:hover,.cx-column-menu .cx-mi:focus-visible{background:var(--cx-hover);}
-.cx-column-menu .cx-mi:disabled{color:var(--cx-muted);cursor:default;}
-.cx-menu-rule{border:0;height:var(--cx-size-1px);background:var(--cx-line);margin:var(--cx-size-4px) var(--cx-size-6px);}
+.cx-column-menu .cx-mi:hover,.cx-column-menu .cx-mi:focus-visible{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
+.cx-column-menu .cx-mi:disabled{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));cursor:default;}
+.cx-menu-rule{border:0;height:var(--cx-size-1px);background:var(--hfx-color-border,light-dark(#e2e4e7,#272a30));margin:var(--cx-size-4px) var(--cx-size-6px);}
 .cx-grid-overlay .cx-grid-field{display:flex;gap:var(--cx-size-9px);align-items:center;font:inherit;}
-.cx-grid-overlay input[type="checkbox"]{width:var(--cx-size-16px);height:var(--cx-size-16px);accent-color:var(--cx-accent);}
+.cx-grid-overlay input[type="checkbox"]{width:var(--cx-size-16px);height:var(--cx-size-16px);accent-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
 .cx-val-list{max-height:var(--cx-size-210px);overflow:auto;display:grid;gap:var(--cx-size-1px);margin-inline:var(--cx-size-neg-4px);}
-.cx-val,.cx-val-all{display:flex;align-items:center;gap:var(--cx-size-9px);min-height:var(--cx-size-30px);padding:0 var(--cx-size-4px);border-radius:var(--cx-radius-sm);}
-.cx-val:hover{background:var(--cx-hover);}
-.cx-val-all{border-bottom:var(--cx-size-1px) solid var(--cx-line);border-radius:0;margin:0 var(--cx-size-neg-4px) var(--cx-size-2px);}
-.cx-val-n{margin-left:auto;color:var(--cx-muted);font-size:var(--cx-size-12d5px);font-variant-numeric:tabular-nums;}
+.cx-val,.cx-val-all{display:flex;align-items:center;gap:var(--cx-size-9px);min-height:var(--cx-size-30px);padding:0 var(--cx-size-4px);border-radius:var(--hfx-radius-sm,4px);}
+.cx-val:hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
+.cx-val-all{border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:0;margin:0 var(--cx-size-neg-4px) var(--cx-size-2px);}
+.cx-val-n{margin-left:auto;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-12d5px);font-variant-numeric:tabular-nums;}
 .cx-facet-value{min-width:0;overflow:hidden;text-overflow:ellipsis;}
 .cx-column-condition{display:flex;gap:var(--cx-size-8px);align-items:center;}
 .cx-column-condition > *{min-width:0;}
 .cx-column-condition select{flex:1;}
 .cx-column-condition input{flex:1.2;}
 .cx-column-conditions{display:grid;gap:var(--cx-size-8px);}
-.cx-grid-overlay .cx-pop-f .cx-button{border:0;background:transparent;color:var(--cx-accent);font:inherit;}
-.cx-grid-overlay .cx-pop-f .cx-button:last-child{color:var(--cx-on-accent);background:var(--cx-accent);border-radius:var(--cx-radius);}
+.cx-grid-overlay .cx-pop-f .cx-button{border:0;background:transparent;color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));font:inherit;}
+.cx-grid-overlay .cx-pop-f .cx-button:last-child{color:var(--hfx-color-accent-contrast,light-dark(#ffffff,#0c0d10));background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));}
 .cx-data-grid .cx-grid-filters .cx-fb{width:var(--cx-size-640px);max-width:calc(var(--cx-size-100vw) - var(--cx-size-32px));}
 .cx-fb .cx-grid-filter{margin:0;padding:0;border:0;min-width:0;}
 .cx-fb .cx-grid-filter.cx-cond{display:grid;grid-template-columns:var(--cx-size-56px) 1.2fr 1fr 1.2fr var(--cx-size-32px);gap:var(--cx-size-8px);}
 .cx-fb .cx-grid-filter > .cx-grid-field{display:block;min-width:0;padding:0;font-size:0;}
-.cx-fb .cx-grid-filter > .cx-grid-field > :is(input,select){width:100%;min-width:0;height:var(--cx-control-h);padding:0 var(--cx-size-10px);font:var(--cx-size-14px) var(--cx-font);border:var(--cx-size-1px) solid var(--cx-control-border);border-radius:var(--cx-radius);background:var(--cx-surface);color:var(--cx-text);}
+.cx-fb .cx-grid-filter > .cx-grid-field > :is(input,select){width:100%;min-width:0;height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));padding:0 var(--cx-size-10px);font:var(--cx-size-14px) var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));}
 .cx-fb .cx-condition-rows,.cx-fb .cx-grid-filter-group-children{display:grid;gap:var(--cx-size-8px);}
-.cx-fb .cx-seg button{padding:var(--cx-size-3px) var(--cx-size-10px);font-size:var(--cx-size-12d5px);font-weight:700;color:var(--cx-text-2);border:0;background:transparent;text-transform:lowercase;}
-.cx-fb .cx-seg button.on{background:var(--cx-accent-soft);color:var(--cx-accent-text);}
+.cx-fb .cx-seg button{padding:var(--cx-size-3px) var(--cx-size-10px);font-size:var(--cx-size-12d5px);font-weight:700;color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));border:0;background:transparent;text-transform:lowercase;}
+.cx-fb .cx-seg button.on{background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));}
 .cx-column-menu .cx-mi{justify-content:flex-start;gap:var(--cx-size-10px);}
-.cx-fb .cx-seg button + button{border-left:var(--cx-size-1px) solid var(--cx-line-strong);}
+.cx-fb .cx-seg button + button{border-left:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));}
 .cx-fb .cx-group-h .icon{margin-left:auto;}
 .cx-fb .cx-grid-filter > button.icon{grid-column:5;grid-row:1;padding:0;}
 .cx-ms{font-size:var(--cx-size-14px);}
 .cx-ms > summary{list-style:none;cursor:pointer;}
 .cx-ms > summary::-webkit-details-marker{display:none;}
 .cx-ms > summary > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
-.cx-ms-list{margin-top:var(--cx-size-4px);padding:var(--cx-size-6px);display:grid;gap:var(--cx-size-6px);border:var(--cx-size-1px) solid var(--cx-line);border-radius:var(--cx-radius);}
-.cx-ms-list > .cx-input{width:100%;height:var(--cx-control-h);}
-.cx-fb .cx-filter-text{width:100%;min-height:var(--cx-size-160px);font:var(--cx-size-12d5px) var(--cx-font-mono);color:var(--cx-text);background:var(--cx-surface);border:var(--cx-size-1px) solid var(--cx-control-border);}
+.cx-ms-list{margin-top:var(--cx-size-4px);padding:var(--cx-size-6px);display:grid;gap:var(--cx-size-6px);border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));}
+.cx-ms-list > .cx-input{width:100%;height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));}
+.cx-fb .cx-filter-text{width:100%;min-height:var(--cx-size-160px);font:var(--cx-size-12d5px) var(--hfx-font-mono,"Cascadia Mono","Cascadia Code",Consolas,"SFMono-Regular",Menlo,monospace);color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));}
 .cx-grid-overlay.cx-column-filter{width:var(--cx-size-280px);}
 .cx-grid-overlay .cx-grid-control-error:empty{display:none;}
-.cx-grid-overlay .cx-button{min-height:var(--cx-control-h);padding:0 var(--cx-size-10px);border:var(--cx-size-1px) solid var(--cx-line-strong);border-radius:var(--cx-radius);font:inherit;color:var(--cx-text);background:var(--cx-surface);cursor:pointer;}
-.cx-grid-overlay .cx-button.icon{width:var(--cx-control-h);padding:0;}
+.cx-grid-overlay .cx-button{min-height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));padding:0 var(--cx-size-10px);border:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));font:inherit;color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));cursor:pointer;}
+.cx-grid-overlay .cx-button.icon{width:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));padding:0;}
 .cx-data-grid .cx-grid-filters > .cx-fb{position:fixed;display:flex;flex-flow:column nowrap;gap:0;padding:0;overflow:hidden;}
 .cx-data-grid.cx-phone .cx-grid-filters > .cx-fb{inset:0!important;max-height:none!important;border-radius:0;}
 .cx-data-grid.cx-phone .cx-grid-filters > .cx-fb::before{display:none;}
@@ -86,34 +86,34 @@
 .cx-data-grid.cx-phone .cx-fb .cx-cond .cx-condition-operator{grid-column:2;grid-row:2;}
 .cx-data-grid.cx-phone .cx-fb .cx-cond .cx-condition-value{grid-column:1/3;grid-row:3;}
 .cx-data-grid.cx-phone .cx-fb .cx-cond .cx-condition-type{grid-column:1;grid-row:4;}
-.cx-data-grid .cx-fb .cx-pop-f > .cx-button{border:0;background:transparent;color:var(--cx-accent);}
-.cx-data-grid .cx-fb .cx-pop-f > .cx-button:last-child{background:var(--cx-accent);color:var(--cx-on-accent);}
-.cx-text-dialog{width:calc(100% - var(--cx-size-32px));max-width:var(--cx-size-640px);max-height:var(--cx-size-80vh);padding:0;border:var(--cx-size-1px) solid var(--cx-line);border-radius:var(--cx-radius);background:var(--cx-surface);box-shadow:var(--cx-panel-shadow);}
-.cx-text-dialog .cx-drawer-h{display:flex;align-items:center;gap:var(--cx-size-12px);padding:var(--cx-size-14px) var(--cx-size-16px);border-bottom:var(--cx-size-1px) solid var(--cx-line);}
+.cx-data-grid .cx-fb .cx-pop-f > .cx-button{border:0;background:transparent;color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
+.cx-data-grid .cx-fb .cx-pop-f > .cx-button:last-child{background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));color:var(--hfx-color-accent-contrast,light-dark(#ffffff,#0c0d10));}
+.cx-text-dialog{width:calc(100% - var(--cx-size-32px));max-width:var(--cx-size-640px);max-height:var(--cx-size-80vh);padding:0;border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-overlay,var(--hfx-radius-lg,10px));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));box-shadow:var(--hfx-elevation-2,0 1px 2px rgba(22,24,28,.05),0 6px 18px -10px rgba(22,24,28,.18));}
+.cx-text-dialog .cx-drawer-h{display:flex;align-items:center;gap:var(--cx-size-12px);padding:var(--cx-size-14px) var(--cx-size-16px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
 .cx-text-dialog h4{margin:0;font-size:var(--cx-size-17px);flex:1;}
 .cx-text-dialog pre{padding:var(--cx-size-16px);margin:0;max-height:var(--cx-size-60vh);overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;}
-.cx-text-dialog pre.p-mono{font-family:var(--cx-font-mono);}
-.cx-text-dialog::backdrop{background:color-mix(in srgb,var(--cx-shadow-ink) 35%,transparent);}
+.cx-text-dialog pre.p-mono{font-family:var(--hfx-font-mono,"Cascadia Mono","Cascadia Code",Consolas,"SFMono-Regular",Menlo,monospace);}
+.cx-text-dialog::backdrop{background:var(--hfx-color-overlay,light-dark(rgba(22,24,28,0.42),rgba(0,0,0,0.66)));}
 .cx-data-grid .cx-grid-filter-form,.cx-data-grid .cx-grid-filter-form > div,.cx-data-grid .cx-grid-filter{display:flex;flex-direction:column;gap:var(--cx-size-8px);width:100%;min-width:0;}
-.cx-data-grid .cx-grid-filter{border:var(--cx-size-1px) solid var(--cx-line);padding:var(--cx-size-8px);}
-.cx-grid-column-choice{display:flex;align-items:center;border-radius:var(--cx-radius-sm);}
+.cx-data-grid .cx-grid-filter{border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));padding:var(--cx-size-8px);}
+.cx-grid-column-choice{display:flex;align-items:center;border-radius:var(--hfx-radius-sm,4px);}
 .cx-grid-column-choice label{flex:1;min-width:0;white-space:nowrap;}
 .cx-grid-column-name{flex:1;overflow:hidden;text-overflow:ellipsis;}
-:is(.cx-grid-column-note,.cx-grid-column-handle){flex:none;padding:0 var(--cx-size-6px);color:var(--cx-muted);font-size:var(--cx-size-12px);white-space:nowrap;}
+:is(.cx-grid-column-note,.cx-grid-column-handle){flex:none;padding:0 var(--cx-size-6px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-12px);white-space:nowrap;}
 .cx-grid-column-handle{height:var(--cx-size-28px);border:0;background:none;cursor:grab;touch-action:none;}
-.cx-grid-column-choice.cx-drop-before{box-shadow:inset 0 var(--cx-size-2px) var(--cx-accent);}
-.cx-grid-column-choice.cx-drop-after{box-shadow:inset 0 var(--cx-size-neg-2px) var(--cx-accent);}
-.cx-grid-column-actions{display:flex;justify-content:space-between;margin-top:var(--cx-size-4px);padding-top:var(--cx-size-4px);border-top:var(--cx-size-1px) solid var(--cx-line);}
-.cx-grid-column-actions .cx-button{border:0;color:var(--cx-accent-text);background:none;}
-.cx-drawer{width:100%;max-width:var(--cx-size-440px);background:var(--cx-surface);border:var(--cx-size-1px) solid var(--cx-line);border-radius:var(--cx-radius);box-shadow:var(--cx-panel-shadow);font:var(--cx-size-14px)/1.45 var(--cx-font);color:var(--cx-text);overflow:hidden;}
-.cx-drawer-h{display:flex;align-items:flex-start;gap:var(--cx-size-12px);padding:var(--cx-size-14px) var(--cx-size-16px);border-bottom:var(--cx-size-1px) solid var(--cx-line);}
+.cx-grid-column-choice.cx-drop-before{box-shadow:inset 0 var(--cx-size-2px) var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
+.cx-grid-column-choice.cx-drop-after{box-shadow:inset 0 var(--cx-size-neg-2px) var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
+.cx-grid-column-actions{display:flex;justify-content:space-between;margin-top:var(--cx-size-4px);padding-top:var(--cx-size-4px);border-top:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-grid-column-actions .cx-button{border:0;color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));background:none;}
+.cx-drawer{width:100%;max-width:var(--cx-size-440px);background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-overlay,var(--hfx-radius-lg,10px));box-shadow:var(--hfx-elevation-2,0 1px 2px rgba(22,24,28,.05),0 6px 18px -10px rgba(22,24,28,.18));font:var(--cx-size-14px)/1.45 var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));overflow:hidden;}
+.cx-drawer-h{display:flex;align-items:flex-start;gap:var(--cx-size-12px);padding:var(--cx-size-14px) var(--cx-size-16px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
 .cx-drawer-h h4{margin:0;font-size:var(--cx-size-17px);width:fit-content;}
-.cx-drawer-h p{color:var(--cx-muted);font-size:var(--cx-size-13px);}
+.cx-drawer-h p{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-13px);}
 .cx-drawer-h .cx-btn{margin-left:auto;}
 .cx-dl{display:grid;grid-template-columns:var(--cx-size-140px) 1fr;gap:var(--cx-size-8px) var(--cx-size-16px);padding:var(--cx-size-14px) var(--cx-size-16px);margin:0;}
-.cx-dl dt{color:var(--cx-muted);font-size:var(--cx-size-13px);padding-top:var(--cx-size-1px);}
+.cx-dl dt{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-13px);padding-top:var(--cx-size-1px);}
 .cx-dl dd{margin:0;}
-.cx-drawer-s{padding:var(--cx-size-4px) var(--cx-size-16px) 0;font-size:var(--cx-size-11d5px);letter-spacing:var(--cx-size-d06em);text-transform:uppercase;color:var(--cx-muted);font-weight:700;}
+.cx-drawer-s{padding:var(--cx-size-4px) var(--cx-size-16px) 0;font-size:var(--cx-size-11d5px);letter-spacing:var(--cx-size-d06em);text-transform:uppercase;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-weight:700;}
 body .cx-host.cx-drawer{position:fixed;left:auto;right:var(--cx-size-12px);top:var(--cx-size-12px);bottom:var(--cx-size-12px);margin:0;width:calc(100% - var(--cx-size-24px));max-width:var(--cx-size-440px);height:calc(100% - var(--cx-size-24px));padding:0;display:flex;flex-direction:column;z-index:1000;}
 .cx-drawer-body{overflow:auto;flex:1;}
 .cx-drawer .cx-drawer-h > div{flex:1;min-width:0;}
@@ -122,11 +122,11 @@ body .cx-host.cx-drawer{position:fixed;left:auto;right:var(--cx-size-12px);top:v
 .cx-drawer dd{overflow-wrap:anywhere;min-width:0;}
 .cx-drawer .cx-button{flex:none;}
 .cx-drawer :is(.p-strip,.p-spark,.p-line){max-width:100%;}
-body .cx-host.cx-drawer.cx-phone{inset:0;width:100%;max-width:none;height:100%;max-height:none;border-radius:0;}
+body .cx-host.cx-drawer.cx-phone{inset:0;width:100%;max-width:none;height:100%;max-height:none;border-radius:var(--hfx-radius-none,0);}
 .cx-drawer.cx-phone .cx-dl{grid-template-columns:1fr;gap:var(--cx-size-2px) 0;}
 .cx-drawer.cx-phone dd{margin-bottom:var(--cx-size-8px);}
 .cx-drawer.cx-phone .cx-button{min-height:var(--cx-size-44px);min-width:var(--cx-size-44px);}
-.cx-drawer::backdrop{background:color-mix(in srgb,var(--cx-shadow-ink) 35%,transparent);}
-.cx-grid-overlay{color:var(--cx-text);font:var(--cx-font-size)/1.45 var(--cx-font);}
+.cx-drawer::backdrop{background:var(--hfx-color-overlay,light-dark(rgba(22,24,28,0.42),rgba(0,0,0,0.66)));}
+.cx-grid-overlay{color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font:var(--hfx-control-font-size,calc(var(--hfx-type-body-size,0.875rem) - var(--cx-compact,0) * .0625rem))/1.45 var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);}
 body .cx-host.cx-grid-overlay{height:auto;min-height:0;padding:0;}
 .cx-grid-overlay [hidden]{display:none!important;}

package/CanopyX.Html/Assets/canopyx-filter-editor.js

@@ -1,5 +1,5 @@
-(function(global){"use strict";const installed=new WeakSet();const part={version:"20fda9e421ce521f",install(context){if(installed.has(context.DataGrid.prototype))return;const{DataGrid,h,setText,gridButton,gridInputLabel,gridOption,gridScalar,gridDateInputMoment,gridQuery,gridQueryStart,GRID_FILTER_LABELS,gridResultShape,gridQueryRows,gridOrder,gridColumnProjection,gridCellRenderer,cellValue,cellText,foldText,reachable,gridMatchesGroup,gridDecorateButton,gridIcon,numberFormat,numberText,fill,announceMenu,reportingRangeRows,applyTone,toneOf,badgeElement,isCellObject,RECORD_IMPL}=context;const buildFilters=DataGrid.prototype.buildGridFilters;function gridOverlayTheme(grid,element){for(const name of(grid.opts.overlayClass||"").split(/\s+/).filter(Boolean)) element.classList.add(name);
-element.setAttribute("data-cx-theme",grid.host.getAttribute("data-cx-theme"));const theme=getComputedStyle(grid.host);element.style.colorScheme=theme.colorScheme;for(const name of theme)if(name.startsWith("--cx-"))element.style.setProperty(name,theme.getPropertyValue(name))}
+(function(global){"use strict";const installed=new WeakSet();const part={version:"e0db9c3f94866fa2",requires:["presenters"],install(context){if(installed.has(context.DataGrid.prototype))return;const{DataGrid,h,setText,gridButton,gridInputLabel,gridOption,gridScalar,gridDateInputMoment,gridQuery,gridQueryStart,GRID_FILTER_LABELS,gridResultShape,gridQueryRows,gridOrder,gridKeyCompare,gridFacetKey,columnNumericTone,columnValueTone,gridColumnProjection,gridCellRenderer,cellValue,cellText,foldText,reachable,gridMatchesGroup,gridDecorateButton,gridIcon,numberFormat,numberText,fill,announceMenu,reportingRangeRows,applyTone,toneOf,badgeElement,isCellObject,RECORD_IMPL,overlayTheme}=context;const buildFilters=DataGrid.prototype.buildGridFilters;function gridOverlayTheme(grid,element){for(const name of(grid.opts.overlayClass||"").split(/\s+/).filter(Boolean)) element.classList.add(name);
+overlayTheme(grid.host,element)}
 function gridRestoreFocus(grid,returnFocus,rowId,column){if(grid.destroyed)return;if(returnFocus?.isConnected&&reachable(returnFocus)){returnFocus.focus({preventScroll:true});return}
 const row=[...grid.rowCache.values()].find(item=>!item.status&&item.key===rowId);const index=grid.visibleColumns().findIndex(item=>item.id===column?.id);if(row&&index>=0)grid.focusCell(row,index,0);else if(row)grid.setFocus(row,true);else grid.grid.focus({preventScroll:true})}
 const COLUMNS_MENU={moveColumnChoice(column,target,after){column.pin=target.pin;const ids=this.columns.map(item=>item.id).filter(id=>id!==column.id);ids.splice(ids.indexOf(target.id)+ after,0,column.id);this.setColumnOrder(ids)},renderGridColumns(panel){if(!this.columnList){const find=this.columnFind=h("input","cx-grid-column-find"),actions=h("div","cx-grid-column-actions");find.type="search";find.placeholder=this.labels.gridFindColumn;find.setAttribute("aria-label",find.placeholder);find.hidden=this.columns.length<9;find.oninput=()=>this.syncColumnControls();actions.append(gridButton(this.labels.gridShowAllColumns,()=>this.showAllColumns()),gridButton(this.labels.gridResetColumns,()=>this.resetColumns()));panel.replaceChildren(find,this.columnList=h("div"),actions)}
@@ -12,13 +12,14 @@ const moment=gridDateInputMoment(raw,grid.local);if(!moment)throw new Error(grid
 gridScalar(text,column);return text}
 if(type==="boolean"){if(!["true","false"].includes(raw))throw new Error(grid.labels.gridInvalidFilter);return raw==="true"}
 if(type==="mixed")throw new Error(grid.labels.gridInvalidFilter);return raw}
-function gridMultiSelect(grid,columnOf,typeOf){const box=h("details","cx-ms"),summary=h("summary","cx-input sel"),text=h("span"),list=h("div","cx-ms-list"),search=h("input","cx-input"),values=h("div","cx-val-list"),selected=new Map(),facets=new Map(),key=value=>typeof value+":"+foldText(value),name=value=>cellText(value,columnOf(),grid.fmt);let loaded;search.type="search";search.placeholder=grid.labels.gridFacetSearch;search.setAttribute("aria-label",search.placeholder);summary.appendChild(text);list.append(search,values);box.append(summary,list);const sync=()=>{setText(text,[...selected.values()].map(name).join(", ")||grid.labels.gridFacetChoose);text.classList.toggle("ph",!selected.size)};const render=()=>{const all=new Map(facets);values.replaceChildren();for(const[id,value]of selected)if(!all.has(id))all.set(id,{value});for(const[id,item]of all){const label=h("label","cx-val"),check=h("input"),count=h("span","cx-val-n"),title=name(item.value);check.type="checkbox";check.checked=selected.has(id);if(item.count)setText(count,numberFormat(grid.lang).format(item.count));label.append(check,title,count);label.hidden=!foldText(title).includes(foldText(search.value));values.appendChild(label);check.addEventListener("change",()=>{if(check.checked)selected.set(id,item.value);else selected.delete(id);sync()})}};box.addEventListener("toggle",async()=>{if(box.open&&!loaded){const column=columnOf();loaded=true;try{for(const item of(await grid.columnFacetItems(column,"")).items)if(item.value!=null&&column===columnOf())facets.set(key(item.value),item)}catch(_){}}
+function gridMultiSelect(grid,columnOf,typeOf){const box=h("details","cx-ms"),summary=h("summary","cx-input sel"),text=h("span"),list=h("div","cx-ms-list"),search=h("input","cx-input"),values=h("div","cx-val-list"),selected=new Map(),facets=new Map(),key=value=>gridFacetKey(value,columnOf()),name=value=>cellText(value,columnOf(),grid.fmt);let loaded;search.type="search";search.placeholder=grid.labels.gridFacetSearch;search.setAttribute("aria-label",search.placeholder);summary.appendChild(text);list.append(search,values);box.append(summary,list);const sync=()=>{setText(text,[...selected.values()].map(name).join(", ")||grid.labels.gridFacetChoose);text.classList.toggle("ph",!selected.size)};const render=()=>{const all=new Map(facets);values.replaceChildren();for(const[id,value]of selected)if(!all.has(id))all.set(id,{value});for(const[id,item]of all){const label=h("label","cx-val"),check=h("input"),count=h("span","cx-val-n"),title=name(item.value);check.type="checkbox";check.checked=selected.has(id);if(item.count)setText(count,numberFormat(grid.lang).format(item.count));label.append(check,title,count);label.hidden=!foldText(title).includes(foldText(search.value));values.appendChild(label);check.addEventListener("change",()=>{if(check.checked)selected.set(id,item.value);else selected.delete(id);sync()})}};box.addEventListener("toggle",async()=>{if(box.open&&!loaded){const column=columnOf();loaded=true;try{for(const item of(await grid.columnFacetItems(column,"")).items)if(item.value!=null&&column===columnOf())facets.set(key(item.value),item)}catch(_){}}
 render();if(box.open)list.scrollIntoView({block:"nearest"})});search.addEventListener("input",render);search.addEventListener("keydown",event=>{if(event.key!=="Enter")return;event.preventDefault();try{box._add(gridFilterValue(grid,columnOf(),typeOf(),search.value));search.value="";render();box.dispatchEvent(new Event("change",{bubbles:true}))}catch(_){}});return Object.assign(box,{_values:selected,_sync:sync,_add(value){selected.set(key(value),value);sync()},_reset(){selected.clear();facets.clear();loaded=box.open=false;sync()}})}
 Object.assign(DataGrid.prototype,{addGridFilter(parent,predicate){if(parent.children.length>=64)return;const row=h("fieldset","cx-grid-filter"),column=h("select"),operator=h("select"),type=h("select"),multiple=gridMultiSelect(this,()=>this.columns.find(item=>item.id===column.value),()=>type.value),multipleField=h("div","cx-grid-field cx-condition-value");multipleField.setAttribute("role","group");multipleField.setAttribute("aria-label",this.labels.gridConditionValue);let remove,input=h("input","cx-grid-filter-value"),current;const legend=h("legend","cx-sr-only");setText(legend,this.labels.gridFilters);row.appendChild(legend);for(const item of this.columns)if(item.filterable!==false)column.appendChild(gridOption(item.id,item.title));if(!column.options.length)return;if(predicate)column.value=predicate.column;for(const[value,name]of[["string","gridText"],["boolean","gridBoolean"]]){type.appendChild(gridOption(value,this.labels[name]))}
 if(predicate&&predicate.values.length&&predicate.values.some(value=>typeof value==="boolean")){if(predicate.values.every(value=>typeof value==="boolean"))type.value="boolean";else{type.appendChild(gridOption("mixed",this.labels.gridText+" / "+this.labels.gridBoolean));type.value="mixed"}}
 const columnField=gridInputLabel(this.labels.gridColumn,column),conditionField=gridInputLabel(this.labels.gridOperator,operator);const typeField=gridInputLabel(this.labels.gridValueType,type),valueField=gridInputLabel(this.labels.gridConditionValue,input);columnField.classList.add("cx-condition-column");conditionField.classList.add("cx-condition-operator");typeField.classList.add("cx-condition-type");valueField.classList.add("cx-condition-value");multipleField.appendChild(multiple);multipleField.hidden=true;row.append(columnField,conditionField,typeField,valueField,multipleField);const change=()=>{const definition=this.columns.find(item=>item.id===column.value),previous=operator.value;const declaredBoolean=definition.presenter?.kind==="boolean";if(declaredBoolean)type.value="boolean";if(current!==column.value){if(current!==undefined)multiple._reset();current=column.value}
 const operators=definition.kind==="text"?["eq","ne","contains","startsWith","in","isNull","isNotNull"]:
-["eq","ne","in","gt","ge","lt","le","isNull","isNotNull"];operator.textContent="";operators.forEach(name=>operator.appendChild(gridOption(name,this.labels[GRID_FILTER_LABELS[name]]||GRID_FILTER_LABELS[name])));if(definition.kind==="datetime")for(const[name,label]of GRID_DATE_PRESETS)operator.appendChild(gridOption(name,this.labels[label]));if([...operator.options].some(option=>option.value===previous))operator.value=previous;const raw=input.value,boolean=definition.kind==="text"&&type.value==="boolean",next=h(boolean?"select":"input","cx-grid-filter-value");if(boolean)next.append(gridOption("true",this.labels.gridTrue),gridOption("false",this.labels.gridFalse));else if(definition.kind!=="text"){next.type=definition.kind==="number"?"number":"datetime-local";next.step="any"}
+["eq","ne","in","gt","ge","lt","le","isNull","isNotNull"];const custom=[...this.plugins.flatMap(plugin=>Object.keys(plugin.filterOperators||{})),predicate?.column===column.value?predicate.operator:null,previous];for(const name of custom)if(name&&!operators.includes(name)&&/^[a-z][a-zA-Z\d]{0,31}$/.test(name)) operators.push(name);
+operator.textContent="";operators.forEach(name=>operator.appendChild(gridOption(name,this.labels[GRID_FILTER_LABELS[name]]||GRID_FILTER_LABELS[name]||name)));if(definition.kind==="datetime")for(const[name,label]of GRID_DATE_PRESETS)operator.appendChild(gridOption(name,this.labels[label]));if([...operator.options].some(option=>option.value===previous))operator.value=previous;const raw=input.value,boolean=definition.kind==="text"&&type.value==="boolean",next=h(boolean?"select":"input","cx-grid-filter-value");if(boolean)next.append(gridOption("true",this.labels.gridTrue),gridOption("false",this.labels.gridFalse));else if(definition.kind!=="text"){next.type=definition.kind==="number"?"number":"datetime-local";next.step="any"}
 next.value=boolean&&!['true','false'].includes(raw)?"true":raw;input.replaceWith(next);input=next;input.addEventListener("input",()=>{row._filter.edited=true});if(row._filter)row._filter.input=input;if(remove){if(remove.classList.contains("icon"))remove.setAttribute("aria-label",this.labels.gridDeleteCondition);else setText(remove,fill(this.labels.gridRemoveFilter,{column:definition.title}))}
 typeField.hidden=definition.kind!=="text"||declaredBoolean||row._design&&type.value==="string";multiple._sync();update()};const update=()=>{const none=["isNull","isNotNull"].includes(operator.value)||GRID_DATE_PRESETS.some(item=>item[0]===operator.value),many=operator.value==="in";valueField.hidden=none||many;multipleField.hidden=none||!many;input.disabled=none||many;type.disabled=none||typeField.hidden};column.addEventListener("change",change);type.addEventListener("change",change);operator.addEventListener("change",update);change();if(predicate){operator.value=predicate.operator;if(operator.value==="in")predicate.values.forEach(multiple._add);else input.value=input.type==="datetime-local"&&predicate.values.length?gridDateInput(predicate.values[0],this.local):predicate.values.join("\n");update()}
 remove=gridButton(fill(this.labels.gridRemoveFilter,{column:this.columns.find(item=>item.id===column.value).title}),()=>row.remove());row.appendChild(remove);row._filter={column,operator,input,multiple,type,original:predicate&&{column:predicate.column,operator:predicate.operator,values:predicate.values.slice()},edited:false};for(const field of[column,operator,type,multiple]){field.addEventListener("change",()=>{row._filter.edited=true});field.addEventListener("input",()=>{row._filter.edited=true})}
@@ -31,16 +32,17 @@ return!filters.length&&!groups.length?operator==="and":!filters.length&&groups.l
 function gridColumnClauses(query,id){const clauses=[],has=group=>group.filters.some(item=>item.column===id)||group.groups.some(has),only=group=>group.filters.every(item=>item.column===id)&&group.groups.every(only);const remove=group=>{if(!group)return undefined;if(only(group)){clauses.push(group);return undefined}
 if(group.operator==="or"&&has(group))throw new Error("complex");const filters=group.filters.filter(item=>{if(item.column!==id)return true;clauses.push(item);return false}),groups=group.groups.map(remove).filter(Boolean);if(!filters.length&&!groups.length)return undefined;return gridColumnGroup(group.operator,[...filters,...groups])};const filters=(query.filters||[]).filter(item=>{if(item.column!==id)return true;clauses.push(item);return false}),filterGroup=remove(query.filterGroup);return{clauses,query:{...query,filters,filterGroup}}}
 function gridInstallColumnClause(query,id,clause){const base=gridColumnClauses(query,id).query;if(!clause)return gridQueryStart(base);if(!clause.groups)return gridQueryStart(base,{filters:[...base.filters,clause]});return gridQueryStart(base,{filterGroup:base.filterGroup?gridColumnGroup("and",[base.filterGroup,clause]):clause})}
-Object.assign(DataGrid.prototype,{columnFacetItems(column,search="",signal){if(!column||column.filterable===false)throw new Error("CanopyX: facets require a filterable column.");if(this.view.source.kind==="host")return this.getFacets(column.id,{search,includeCurrentFilter:false,limit:200,signal});const query=gridColumnProjection(this.queryForChange(false,true),column.id),columns=new Map(this.view.columns.map(item=>[item.id,item])),rows=gridQueryRows(this.view,query,columns,false),buckets=new Map();for(const row of rows){const value=cellValue(row.cells[column.id])??null,key=typeof value+":"+foldText(value),item=buckets.get(key);if(item)item.count++;else buckets.set(key,{value,count:1})}
-const items=[...buckets.values()].filter(item=>foldText(item.value).includes(foldText(search)));items.sort((a,b)=>a.value===null||b.value===null?(a.value===b.value?0:a.value===null?1:-1):
-gridOrder(typeof a.value,typeof b.value)||gridOrder(foldText(a.value),foldText(b.value)));return{items:items.slice(0,200),matched:rows.length,totalValues:items.length,truncated:items.length>200}},openColumnFilter(id,anchor){if(!this.acceptedQuery||this.pendingQuery)return;const column=this.columns.find(item=>item.id===id);if(!column||column.filterable===false)throw new Error("CanopyX: column filters require a filterable column.");const panel=this.openGridPopover(anchor,"cx-column-filter",column.title+": "+this.labels.gridFilterColumn,id);const head=h("div","cx-pop-h"),body=h("div","cx-pop-b"),footer=h("div","cx-pop-f"),error=h("p","cx-grid-control-error");setText(head,column.title);error.setAttribute("role","status");panel.append(head,body,error,footer);let timer,clauses,draft;const signal=this.gridPopover.controller.signal,filters=this.reportingFilters;const complex=()=>{setText(body,this.labels.gridComplexFilter);if(filters)body.appendChild(gridButton(this.labels.gridEditAsText,()=>{this.closeGridPopover(false);filters.details.open=true}))};try{({clauses}=gridColumnClauses(this.queryForChange(),id))}catch(_){complex();return}
-const flush=()=>{clearTimeout(timer);timer=null;if(signal.aborted||draft===undefined)return;try{const promise=this.setQuery(gridInstallColumnClause(this.queryForChange(true),id,draft));draft=undefined;this.reportingFilterSubmitEpoch=this.queryEpoch;promise.then(()=>setText(error,""),failure=>setText(error,failure.message))}catch(failure){setText(error,failure.message)}};const apply=clause=>{draft=clause??null;clearTimeout(timer);timer=setTimeout(flush,200)};apply.cancel=()=>{clearTimeout(timer);draft=undefined};signal.addEventListener("abort",()=>clearTimeout(timer),{once:true});footer.append(gridButton(this.labels.gridClearColumnFilter,()=>{clearTimeout(timer);this.setQuery(gridInstallColumnClause(this.queryForChange(true),id,null)).catch(failure=>this.emit("error",{error:failure}));this.closeGridPopover()}),gridButton(this.labels.gridDone,()=>{flush();this.closeGridPopover()}));const faceted=column.kind==="text"&&(this.view.source.kind==="inline"||this.view.reporting?.facetColumns?.includes(id)&&typeof this.source.facet==="function");if(!faceted&&clauses.some(item=>item.groups&&(item.groups.length||item.filters.length>2))||!faceted&&clauses.length>2)complex();else if(faceted)this.renderColumnValues(column,body,clauses,apply,error,signal);else this.renderColumnConditions(column,body,clauses,apply,error);this.gridPopover.position()},renderColumnValues(column,body,clauses,apply,error,signal){const search=h("input","cx-input"),all=h("input"),list=h("div","cx-val-list"),status=h("p","cx-muted");search.type="search";search.setAttribute("aria-label",this.labels.gridFilterValues);search.placeholder=this.labels.gridFilterValues;all.type="checkbox";all.checked=!clauses.length;const allLabel=h("label","cx-val-all"),allCount=h("span","cx-val-n");allCount.setAttribute("aria-hidden","true");allLabel.append(all,this.labels.gridSelectAllValues,allCount);body.append(search,allLabel,list,status);const criteria=()=>JSON.stringify([gridResultShape(gridColumnProjection(this.getQuery(),column.id)),this.snapshot.revision]),originalCriteria=criteria();this.host.addEventListener("canopyx:query",()=>{if(criteria()!==originalCriteria)this.closeGridPopover(false)},{signal});let baseline=gridColumnGroup("and",clauses),items=[],selected=new Map(),request=0,facetController;signal.addEventListener("abort",()=>facetController?.abort(),{once:true});const key=value=>typeof value+":"+foldText(value),columns=new Map([[column.id,column]]),matchesClause=(value,clause)=>typeof clause==="boolean"?clause:gridMatchesGroup({cells:{[column.id]:value}},clause,columns),predicate=(operator,values=[])=>({column:column.id,operator,values}),matches=value=>matchesClause(value,baseline),chosen=value=>selected.get(key(value))?.checked??matches(value);const syncAll=()=>{all.checked=items.length>0&&items.every(item=>chosen(item.value));all.indeterminate=!all.checked&&items.some(item=>chosen(item.value))};const commit=()=>{const withoutEdited=clause=>{if(clause.groups)return gridColumnGroup(clause.operator,[...clause.filters,...clause.groups].map(withoutEdited));if(clause.operator==="in"){const values=clause.values.filter(value=>!selected.has(key(value)));return values.length?{...clause,values}:false}
+Object.assign(DataGrid.prototype,{columnFacetItems(column,search="",signal){if(!column||column.filterable===false)throw new Error("CanopyX: facets require a filterable column.");if(this.view.source.kind==="host")return this.getFacets(column.id,{search,includeCurrentFilter:false,limit:200,signal});const query=gridColumnProjection(this.queryForChange(false,true),column.id),columns=new Map(this.view.columns.map(item=>[item.id,item])),rows=gridQueryRows(this.view,query,columns,false),buckets=new Map();for(const row of rows){const value=cellValue(row.cells[column.id])??null,key=gridFacetKey(value,column),item=buckets.get(key);if(item)item.count++;else buckets.set(key,{value,count:1})}
+const items=[...buckets.values()].filter(item=>foldText(cellText(item.value,column,this.fmt)).includes(foldText(search)));items.sort((a,b)=>a.value===null||b.value===null?(a.value===b.value?0:a.value===null?1:-1):
+column.valueOrder?.length?gridKeyCompare(a.value,b.value,column,"asc"):gridOrder(typeof a.value,typeof b.value)||gridOrder(foldText(a.value),foldText(b.value)));return{items:items.slice(0,200),matched:rows.length,totalValues:items.length,truncated:items.length>200}},openColumnFilter(id,anchor){if(!this.acceptedQuery||this.pendingQuery)return;const column=this.columns.find(item=>item.id===id);if(!column||column.filterable===false)throw new Error("CanopyX: column filters require a filterable column.");const panel=this.openGridPopover(anchor,"cx-column-filter",column.title+": "+this.labels.gridFilterColumn,id);const head=h("div","cx-pop-h"),body=h("div","cx-pop-b"),footer=h("div","cx-pop-f"),error=h("p","cx-grid-control-error");setText(head,column.title);error.setAttribute("role","status");panel.append(head,body,error,footer);let timer,clauses,draft;const signal=this.gridPopover.controller.signal,filters=this.reportingFilters;const complex=()=>{setText(body,this.labels.gridComplexFilter);if(filters)body.appendChild(gridButton(this.labels.gridEditAsText,()=>{this.closeGridPopover(false);filters.details.open=true}))};try{({clauses}=gridColumnClauses(this.queryForChange(),id))}catch(_){complex();return}
+const flush=()=>{clearTimeout(timer);timer=null;if(signal.aborted||draft===undefined)return;try{const promise=this.setQuery(gridInstallColumnClause(this.queryForChange(true),id,draft));draft=undefined;this.reportingFilterSubmitEpoch=this.queryEpoch;promise.then(()=>setText(error,""),failure=>setText(error,failure.message))}catch(failure){setText(error,failure.message)}};const apply=clause=>{draft=clause??null;clearTimeout(timer);timer=setTimeout(flush,200)};apply.cancel=()=>{clearTimeout(timer);draft=undefined};signal.addEventListener("abort",()=>clearTimeout(timer),{once:true});footer.append(gridButton(this.labels.gridClearColumnFilter,()=>{clearTimeout(timer);this.setQuery(gridInstallColumnClause(this.queryForChange(true),id,null)).catch(failure=>this.emit("error",{error:failure}));this.closeGridPopover()}),gridButton(this.labels.gridDone,()=>{flush();this.closeGridPopover()}));const custom=item=>item.groups?item.filters.some(custom)||item.groups.some(custom):!Object.hasOwn(GRID_FILTER_LABELS,item.operator);const faceted=!clauses.some(custom)&&column.kind==="text"&&(this.view.source.kind==="inline"||this.view.reporting?.facetColumns?.includes(id)&&typeof this.source.facet==="function");if(!faceted&&clauses.some(item=>item.groups&&(item.groups.length||item.filters.length>2))||!faceted&&clauses.length>2)complex();else if(faceted)this.renderColumnValues(column,body,clauses,apply,error,signal);else this.renderColumnConditions(column,body,clauses,apply,error);this.gridPopover.position()},renderColumnValues(column,body,clauses,apply,error,signal){const search=h("input","cx-input"),all=h("input"),list=h("div","cx-val-list"),status=h("p","cx-muted");search.type="search";search.setAttribute("aria-label",this.labels.gridFilterValues);search.placeholder=this.labels.gridFilterValues;all.type="checkbox";all.checked=!clauses.length;const allLabel=h("label","cx-val-all"),allCount=h("span","cx-val-n");allCount.setAttribute("aria-hidden","true");allLabel.append(all,this.labels.gridSelectAllValues,allCount);body.append(search,allLabel,list,status);const criteria=()=>JSON.stringify([gridResultShape(gridColumnProjection(this.getQuery(),column.id)),this.snapshot.revision]),originalCriteria=criteria();this.host.addEventListener("canopyx:query",()=>{if(criteria()!==originalCriteria)this.closeGridPopover(false)},{signal});let baseline=gridColumnGroup("and",clauses),items=[],selected=new Map(),request=0,facetController;signal.addEventListener("abort",()=>facetController?.abort(),{once:true});const key=value=>gridFacetKey(value,column),columns=new Map([[column.id,column]]),matchesClause=(value,clause)=>typeof clause==="boolean"?clause:gridMatchesGroup({cells:{[column.id]:value}},clause,columns),predicate=(operator,values=[])=>({column:column.id,operator,values}),matches=value=>matchesClause(value,baseline),chosen=value=>selected.get(key(value))?.checked??matches(value);const syncAll=()=>{all.checked=items.length>0&&items.every(item=>chosen(item.value));all.indeterminate=!all.checked&&items.some(item=>chosen(item.value))};const commit=()=>{const withoutEdited=clause=>{if(clause.groups)return gridColumnGroup(clause.operator,[...clause.filters,...clause.groups].map(withoutEdited));if(clause.operator==="in"){const values=clause.values.filter(value=>!selected.has(key(value)));return values.length?{...clause,values}:false}
 if(["eq","ne","isNull","isNotNull"].includes(clause.operator)&&selected.has(key(clause.values[0]??null)))return["ne","isNotNull"].includes(clause.operator);return clause};let clause=typeof baseline==="boolean"?baseline:withoutEdited(baseline);const included=[],excluded=[];for(const item of selected.values())if(item.checked!==matchesClause(item.value,clause))(item.checked?included:excluded).push(item.value);clause=gridColumnGroup("and",[clause,...excluded.map(value=>predicate(value==null?"isNotNull":"ne",value==null?[]:[value]))]);const additions=[],raw=included.filter(value=>value!=null);if(raw.length<included.length)additions.push(predicate("isNull"));if(raw.length)additions.push(predicate("in",raw));clause=gridColumnGroup("or",[clause,...additions]);apply(clause===true?undefined:clause===false?gridColumnGroup("and",[predicate("isNull"),predicate("isNotNull")]):clause)};const render=()=>{list.replaceChildren();for(const item of items){const label=h("label","cx-val"),check=h("input"),value=h("span","cx-facet-value"),count=h("span","cx-val-n");check.type="checkbox";check.checked=chosen(item.value);const options=column.presenter;if(options&&!['statusStrip','sparklineBars','sparklineLine','change','identifier','longText','list','tags'].includes(options.kind))gridCellRenderer(this,column,options)({id:"facet",cells:{[column.id]:item.value}},value);else setText(value,cellText(item.value,column,this.fmt)||"—");setText(count,numberFormat(this.lang).format(item.count));label.append(check,value,count);list.appendChild(label);check.addEventListener("change",()=>{if(check.checked===matches(item.value))selected.delete(key(item.value));else selected.set(key(item.value),{value:item.value,checked:check.checked});syncAll();commit()})}
 syncAll()};const load=async()=>{const generation=++request;facetController?.abort();facetController=new AbortController();setText(status,this.labels.loading);try{const page=await this.columnFacetItems(column,search.value,facetController.signal);if(signal.aborted||generation!==request)return;const previous=new Map(items.map(item=>[key(item.value),item]));for(const item of page.items)previous.set(key(item.value),item);items=[...previous.values()];render();for(const row of list.children)row.hidden=!foldText(row.querySelector('.cx-facet-value').textContent).includes(foldText(search.value));if(!search.value){search.hidden=page.totalValues<=12;setText(allCount,numberFormat(this.lang).format(page.totalValues))}
 setText(status,page.truncated?fill(this.labels.gridFacetCounts,{count:page.matched,shown:page.items.length,total:page.totalValues}):"");this.gridPopover?.position()}catch(failure){if(!signal.aborted&&generation===request&&failure.name!=="AbortError")setText(error,failure.message)}};all.addEventListener("change",()=>{baseline=all.checked;selected.clear();render();commit()});search.addEventListener("input",load);load()}});function gridDateInput(value,local){const date=new Date(value);return Number.isFinite(date.getTime())?new Date(date.getTime()-(local?date.getTimezoneOffset()*60000:0)).toISOString().slice(0,-1):""}
 const GRID_DATE_PRESETS=[["today","gridToday"],["yesterday","gridYesterday"],["last7","gridLastSevenDays"],["last30","gridLastThirtyDays"],["month","gridThisMonth"]];function gridDatePreset(local,preset){const start=new Date(),end=new Date(),zone=local?"":"UTC",get=(date,part)=>date["get"+zone+part](),set=(date,part,...values)=>date["set"+zone+part](...values),shift=(date,days)=>set(date,"Date",get(date,"Date")+days);set(start,"Hours",0,0,0,0);set(end,"Hours",0,0,0,0);shift(end,1);if(preset==="yesterday"){shift(start,-1);shift(end,-1)}else if(preset==="last7")shift(start,-6);else if(preset==="last30")shift(start,-29);else if(preset==="month"){set(start,"Date",1);end.setTime(start.getTime());set(end,"Month",get(end,"Month")+1,1)}
 return[start.toISOString(),end.toISOString()]}
-DataGrid.prototype.renderColumnConditions=function(column,body,clauses,apply,error){const rows=h("div","cx-column-conditions"),join=h("select","cx-input"),date=column.kind==="datetime",text=column.kind==="text";join.append(gridOption("and",this.labels.gridAnd),gridOption("or",this.labels.gridOr));join.setAttribute("aria-label",this.labels.gridFilterMatch||this.labels.gridOperator);join.hidden=true;const filters=clauses.flatMap(item=>item.groups?item.filters:item),original=clauses.find(item=>item.groups);if(original)join.value=original.operator;let preset;const read=()=>{const predicates=[...rows.children].map(row=>{const{operator,input,original}=row._condition;if(["isNull","isNotNull"].includes(operator.value))return{column:column.id,operator:operator.value,values:[]};if(original&&input.value===original.input&&operator.value===original.filter.operator)return original.filter;const moment=date?gridDateInputMoment(input.value,this.local):null;if(date&&!moment)throw new Error(this.labels.gridInvalidFilter);const value=column.kind==="number"?Number(input.value):date?moment.toISOString():input.value;if(column.kind==="number"&&!input.value.trim())throw new Error(this.labels.gridInvalidFilter);gridScalar(value,column);return{column:column.id,operator:operator.value,values:[value]}});return predicates.length===1?predicates[0]:{operator:join.value,filters:predicates,groups:[]}};const update=()=>{apply.cancel();try{apply(read());setText(error,"");if(preset)preset.value="range"}catch(failure){setText(error,this.labels.gridInvalidFilter)}};const add=filter=>{if(rows.children.length>=2)return;const row=h("div","cx-column-condition"),operator=h("select","cx-input"),input=h("input","cx-input");for(const value of text?["contains","eq","ne","startsWith","isNull","isNotNull"]:["eq","ne","gt","ge","lt","le","isNull","isNotNull"])operator.appendChild(gridOption(value,this.labels[GRID_FILTER_LABELS[value]]||GRID_FILTER_LABELS[value]));operator.setAttribute("aria-label",this.labels.gridOperator);input.setAttribute("aria-label",this.labels.gridConditionValue);input.type=date?"datetime-local":text?"text":"number";if(!text)input.step="any";if(filter){operator.value=filter.operator;input.value=date?gridDateInput(filter.values[0],this.local):String(filter.values[0]??"")}
+DataGrid.prototype.renderColumnConditions=function(column,body,clauses,apply,error){const rows=h("div","cx-column-conditions"),join=h("select","cx-input"),date=column.kind==="datetime",text=column.kind==="text";join.append(gridOption("and",this.labels.gridAnd),gridOption("or",this.labels.gridOr));join.setAttribute("aria-label",this.labels.gridFilterMatch||this.labels.gridOperator);join.hidden=true;const filters=clauses.flatMap(item=>item.groups?item.filters:item),original=clauses.find(item=>item.groups);if(original)join.value=original.operator;let preset;const read=()=>{const predicates=[...rows.children].map(row=>{const{operator,input,original}=row._condition;if(["isNull","isNotNull"].includes(operator.value))return{column:column.id,operator:operator.value,values:[]};if(original&&input.value===original.input&&operator.value===original.filter.operator)return original.filter;const moment=date?gridDateInputMoment(input.value,this.local):null;if(date&&!moment)throw new Error(this.labels.gridInvalidFilter);const value=column.kind==="number"?Number(input.value):date?moment.toISOString():input.value;if(column.kind==="number"&&!input.value.trim())throw new Error(this.labels.gridInvalidFilter);gridScalar(value,column);return{column:column.id,operator:operator.value,values:[value]}});return predicates.length===1?predicates[0]:{operator:join.value,filters:predicates,groups:[]}};const update=()=>{apply.cancel();try{apply(read());setText(error,"");if(preset)preset.value="range"}catch(failure){setText(error,this.labels.gridInvalidFilter)}};const add=filter=>{if(rows.children.length>=2)return;const row=h("div","cx-column-condition"),operator=h("select","cx-input"),input=h("input","cx-input");for(const value of text?["contains","eq","ne","startsWith","isNull","isNotNull"]:["eq","ne","gt","ge","lt","le","isNull","isNotNull"])operator.appendChild(gridOption(value,this.labels[GRID_FILTER_LABELS[value]]||GRID_FILTER_LABELS[value]));for(const name of new Set([...this.plugins.flatMap(plugin=>Object.keys(plugin.filterOperators||{})),filter?.operator].filter(Boolean)))
+if(![...operator.options].some(option=>option.value===name))operator.appendChild(gridOption(name,GRID_FILTER_LABELS[name]||name));operator.setAttribute("aria-label",this.labels.gridOperator);input.setAttribute("aria-label",this.labels.gridConditionValue);input.type=date?"datetime-local":text?"text":"number";if(!text)input.step="any";if(filter){operator.value=filter.operator;input.value=date?gridDateInput(filter.values[0],this.local):String(filter.values[0]??"")}
 input.disabled=["isNull","isNotNull"].includes(operator.value);row._condition={operator,input,original:filter?{filter,input:input.value}:null};row.append(operator,input);if(rows.children.length){const remove=gridDecorateButton(gridButton("",()=>{row.remove();join.hidden=true;addButton.hidden=false;update()}),"close",true);remove.setAttribute("aria-label",this.labels.gridDeleteCondition);row.appendChild(remove);rows.appendChild(row)}else rows.appendChild(row);input.addEventListener("input",update);operator.addEventListener("change",()=>{input.disabled=["isNull","isNotNull"].includes(operator.value);update()})};if(date){preset=h("select","cx-input");preset.setAttribute("aria-label",this.labels.gridDateRange);for(const[value,label]of[["range","gridDateRange"],...GRID_DATE_PRESETS])preset.appendChild(gridOption(value,this.labels[label]));preset.addEventListener("change",()=>{if(preset.value==="range")return;const[start,end]=gridDatePreset(this.local,preset.value);rows.replaceChildren();add({column:column.id,operator:"ge",values:[start]});add({column:column.id,operator:"lt",values:[end]});join.value="and";join.hidden=false;addButton.hidden=true;apply(read())});body.appendChild(preset)}
 const addButton=gridButton(this.labels.gridAddCondition,()=>{add(null);join.hidden=false;addButton.hidden=true;rows.lastElementChild.querySelector('input').focus()});addButton.classList.add("cx-link");add(filters[0]);if(filters[1]){add(filters[1]);join.hidden=false;addButton.hidden=true}
 join.addEventListener("change",update);body.append(rows,join,addButton);if(date){const zone=h("p","cx-muted");setText(zone,new Intl.DateTimeFormat(this.lang,{timeZone:this.local?undefined:"UTC"}).resolvedOptions().timeZone);body.appendChild(zone)}};const FILTER_SUMMARY=DataGrid.prototype.syncQuerySummary;DataGrid.prototype.syncQuerySummary=function(){FILTER_SUMMARY.call(this);const controls=this.reportingFilters,query=this.getQuery(),shape=JSON.stringify([query?.filters||[],query?.filterGroup||null]);if(!controls?.details.open||shape===this.reportingFilterDraftBase)return;if(this.reportingFilterSubmitEpoch===this.queryEpoch)this.reportingFilterDraftBase=shape;else{const hadFocus=controls.panel.contains(document.activeElement);controls.details.open=false;if(hadFocus)controls.details.querySelector("summary").focus({preventScroll:true})}};function gridFilterDepth(group){return group?1+Math.max(0,...group.groups.map(gridFilterDepth)):0}
@@ -62,8 +64,10 @@ finally{dialog._navigating=false;if(dialog.isConnected)steps()}};dialog._cxPaint
 else if(["ArrowUp","ArrowDown"].includes(event.key)&&!event.defaultPrevented&&!event.target.matches('input,textarea,select,[contenteditable],[role=tab]')&&!event.target.closest(".cx-record-nested")){event.preventDefault();navigate(event.key==="ArrowUp"?-1:1)}});const abort=()=>{retiredForNavigation=dialog._navigating;dialog.close()};owner.signal.addEventListener("abort",abort,{once:true});const refreshHooks=()=>DataGrid.refreshDrawerHooks(this,dialog);this.host.addEventListener("canopyx:format",refreshHooks);dialog.addEventListener("close",()=>{owner.signal.removeEventListener("abort",abort);this.host.removeEventListener("canopyx:format",refreshHooks);DataGrid.activeDrawers.delete(dialog);cancelAnimationFrame(dialog._cxHooksFrame);paints?.abort();dialog.remove();if(activeRecordDrawer===dialog)activeRecordDrawer=null;if(this.recordDrawer===dialog)this.recordDrawer=null;if(!this.recordDrawer&&!dialog._navigating&&!dialog._replaced&&!this.destroyed)gridRestoreFocus(this,returnFocus,record.id,primary)},{once:true});RECORD_IMPL.decorate?.(this,dialog,{head,identity,title,subtitle,body,options:options||{}});DataGrid.applyDrawerHooks(this,dialog);paint(record,index);const phone=this.host.clientWidth<=640;dialog.classList.toggle("cx-phone",phone);if(phone)dialog.showModal();else dialog.show();this.focusRing(title);return dialog};Object.assign(DataGrid.prototype,{paintDrawerBody(row,body,dialog,context){if(RECORD_IMPL.paint&&this.recordNeeded(row))return RECORD_IMPL.paint(this,row,body,dialog,context);body.replaceChildren();const sections=new Map();for(const column of this.columns){if(column.drawer===false)continue;const name=column.section||this.labels.gridDetailsSection;if(!sections.has(name)){const heading=h("div","cx-drawer-s"),list=h("dl","cx-dl");setText(heading,name);sections.set(name,list);body.append(heading,list)}
 const label=h("dt"),value=h("dd");setText(label,column.title);label.setAttribute("data-cx-field",column.id);value.setAttribute("data-cx-field",column.id);this.paintDrawerValue(column,row,value,context);sections.get(name).append(label,value)}},paintDrawerValue(column,row,value,context){const cell=row.cells[column.id],object=isCellObject(cell),presenter=column.presenter||(column.wrap?{kind:"longText"}:null);if(column.render&&column.hostRenderer!==false){try{if(column.render(row,value,{column:column.id,index:this.columns.indexOf(column),signal:context.signal,onDispose:cleanup=>{if(context.signal.aborted)cleanup();else context.signal.addEventListener("abort",cleanup,{once:true})}})===true)return}
 catch(error){this.emit("error",{error})}}
-if(presenter){gridCellRenderer(this,{...column,renderWidth:context.width||260},presenter)(row,value);return}
-const text=cellText(cell,column,this.fmt),span=h("span");applyTone(span,"cx-drawer-text"+(text?"":" p-missing"),toneOf(object?cell.tone:null));setText(span,text||"—");if(object&&cell.title)span.title=cell.title;value.appendChild(span);if(object)for(const badge of cell.badges||[])value.appendChild(badgeElement(badge))},drawerFields(dialog=this.recordDrawer){return dialog?[...dialog.querySelectorAll("dd[data-cx-field],.cx-record-block-b[data-cx-field]")].filter(value=>value.closest(".cx-drawer")===dialog).map(value=>{const id=value.getAttribute("data-cx-field");return{id,column:this.columns.find(column=>column.id===id)||null,term:value.previousElementSibling,value}}):[]}});DataGrid.prototype.showReportingText=function(column,text,returnFocus,rowId,mono=false){if(this.destroyed||this.pendingQuery||!this.acceptedQuery)return;this.reportingText?.close();const dialog=h("dialog","cx-host cx-grid-overlay cx-text-dialog cx-reporting-text"),head=h("div","cx-drawer-h"),title=h("h4"),content=h("pre",mono?"p-mono":"");gridOverlayTheme(this,dialog);title.id=this.id+"-text-title";title.setAttribute("aria-level","2");setText(title,column.title);dialog.setAttribute("aria-labelledby",title.id);const copy=gridDecorateButton(gridButton(this.labels.gridCopy,()=>this.writeClipboard(text).catch(error=>this.emit("error",{error}))),"copy",true);const close=gridDecorateButton(gridButton("",()=>dialog.close()),"close",true);close.classList.add("icon");close.setAttribute("aria-label",this.labels.gridCloseCell);setText(content,text);content.tabIndex=0;head.append(title,copy,close);dialog.append(head,content);document.body.appendChild(dialog);this.reportingText=dialog;const signal=this.dataLifetime.signal,abort=()=>dialog.close();signal.addEventListener("abort",abort,{once:true});dialog.addEventListener("keydown",event=>{if(event.key!=="Tab"||event.altKey||event.ctrlKey||event.metaKey)return;const controls=[content,copy,close],index=controls.indexOf(document.activeElement);event.preventDefault();controls[(index+(event.shiftKey?-1:1)+controls.length)%controls.length].focus({preventScroll:true})});dialog.addEventListener("close",()=>{signal.removeEventListener("abort",abort);dialog.remove();if(this.reportingText===dialog)this.reportingText=null;if(!this.reportingText&&!signal.aborted)gridRestoreFocus(this,returnFocus,rowId,column)},{once:true});dialog.showModal();content.focus()};DataGrid.prototype.calculateGridAggregates=async function(columns){const controller=this.statusAggregateController=new AbortController(),signal=controller.signal,owner=this.dataLifetime,abort=()=>controller.abort();owner.signal.addEventListener("abort",abort,{once:true});setText(this.statusAggregates,this.labels.loading);try{const totals=new Map(columns.map(column=>[column.id,{count:0,sum:0,min:Infinity,max:-Infinity}]));let read=0;const selected=this.prepareExport({scope:"selected",columns:columns.map(column=>column.id),signal}).rows();for await(const row of selected){if(++read>50000)throw new Error(this.labels.gridUnknownCount);for(const column of columns){const value=cellValue(row.cells[column.id]);if(typeof value!=="number")continue;const total=totals.get(column.id);total.count++;total.sum+=value;total.min=Math.min(total.min,value);total.max=Math.max(total.max,value)}}
+if(presenter){gridCellRenderer(this,{...column,renderWidth:context.width||260},presenter,true,this.columns.includes(column))(row,value);const rule=columnNumericTone(column,cellValue(cell));if(rule){const label=h("span","p-sub");setText(label,rule.label);value.appendChild(label)}
+return}
+const text=cellText(cell,column,this.fmt),blank=object&&cellValue(cell)==null&&cell.text==="",span=h("span");applyTone(span,"cx-drawer-text"+(text||blank?"":" p-missing"),toneOf(columnValueTone(column,cell)||(object?cell.tone:null)));setText(span,text||blank?text:"—");if(object&&cell.title)span.title=cell.title;value.appendChild(span);const rule=columnNumericTone(column,cellValue(cell));if(rule){span.title=rule.label;const label=h("span","p-sub");setText(label,rule.label);value.appendChild(label)}
+if(object)for(const badge of cell.badges||[])value.appendChild(badgeElement(badge))},drawerFields(dialog=this.recordDrawer){return dialog?[...dialog.querySelectorAll("dd[data-cx-field],.cx-record-block-b[data-cx-field]")].filter(value=>value.closest(".cx-drawer")===dialog).map(value=>{const id=value.getAttribute("data-cx-field");return{id,column:this.columns.find(column=>column.id===id)||null,term:value.previousElementSibling,value}}):[]}});DataGrid.prototype.showReportingText=function(column,text,returnFocus,rowId,mono=false){if(this.destroyed||this.pendingQuery||!this.acceptedQuery)return;this.reportingText?.close();const dialog=h("dialog","cx-host cx-grid-overlay cx-text-dialog cx-reporting-text"),head=h("div","cx-drawer-h"),title=h("h4"),content=h("pre",mono?"p-mono":"");gridOverlayTheme(this,dialog);title.id=this.id+"-text-title";title.setAttribute("aria-level","2");setText(title,column.title);dialog.setAttribute("aria-labelledby",title.id);const copy=gridDecorateButton(gridButton(this.labels.gridCopy,()=>this.writeClipboard(text).catch(error=>this.emit("error",{error}))),"copy",true);const close=gridDecorateButton(gridButton("",()=>dialog.close()),"close",true);close.classList.add("icon");close.setAttribute("aria-label",this.labels.gridCloseCell);setText(content,text);content.tabIndex=0;head.append(title,copy,close);dialog.append(head,content);document.body.appendChild(dialog);this.reportingText=dialog;const signal=this.dataLifetime.signal,abort=()=>dialog.close();signal.addEventListener("abort",abort,{once:true});dialog.addEventListener("keydown",event=>{if(event.key!=="Tab"||event.altKey||event.ctrlKey||event.metaKey)return;const controls=[content,copy,close],index=controls.indexOf(document.activeElement);event.preventDefault();controls[(index+(event.shiftKey?-1:1)+controls.length)%controls.length].focus({preventScroll:true})});dialog.addEventListener("close",()=>{signal.removeEventListener("abort",abort);dialog.remove();if(this.reportingText===dialog)this.reportingText=null;if(!this.reportingText&&!signal.aborted)gridRestoreFocus(this,returnFocus,rowId,column)},{once:true});dialog.showModal();content.focus()};DataGrid.prototype.calculateGridAggregates=async function(columns){const controller=this.statusAggregateController=new AbortController(),signal=controller.signal,owner=this.dataLifetime,abort=()=>controller.abort();owner.signal.addEventListener("abort",abort,{once:true});setText(this.statusAggregates,this.labels.loading);try{const totals=new Map(columns.map(column=>[column.id,{count:0,sum:0,min:Infinity,max:-Infinity}]));let read=0;const selected=this.prepareExport({scope:"selected",columns:columns.map(column=>column.id),signal}).rows();for await(const row of selected){if(++read>50000)throw new Error(this.labels.gridUnknownCount);for(const column of columns){const value=cellValue(row.cells[column.id]);if(typeof value!=="number")continue;const total=totals.get(column.id);total.count++;total.sum+=value;total.min=Math.min(total.min,value);total.max=Math.max(total.max,value)}}
 if(signal.aborted||this.destroyed)return;this.statusAggregates.replaceChildren();for(const column of columns){const total=totals.get(column.id),item=h("span"),number={format:value=>numberText(value,this.lang,column.format)};setText(item,column.title+": "+(total.count?number.format(total.sum):"—"));item.title=fill(this.labels.gridSelectionAggregate,{count:total.count,sum:number.format(total.sum),average:total.count?number.format(total.sum/total.count):"—",minimum:total.count?number.format(total.min):"—",maximum:total.count?number.format(total.max):"—"});this.statusAggregates.appendChild(item);}
 }catch(error){if(!signal.aborted&&!this.destroyed)setText(this.statusAggregates,this.labels.gridNoData)}
 finally{owner.signal.removeEventListener("abort",abort)}};Object.assign(DataGrid.prototype,COLUMNS_MENU,{buildGridFilters:buildFilters});context.GRID_REPORTING?.installFilters?.({gridDateInput});installed.add(context.DataGrid.prototype)}};(global.CanopyXParts||=[]).push(["filter-editor",part])})(typeof window!=="undefined"?window:globalThis);

package/CanopyX.Html/Assets/canopyx-flow-checks.css

@@ -1,24 +1,24 @@
 /* The flow-checks part: a button,its state in words with a mark,the host's message and details; the review page's list. */
-.cx-flow-checks{padding-top:var(--cx-size-4px);border-top:var(--cx-size-1px) solid var(--cx-line);}
+.cx-flow-checks{padding-top:var(--cx-size-4px);border-top:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
 .cx-flow-step > .cx-flow-checks{margin-top:var(--cx-flow-gap);}
 .cx-flow-check-item{margin-top:var(--cx-size-10px);}
 .cx-flow-check-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-6px) var(--cx-size-12px);}
-.cx-flow-check-status{display:inline-flex;align-items:center;gap:var(--cx-size-6px);font-size:var(--cx-size-13d5px);color:var(--cx-text-2);}
+.cx-flow-check-status{display:inline-flex;align-items:center;gap:var(--cx-size-6px);font-size:var(--cx-size-13d5px);color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));}
 .cx-flow-check-mark{display:inline-flex;align-items:center;justify-content:center;min-width:var(--cx-size-18px);height:var(--cx-size-18px);border-radius:50%;font-size:var(--cx-size-12px);font-weight:700;}
-.cx-flow-check-item[data-cx-state="pass"] .cx-flow-check-mark{color:var(--cx-tone-success);background:var(--cx-tone-success-bg);}
-.cx-flow-check-item[data-cx-state="warning"] .cx-flow-check-mark{color:var(--cx-tone-warning);background:var(--cx-tone-warning-bg);}
-.cx-flow-check-item[data-cx-state="warning"] .cx-flow-check-status{color:var(--cx-tone-warning);}
-.cx-flow-check-item[data-cx-state="fail"] .cx-flow-check-mark{color:var(--cx-tone-danger);background:var(--cx-tone-danger-bg);}
-.cx-flow-check-item[data-cx-state="fail"] .cx-flow-check-status{color:var(--cx-tone-danger);}
+.cx-flow-check-item[data-cx-state="pass"] .cx-flow-check-mark{color:var(--hfx-color-status-good-fg,light-dark(#177345,#4cc78a));background:var(--hfx-color-status-good-bg,light-dark(#e2f0e9,#1f362f));}
+.cx-flow-check-item[data-cx-state="warning"] .cx-flow-check-mark{color:var(--hfx-color-status-warn-fg,light-dark(#8c5c05,#eeb640));background:var(--hfx-color-status-warn-bg,light-dark(#f8efde,#3b3322));}
+.cx-flow-check-item[data-cx-state="warning"] .cx-flow-check-status{color:var(--hfx-color-status-warn-fg,light-dark(#8c5c05,#eeb640));}
+.cx-flow-check-item[data-cx-state="fail"] .cx-flow-check-mark{color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));background:var(--hfx-color-status-bad-bg,light-dark(#f9e4e4,#3c272a));}
+.cx-flow-check-item[data-cx-state="fail"] .cx-flow-check-status{color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));}
 .cx-flow-check-item[data-cx-state="stale"] .cx-flow-check-status{font-style:italic;}
 .cx-flow-check-message{margin-top:var(--cx-size-4px);font-size:var(--cx-size-13d5px);}
-.cx-flow-check-details{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--cx-size-2px) var(--cx-size-14px);margin-top:var(--cx-size-6px);padding:var(--cx-size-8px) var(--cx-size-10px);border-radius:var(--cx-radius-sm);background:var(--cx-head-bg);font-size:var(--cx-size-13px);}
+.cx-flow-check-details{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--cx-size-2px) var(--cx-size-14px);margin-top:var(--cx-size-6px);padding:var(--cx-size-8px) var(--cx-size-10px);border-radius:var(--hfx-radius-sm,4px);background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));font-size:var(--cx-size-13px);}
 .cx-flow-check-details > div{display:contents;}
-.cx-flow-check-details dt{color:var(--cx-muted);}
+.cx-flow-check-details dt{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
 .cx-flow-check-details dd{margin:0;overflow-wrap:anywhere;}
 .cx-flow-check-ack{margin-top:var(--cx-size-6px);}
 .cx-flow-review-checks{margin-top:var(--cx-size-20px);}
-.cx-flow-answer[data-cx-state="fail"] .cx-flow-answer-value{color:var(--cx-tone-danger);}
-.cx-flow-answer[data-cx-state="warning"] .cx-flow-answer-value{color:var(--cx-tone-warning);}
+.cx-flow-answer[data-cx-state="fail"] .cx-flow-answer-value{color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));}
+.cx-flow-answer[data-cx-state="warning"] .cx-flow-answer-value{color:var(--hfx-color-status-warn-fg,light-dark(#8c5c05,#eeb640));}
 @media (forced-colors:active){.cx-flow-check-mark{forced-color-adjust:none;border:var(--cx-size-1px) solid CanvasText;}}
 @media print{.cx-flow-check-head button,.cx-flow-check-again{display:none;}}

package/CanopyX.Html/Assets/canopyx-flow-checks.js

@@ -1,4 +1,4 @@
-(function(global){"use strict";const installed=new WeakSet();const part={version:"ec2451183901867b",requires:["flow","flow-host"],install(context){if(installed.has(context.FLOW_IMPL))return;const{FLOW_IMPL,FORMS_IMPL,h,setText,fill,plural,numberFormat}=context;const{FlowView,FLOW_HOST,FLOW_LABELS,flowFail,flowIs,flowKeys,flowName,flowString,flowFlag,flowScalar,flowFits,flowField,flowOptions,flowCondition,flowRefs,flowTest,flowCopy,flowSameValue,flowEmpty,flowNormal,flowDate,flowFieldView}=FLOW_IMPL.core;const{EDIT_EDITORS,formRuleSpec,formCheck}=FORMS_IMPL;const FLOW_PART_LABELS={flowRunAgain:"Run again",flowRunCheckAgain:"Run “{check}” again",flowChecks:"Checks",flowCheckAcknowledge:"Continue despite the warning",flowCheckRunning:"Checking…",flowCheckNotRun:"Not run",flowCheckStale:"The answers changed since the check",flowCheckPassed:"Passed at {time}",flowCheckWarning:"Warning at {time}",flowCheckFailed:"Failed at {time}",flowCheckInvalid:"The check gave no usable answer.",flowCheckNeeded:"Run “{check}” on these answers.",flowCheckNotPassed:"“{check}” did not pass.",flowCheckConfirmWarning:"Confirm the warning of “{check}”."};Object.assign(FLOW_LABELS,FLOW_PART_LABELS);const FLOW_CHECK_MARKS={pass:"✓",warning:"!",fail:"×",running:"…"};FLOW_HOST.checks={read(raw,step,model){if(step.type!=="form"||!Array.isArray(raw)||!raw.length||raw.length>8)flowFail("step "+step.id+" has 1 to 8 checks, as a form step only");for(const entry of raw){flowKeys(entry,["id","label","description","fields","required"],"A check");const id=flowName(entry.id,"A check id");if(model.checks.has(id))flowFail("the check id '"+id+"' is used twice");if(!Array.isArray(entry.fields)||!entry.fields.length||entry.fields.length>64||entry.fields.some(name=>typeof name!=="string"))flowFail("check "+id+" needs 1 to 64 field ids");if(entry.required!==undefined&&!["pass","run"].includes(entry.required))flowFail("check "+id+" requires pass or run");const check=Object.freeze({id,step,label:flowString(entry.label,200,"A check label",true),description:flowString(entry.description,1000,"A check description"),fields:Object.freeze([...new Set(entry.fields)]),required:entry.required??null});model.checks.set(id,check);step.checks.push(check)}},finish(model){for(const check of model.checks.values())for(const id of check.fields)if(!model.fields.has(id))flowFail("check "+check.id+" names the unknown field '"+id+"'")},built(view,step,section){if(step.checks.length){section.appendChild(view.checkBlock(step));queueMicrotask(()=>step.checks.forEach(check=>view.paintCheck(check)))}},review:(view,section)=>view.reviewChecks(section),proposal(view,proposal){const checks=view.checkSummary();if(Object.keys(checks).length)proposal.checks=checks}};Object.assign(FlowView.prototype,{checkBlock(step){const block=h("div","cx-flow-checks"),title=h("h4","cx-flow-section-title");title.id=this.id+"-c-"+step.id;setText(title,this.labels.flowChecks);block.setAttribute("role","group");block.setAttribute("aria-labelledby",title.id);block.appendChild(title);for(const check of step.checks){const item=h("div","cx-flow-check-item"),head=h("div","cx-flow-check-head"),run=h("button","cx-flow-btn"),cancel=h("button","cx-flow-btn cx-flow-quiet");const status=h("span","cx-flow-check-status"),mark=h("span","cx-flow-check-mark"),text=h("span"),message=h("p","cx-flow-check-message"),details=h("dl","cx-flow-check-details");const ack=h("label","cx-flow-switch cx-flow-check-ack"),box=h("input"),ackText=h("span");item.dataset.cxCheck=check.id;run.type=cancel.type="button";setText(run,check.label);setText(cancel,this.labels.flowCancel);cancel.hidden=true;status.setAttribute("role","status");mark.setAttribute("aria-hidden","true");status.append(mark,text);status.id=this.id+"-cs-"+check.id;run.setAttribute("aria-describedby",status.id);run.addEventListener("click",()=>this.runCheck(check.id).catch(error=>this.report(error,"check")));cancel.addEventListener("click",()=>this.checkState.get(check.id)?.controller?.abort());box.type="checkbox";setText(ackText,this.labels.flowCheckAcknowledge);ack.append(box,ackText);ack.hidden=true;box.addEventListener("change",()=>{const state=this.checkState.get(check.id);if(state)state.acknowledged=box.checked;this.paintCheck(check);this.renderRail()});head.append(run,status,cancel);item.appendChild(head);if(check.description){const description=h("p","cx-flow-help");setText(description,check.description);item.appendChild(description)}
+(function(global){"use strict";const installed=new WeakSet();const part={version:"3ca22040c60d5689",requires:["flow","flow-host"],install(context){if(installed.has(context.FLOW_IMPL))return;const{FLOW_IMPL,FORMS_IMPL,h,setText,fill,plural,numberFormat}=context;const{FlowView,FLOW_HOST,FLOW_LABELS,flowFail,flowIs,flowKeys,flowName,flowString,flowFlag,flowScalar,flowFits,flowField,flowOptions,flowCondition,flowRefs,flowTest,flowCopy,flowSameValue,flowEmpty,flowNormal,flowDate,flowFieldView}=FLOW_IMPL.core;const{EDIT_EDITORS,formRuleSpec,formCheck}=FORMS_IMPL;const FLOW_PART_LABELS={flowRunAgain:"Run again",flowRunCheckAgain:"Run “{check}” again",flowChecks:"Checks",flowCheckAcknowledge:"Continue despite the warning",flowCheckRunning:"Checking…",flowCheckNotRun:"Not run",flowCheckStale:"The answers changed since the check",flowCheckPassed:"Passed at {time}",flowCheckWarning:"Warning at {time}",flowCheckFailed:"Failed at {time}",flowCheckInvalid:"The check gave no usable answer.",flowCheckNeeded:"Run “{check}” on these answers.",flowCheckNotPassed:"“{check}” did not pass.",flowCheckConfirmWarning:"Confirm the warning of “{check}”."};Object.assign(FLOW_LABELS,FLOW_PART_LABELS);const FLOW_CHECK_MARKS={pass:"✓",warning:"!",fail:"×",running:"…"};FLOW_HOST.checks={read(raw,step,model){if(step.type!=="form"||!Array.isArray(raw)||!raw.length||raw.length>8)flowFail("step "+step.id+" has 1 to 8 checks, as a form step only");for(const entry of raw){flowKeys(entry,["id","label","description","fields","required"],"A check");const id=flowName(entry.id,"A check id");if(model.checks.has(id))flowFail("the check id '"+id+"' is used twice");if(!Array.isArray(entry.fields)||!entry.fields.length||entry.fields.length>64||entry.fields.some(name=>typeof name!=="string"))flowFail("check "+id+" needs 1 to 64 field ids");if(entry.required!==undefined&&!["pass","run"].includes(entry.required))flowFail("check "+id+" requires pass or run");const check=Object.freeze({id,step,label:flowString(entry.label,200,"A check label",true),description:flowString(entry.description,1000,"A check description"),fields:Object.freeze([...new Set(entry.fields)]),required:entry.required??null});model.checks.set(id,check);step.checks.push(check)}},finish(model){for(const check of model.checks.values())for(const id of check.fields)if(!model.fields.has(id))flowFail("check "+check.id+" names the unknown field '"+id+"'")},built(view,step,section){if(step.checks.length){section.appendChild(view.checkBlock(step));queueMicrotask(()=>step.checks.forEach(check=>view.paintCheck(check)))}},review:(view,section)=>view.reviewChecks(section),proposal(view,proposal){const checks=view.checkSummary();if(Object.keys(checks).length)proposal.checks=checks}};Object.assign(FlowView.prototype,{checkBlock(step){const block=h("div","cx-flow-checks"),title=h("h4","cx-flow-section-title");title.id=this.id+"-c-"+step.id;setText(title,this.labels.flowChecks);block.setAttribute("role","group");block.setAttribute("aria-labelledby",title.id);block.appendChild(title);for(const check of step.checks){const item=h("div","cx-flow-check-item"),head=h("div","cx-flow-check-head"),run=h("button","cx-flow-btn"),cancel=h("button","cx-flow-btn cx-flow-quiet");const status=h("span","cx-flow-check-status"),mark=h("span","cx-flow-check-mark"),text=h("span"),message=h("p","cx-flow-check-message"),details=h("dl","cx-flow-check-details");const ack=h("label","cx-flow-switch cx-flow-check-ack"),box=h("input"),ackText=h("span");item.dataset.cxCheck=check.id;run.type=cancel.type="button";setText(run,check.label);setText(cancel,this.labels.flowCancel);cancel.hidden=true;status.setAttribute("role","status");mark.setAttribute("aria-hidden","true");status.append(mark,text);status.id=this.id+"-cs-"+check.id;run.setAttribute("aria-describedby",status.id);run.addEventListener("click",()=>this.runCheck(check.id).catch(error=>this.report(error,"check")));cancel.addEventListener("click",()=>this.checkState.get(check.id)?.controller?.abort());box.type="checkbox";setText(ackText,this.labels.flowCheckAcknowledge);ack.append(box,ackText);ack.hidden=true;box.addEventListener("change",()=>{const state=this.checkState.get(check.id);if(state)state.acknowledged=box.checked;this.paintCheck(check);this.renderRail()});head.append(run,status,cancel);item.appendChild(head);if(check.description){const description=h("p","cx-flow-help");setText(description,check.description);item.appendChild(description)}
 item.append(message,details,ack);item._cx={run,cancel,mark,text,message,details,ack,box};block.appendChild(item)}
 return block},paintCheck(check){const section=this.sections.get(check.step.id),item=section?.querySelector('[data-cx-check="'+check.id+'"]');if(!item)return;const parts=item._cx,state=this.checkState.get(check.id),labels=this.labels,result=state?.result;const phase=state?.running?"running":!result?"none":state.stale?"stale":result.status;item.dataset.cxState=phase;setText(parts.mark,FLOW_CHECK_MARKS[phase]||"");setText(parts.text,phase==="running"?labels.flowCheckRunning:phase==="none"?labels.flowCheckNotRun:phase==="stale"?labels.flowCheckStale:
 fill(phase==="pass"?labels.flowCheckPassed:phase==="warning"?labels.flowCheckWarning:labels.flowCheckFailed,{time:this.checkTime(state.at)}));parts.run.disabled=!!state?.running;parts.cancel.hidden=!state?.running;parts.message.hidden=!result?.message||phase==="running";setText(parts.message,result?.message||"");parts.details.replaceChildren(...(phase==="running"?[]:result?.details||[]).map(row=>{const line=h("div"),term=h("dt"),value=h("dd");setText(term,row.label);setText(value,row.value);line.append(term,value);return line}));parts.details.hidden=!parts.details.children.length;parts.ack.hidden=!(check.required==="run"&&phase==="warning");parts.box.checked=!!state?.acknowledged},checkTime(at){try{return new Intl.DateTimeFormat(this.lang||undefined,{timeStyle:"short"}).format(new Date(at))}catch(error){return at}},checksChanged(field){const affected=new Map([[field.id,true]]);const changed=id=>{if(!affected.has(id))affected.set(id,[...this.model.fields.get(id).refs].some(changed));return affected.get(id)};let invalidated=false;for(const check of this.model.checks.values()){if(!check.fields.some(changed))continue;const state=this.checkState.get(check.id);if(state){state.stale=true;state.acknowledged=false;state.controller?.abort();this.paintCheck(check);invalidated=true}}

package/CanopyX.Html/Assets/canopyx-flow-command.css

@@ -1,14 +1,14 @@
 /* The flow-command part: the equivalent command with its tabs and Copy. */
-.cx-flow-command{border:var(--cx-size-1px) solid var(--cx-line);border-radius:var(--cx-radius);}
+.cx-flow-command{border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));}
 .cx-flow-command > summary{padding:var(--cx-size-8px) var(--cx-size-12px);font-weight:600;cursor:pointer;}
-.cx-flow-command[open] > summary{border-bottom:var(--cx-size-1px) solid var(--cx-line);}
+.cx-flow-command[open] > summary{border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
 .cx-flow-command-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--cx-size-8px);padding:var(--cx-size-8px) var(--cx-size-12px) 0;}
 .cx-flow-tabs{display:flex;flex-wrap:wrap;gap:var(--cx-size-4px);}
-.cx-flow-tab{min-height:var(--cx-size-28px);padding:0 var(--cx-size-10px);border:var(--cx-size-1px) solid transparent;border-radius:var(--cx-radius-sm);background:transparent;color:var(--cx-text-2);font:inherit;font-size:var(--cx-size-13px);cursor:pointer;}
-.cx-flow-tab[aria-selected="true"]{border-color:var(--cx-line-strong);background:var(--cx-surface);color:var(--cx-text);font-weight:600;}
-.cx-flow-tab:focus-visible,.cx-flow-code:focus-visible,.cx-flow-command > summary:focus-visible{outline:var(--cx-size-2px) solid var(--cx-accent);outline-offset:var(--cx-size-1px);}
-.cx-flow-code{margin:var(--cx-size-8px) var(--cx-size-12px) var(--cx-size-12px);padding:var(--cx-size-10px) var(--cx-size-12px);border-radius:var(--cx-radius-sm);background:var(--cx-head-bg);
-font:var(--cx-size-12d5px)/1.5 var(--cx-font-mono);white-space:pre-wrap;overflow-wrap:anywhere;max-height:var(--cx-size-320px);overflow:auto;}
+.cx-flow-tab{min-height:var(--cx-size-28px);padding:0 var(--cx-size-10px);border:var(--cx-size-1px) solid transparent;border-radius:var(--hfx-radius-sm,4px);background:transparent;color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));font:inherit;font-size:var(--cx-size-13px);cursor:pointer;}
+.cx-flow-tab[aria-selected="true"]{border-color:var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font-weight:600;}
+.cx-flow-tab:focus-visible,.cx-flow-code:focus-visible,.cx-flow-command > summary:focus-visible{outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));outline-offset:var(--hfx-focus-offset,2px);}
+.cx-flow-code{margin:var(--cx-size-8px) var(--cx-size-12px) var(--cx-size-12px);padding:var(--cx-size-10px) var(--cx-size-12px);border-radius:var(--hfx-radius-sm,4px);background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));
+font:var(--cx-size-12d5px)/1.5 var(--hfx-font-mono,"Cascadia Mono","Cascadia Code",Consolas,"SFMono-Regular",Menlo,monospace);white-space:pre-wrap;overflow-wrap:anywhere;max-height:var(--cx-size-320px);overflow:auto;}
 .cx-flow-step > .cx-flow-command{margin-top:var(--cx-flow-gap);}
 @media (forced-colors:active){.cx-flow-tab[aria-selected="true"]{border-color:Highlight;}}
 @media print{.cx-flow-command-tools{display:none;}.cx-flow-command{break-inside:avoid;}}

package/CanopyX.Html/Assets/canopyx-flow-command.js

@@ -1,4 +1,4 @@
-(function(global){"use strict";const installed=new WeakSet();const part={version:"39472118ca80ef02",requires:["flow"],install(context){if(installed.has(context.FLOW_IMPL))return;const{FLOW_IMPL,FORMS_IMPL,h,setText,fill,plural,numberFormat}=context;const{FlowView,FLOW_HOST,FLOW_LABELS,flowFail,flowIs,flowKeys,flowName,flowString,flowFlag,flowScalar,flowFits,flowField,flowOptions,flowCondition,flowRefs,flowTest,flowCopy,flowSameValue,flowEmpty,flowNormal,flowDate,flowFieldView}=FLOW_IMPL.core;const{EDIT_EDITORS,formRuleSpec,formCheck}=FORMS_IMPL;const FLOW_PART_LABELS={flowCommandTab:"Command",flowPatchTab:"JSON patch",flowCommandTitle:"Equivalent command"};Object.assign(FLOW_LABELS,FLOW_PART_LABELS);const FLOW_PLAIN_CHARACTERS={powershell:"-_./:\\=+%",posix:"-_./:=@%+,",windows:"-_./:\\=@%+,"};const FLOW_COMMAND_STYLES=["powershell","posix","windows"];FLOW_HOST.command={read(raw){flowKeys(raw,["name","style","variants"],"The command");const name=flowString(raw.name,200,"The command name",true),style=raw.style??"powershell";if(!FLOW_COMMAND_STYLES.includes(style)||/[\u0000-\u001f]/.test(name)) flowFail("the command has an unknown style or a control character");
+(function(global){"use strict";const installed=new WeakSet();const part={version:"a6c75cf736c93444",requires:["flow"],install(context){if(installed.has(context.FLOW_IMPL))return;const{FLOW_IMPL,FORMS_IMPL,h,setText,fill,plural,numberFormat}=context;const{FlowView,FLOW_HOST,FLOW_LABELS,flowFail,flowIs,flowKeys,flowName,flowString,flowFlag,flowScalar,flowFits,flowField,flowOptions,flowCondition,flowRefs,flowTest,flowCopy,flowSameValue,flowEmpty,flowNormal,flowDate,flowFieldView}=FLOW_IMPL.core;const{EDIT_EDITORS,formRuleSpec,formCheck}=FORMS_IMPL;const FLOW_PART_LABELS={flowCommandTab:"Command",flowPatchTab:"JSON patch",flowCommandTitle:"Equivalent command"};Object.assign(FLOW_LABELS,FLOW_PART_LABELS);const FLOW_PLAIN_CHARACTERS={powershell:"-_./:\\=+%",posix:"-_./:=@%+,",windows:"-_./:\\=@%+,"};const FLOW_COMMAND_STYLES=["powershell","posix","windows"];FLOW_HOST.command={read(raw){flowKeys(raw,["name","style","variants"],"The command");const name=flowString(raw.name,200,"The command name",true),style=raw.style??"powershell";if(!FLOW_COMMAND_STYLES.includes(style)||/[\u0000-\u001f]/.test(name)) flowFail("the command has an unknown style or a control character");
 const variants=raw.variants??[];if(!Array.isArray(variants)||variants.length>8)flowFail("a command has at most 8 variants");const ids=new Set(["command","patch"]);return{name,style,variants:variants.map(variant=>{flowKeys(variant,["id","label"],"A command variant");const id=flowName(variant.id,"A variant id");if(ids.has(id))flowFail("the command variant '"+id+"' is used twice");ids.add(id);return Object.freeze({id,label:flowString(variant.label,60,"A variant label",true)})})}},line:view=>flowCommandLine(view),document(doc,model){if(doc.command!==undefined)model.command=this.read(doc.command)},review(view,section){if(view.model.command)section.appendChild(view.commandPanel())},proposal(view,proposal){if(view.model.command)proposal.command=flowCommandLine(view)}};function flowCommandParameter(name,style){const bare=name.replace(/^[-/]+/, "");
 return style==="posix"?(name.startsWith("-")?name:(bare.length===1?"-":"--")+ bare):style==="windows"?"/"+bare:"-"+bare}
 function flowCommandQuote(value,style){const allowed=FLOW_PLAIN_CHARACTERS[style];let plain=value.length>0;for(let index=0;plain&&index<value.length;index++)plain=/[\p{L}\p{Nd}]/u.test(value[index]) || allowed.includes(value[index]);

package/CanopyX.Html/Assets/canopyx-flow-dialog.css

@@ -2,13 +2,13 @@
 .cx-flow{--cx-size-560px:560px;}
 .cx-flow-launcher{display:contents;}
 .cx-flow-launcher > .cx-flow-launch{height:auto;min-height:var(--cx-size-36px);padding:0 var(--cx-size-16px);}
-.cx-flow-dialog{box-sizing:border-box;width:min(var(--cx-size-640px),calc(var(--cx-size-100vw) - var(--cx-size-32px)));max-height:calc(var(--cx-size-100vh) - var(--cx-size-32px));padding:0;border:0;border-radius:var(--cx-size-8px);
-background:transparent;color:var(--cx-text);overflow:auto;box-shadow:0 var(--cx-size-24px) var(--cx-size-64px) color-mix(in srgb,var(--cx-shadow-ink,#000) 32%,transparent);}
-.cx-flow-dialog::backdrop{background:color-mix(in srgb,var(--cx-shadow-ink,#000) 38%,transparent);}
-.cx-flow-dialog.cx-flow-drawer{margin:0 0 0 auto;inset-inline-end:0;inset-inline-start:auto;width:min(var(--cx-size-560px,560px),var(--cx-size-100vw));height:var(--cx-size-100vh);max-height:none;border-radius:0;}
-.cx-flow-dialog.cx-flow-drawer > .cx-flow{min-height:100%;border-radius:0;border-block:0;border-inline-end:0;}
+.cx-flow-dialog{box-sizing:border-box;width:min(var(--cx-size-640px),calc(var(--cx-size-100vw) - var(--cx-size-32px)));max-height:calc(var(--cx-size-100vh) - var(--cx-size-32px));padding:0;border:0;border-radius:var(--hfx-radius-overlay,var(--hfx-radius-lg,10px));
+background:transparent;color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));overflow:auto;box-shadow:var(--hfx-elevation-3,0 2px 4px rgba(22,24,28,.06),0 16px 36px -16px rgba(22,24,28,.28));}
+.cx-flow-dialog::backdrop{background:var(--hfx-color-overlay,light-dark(rgba(22,24,28,0.42),rgba(0,0,0,0.66)));}
+.cx-flow-dialog.cx-flow-drawer{margin:0 0 0 auto;inset-inline-end:0;inset-inline-start:auto;width:min(var(--cx-size-560px,560px),var(--cx-size-100vw));height:var(--cx-size-100vh);max-height:none;border-radius:var(--hfx-radius-none,0);}
+.cx-flow-dialog.cx-flow-drawer > .cx-flow{min-height:100%;border-radius:var(--hfx-radius-none,0);border-block:0;border-inline-end:0;}
 .cx-flow-head-close{position:relative;padding-inline-end:calc(var(--cx-flow-pad) + var(--cx-size-36px));}
 .cx-flow-close{position:absolute;inset-block-start:var(--cx-size-10px);inset-inline-end:var(--cx-size-10px);border-color:transparent;background:transparent;}
-.cx-flow-discard{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-8px) var(--cx-size-12px);padding:var(--cx-size-10px) var(--cx-flow-pad);border-bottom:var(--cx-size-1px) solid var(--cx-line);background:var(--cx-tone-warning-bg);}
+.cx-flow-discard{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-8px) var(--cx-size-12px);padding:var(--cx-size-10px) var(--cx-flow-pad);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));background:var(--hfx-color-status-warn-bg,light-dark(#f8efde,#3b3322));}
 .cx-flow-discard p{flex:1;font-weight:600;}
-@media (max-width:639.98px){.cx-flow-dialog,.cx-flow-dialog.cx-flow-drawer{width:var(--cx-size-100vw);max-width:none;height:var(--cx-size-100vh);max-height:none;margin:0;border-radius:0;}.cx-flow-dialog > .cx-flow{min-height:100%;border-radius:0;border:0;}}
+@media (max-width:639.98px){.cx-flow-dialog,.cx-flow-dialog.cx-flow-drawer{width:var(--cx-size-100vw);max-width:none;height:var(--cx-size-100vh);max-height:none;margin:0;border-radius:var(--hfx-radius-none,0);}.cx-flow-dialog > .cx-flow{min-height:100%;border-radius:var(--hfx-radius-none,0);border:0;}}

package/CanopyX.Html/Assets/canopyx-flow-dialog.js

@@ -1,3 +1,3 @@
-(function(global){"use strict";const installed=new WeakSet();const part={version:"ebb432cd6e34aba6",requires:["flow","flow-host"],install(context){if(installed.has(context.FLOW_IMPL))return;const{FLOW_IMPL,FORMS_IMPL,h,setText,fill,plural,numberFormat}=context;const{FlowView,FLOW_HOST,FLOW_LABELS,flowFail,flowIs,flowKeys,flowName,flowString,flowFlag,flowScalar,flowFits,flowField,flowOptions,flowCondition,flowRefs,flowTest,flowCopy,flowSameValue,flowEmpty,flowNormal,flowDate,flowFieldView}=FLOW_IMPL.core;const{EDIT_EDITORS,formRuleSpec,formCheck}=FORMS_IMPL;const FLOW_PART_LABELS={flowClose:"Close",flowDiscardQuestion:"Discard your answers?",flowDiscard:"Discard",flowKeepEditing:"Keep editing"};Object.assign(FLOW_LABELS,FLOW_PART_LABELS);const flowRelease=FlowView.prototype.destroy;FLOW_HOST.dialog={document(doc,model){const raw=doc.layout;if(!raw)return;model.container=raw.container??"inline";if(!["inline","dialog","drawer"].includes(model.container))flowFail("the flow layout has an unknown container");if(raw.launch!==undefined&&model.container==="inline")flowFail("only a dialog or drawer flow has a launch button");model.launch=flowString(raw.launch,80,"The launch label")}};Object.assign(FlowView.prototype,{destroy(){flowRelease.call(this);this.shell?.remove()},buildContainer(){const labels=this.labels,shell=this.shell=h("div","cx-flow-launcher"),launch=this.launcher=h("button","cx-flow-btn cx-primary cx-flow-launch");launch.type="button";setText(launch,this.model.launch||this.model.title);launch.setAttribute("aria-haspopup","dialog");const dialog=this.dialog=h("dialog","cx-flow-dialog" +(this.model.container==="drawer"?" cx-flow-drawer":""));dialog.setAttribute("aria-labelledby",this.id+"-title");const close=h("button","cx-flow-icon-btn cx-flow-close");close.type="button";setText(close,"×");close.setAttribute("aria-label",labels.flowClose);this.head.classList.add("cx-flow-head-close");this.head.appendChild(close);const confirm=this.discardBar=h("div","cx-flow-discard"),question=h("p"),discard=h("button","cx-flow-btn"),keep=h("button","cx-flow-btn cx-primary");confirm.setAttribute("role","alertdialog");confirm.setAttribute("aria-labelledby",this.id+"-discard");confirm.hidden=true;question.id=this.id+"-discard";setText(question,labels.flowDiscardQuestion);discard.type=keep.type="button";setText(discard,labels.flowDiscard);setText(keep,labels.flowKeepEditing);confirm.append(question,keep,discard);this.root.insertBefore(confirm,this.layout);dialog.appendChild(this.root);shell.append(launch,dialog);this.host.appendChild(shell);const signal=this.lifetime.signal;launch.addEventListener("click",()=>this.open(),{signal});close.addEventListener("click",()=>this.close(),{signal});dialog.addEventListener("cancel",event=>{event.preventDefault();this.close()},{signal});keep.addEventListener("click",()=>{confirm.hidden=true;this.stage.querySelector(".cx-flow-step-title")?.focus()},{signal});discard.addEventListener("click",()=>this.close(true),{signal})},cancelButton(){if(!this.dialog)return null;const cancel=h("button","cx-flow-btn cx-flow-quiet");cancel.type="button";setText(cancel,this.labels.flowCancel);cancel.addEventListener("click",()=>this.close());return cancel},open(){if(!this.dialog||this.dialog.open)return!!this.dialog;this.discardBar.hidden=true;this.dialog.showModal();this.measure();this.render();(this.stage.querySelector(".cx-flow-step-title")||this.root).focus({preventScroll:true});return true},close(force){if(!this.dialog?.open)return false;if(!force&&this.phase==="form"&&this.isDirty()){if(!this.emit("flowLeaving",{reason:"close"},"onLeaving",true))return false;this.discardBar.hidden=false;this.discardBar.querySelector(".cx-primary").focus();return false}
+(function(global){"use strict";const installed=new WeakSet();const part={version:"a9b5bce11baa2499",requires:["flow","flow-host"],install(context){if(installed.has(context.FLOW_IMPL))return;const{FLOW_IMPL,FORMS_IMPL,h,setText,fill,plural,numberFormat}=context;const{FlowView,FLOW_HOST,FLOW_LABELS,flowFail,flowIs,flowKeys,flowName,flowString,flowFlag,flowScalar,flowFits,flowField,flowOptions,flowCondition,flowRefs,flowTest,flowCopy,flowSameValue,flowEmpty,flowNormal,flowDate,flowFieldView}=FLOW_IMPL.core;const{EDIT_EDITORS,formRuleSpec,formCheck}=FORMS_IMPL;const FLOW_PART_LABELS={flowClose:"Close",flowDiscardQuestion:"Discard your answers?",flowDiscard:"Discard",flowKeepEditing:"Keep editing"};Object.assign(FLOW_LABELS,FLOW_PART_LABELS);const flowRelease=FlowView.prototype.destroy;FLOW_HOST.dialog={document(doc,model){const raw=doc.layout;if(!raw)return;model.container=raw.container??"inline";if(!["inline","dialog","drawer"].includes(model.container))flowFail("the flow layout has an unknown container");if(raw.launch!==undefined&&model.container==="inline")flowFail("only a dialog or drawer flow has a launch button");model.launch=flowString(raw.launch,80,"The launch label")}};Object.assign(FlowView.prototype,{destroy(){flowRelease.call(this);this.shell?.remove()},buildContainer(){const labels=this.labels,shell=this.shell=h("div","cx-flow-launcher"),launch=this.launcher=h("button","cx-flow-btn cx-primary cx-flow-launch");launch.type="button";setText(launch,this.model.launch||this.model.title);launch.setAttribute("aria-haspopup","dialog");const dialog=this.dialog=h("dialog","cx-flow-dialog" +(this.model.container==="drawer"?" cx-flow-drawer":""));dialog.setAttribute("aria-labelledby",this.id+"-title");const close=h("button","cx-flow-icon-btn cx-flow-close");close.type="button";setText(close,"×");close.setAttribute("aria-label",labels.flowClose);this.head.classList.add("cx-flow-head-close");this.head.appendChild(close);const confirm=this.discardBar=h("div","cx-flow-discard"),question=h("p"),discard=h("button","cx-flow-btn"),keep=h("button","cx-flow-btn cx-primary");confirm.setAttribute("role","alertdialog");confirm.setAttribute("aria-labelledby",this.id+"-discard");confirm.hidden=true;question.id=this.id+"-discard";setText(question,labels.flowDiscardQuestion);discard.type=keep.type="button";setText(discard,labels.flowDiscard);setText(keep,labels.flowKeepEditing);confirm.append(question,keep,discard);this.root.insertBefore(confirm,this.layout);dialog.appendChild(this.root);shell.append(launch,dialog);this.host.appendChild(shell);const signal=this.lifetime.signal;launch.addEventListener("click",()=>this.open(),{signal});close.addEventListener("click",()=>this.close(),{signal});dialog.addEventListener("cancel",event=>{event.preventDefault();this.close()},{signal});keep.addEventListener("click",()=>{confirm.hidden=true;this.stage.querySelector(".cx-flow-step-title")?.focus()},{signal});discard.addEventListener("click",()=>this.close(true),{signal})},cancelButton(){if(!this.dialog)return null;const cancel=h("button","cx-flow-btn cx-flow-quiet");cancel.type="button";setText(cancel,this.labels.flowCancel);cancel.addEventListener("click",()=>this.close());return cancel},open(){if(!this.dialog||this.dialog.open)return!!this.dialog;this.discardBar.hidden=true;this.dialog.showModal();this.measure();this.render();(this.stage.querySelector(".cx-flow-step-title")||this.root).focus({preventScroll:true});return true},close(force){if(!this.dialog?.open)return false;if(!force&&this.phase==="form"&&this.isDirty()){if(!this.emit("flowLeaving",{reason:"close"},"onLeaving",true))return false;this.discardBar.hidden=false;this.discardBar.querySelector(".cx-primary").focus();return false}
 this.discardBar.hidden=true;this.dialog.close();if(force||this.phase!=="form"){this.panel=null;this.reset()}
 this.launcher.focus();return true}});installed.add(context.FLOW_IMPL)}};(global.CanopyXParts||=[]).push(["flow-dialog",part])})(typeof window!=="undefined"?window:globalThis);

package/CanopyX.Html/Assets/canopyx-flow-drafts.css

@@ -1,17 +1,17 @@
 /* The flow-drafts part: drafts,presets and the changed marks. */
-.cx-flow-mark-changed{margin-inline-start:var(--cx-size-8px);padding:0 var(--cx-size-6px);border-radius:var(--cx-size-999px);border:var(--cx-size-1px) solid var(--cx-line);
-font-size:var(--cx-size-11d5px);font-weight:500;color:var(--cx-text-2);vertical-align:1px;}
+.cx-flow-mark-changed{margin-inline-start:var(--cx-size-8px);padding:0 var(--cx-size-6px);border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));
+font-size:var(--cx-size-11d5px);font-weight:500;color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));vertical-align:1px;}
 .cx-flow-presets{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-6px) var(--cx-size-12px);margin-top:var(--cx-size-10px);font-size:var(--cx-size-13d5px);}
-.cx-flow-presets-label{color:var(--cx-text-2);font-weight:600;}
+.cx-flow-presets-label{color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));font-weight:600;}
 .cx-flow .cx-flow-preset{width:auto;min-width:var(--cx-size-180px);max-width:var(--cx-size-320px);}
 .cx-flow-preset-name{display:flex;flex-wrap:wrap;gap:var(--cx-size-6px);flex-basis:100%;}
 .cx-flow-preset-name .cx-flow-input{max-width:var(--cx-size-280px);}
-.cx-flow-draft-note{margin-top:var(--cx-size-6px);font-size:var(--cx-size-12px);color:var(--cx-muted);}
+.cx-flow-draft-note{margin-top:var(--cx-size-6px);font-size:var(--cx-size-12px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
 .cx-flow-resume{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-6px) var(--cx-size-12px);margin:var(--cx-size-12px) var(--cx-flow-pad) 0;padding:var(--cx-size-10px) var(--cx-size-14px);
-border-radius:var(--cx-radius);border-inline-start:var(--cx-size-3px) solid var(--cx-accent);background:var(--cx-accent-soft);}
-.cx-flow-resume.cx-flow-resume-stale{border-inline-start-color:var(--cx-tone-warning);background:var(--cx-tone-warning-bg);}
+border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));border-inline-start:var(--cx-size-3px) solid var(--hfx-color-accent,light-dark(#11776f,#37c9b8));background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));}
+.cx-flow-resume.cx-flow-resume-stale{border-inline-start-color:var(--hfx-color-status-warn-fg,light-dark(#8c5c05,#eeb640));background:var(--hfx-color-status-warn-bg,light-dark(#f8efde,#3b3322));}
 .cx-flow-resume > p{flex-basis:100%;}
 .cx-flow-resume-tools{display:flex;flex-wrap:wrap;gap:var(--cx-size-8px);}
-.cx-flow-preset-line{color:var(--cx-text-2);font-size:var(--cx-size-13d5px);}
+.cx-flow-preset-line{color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));font-size:var(--cx-size-13d5px);}
 .cx-flow-step > .cx-flow-preset-line{margin-top:var(--cx-flow-gap);}
 @media print{.cx-flow-presets,.cx-flow-resume{display:none;}}