apex-grid 3.4.0 → 3.6.0

package/styles/toolbar/toolbar.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: 3}:host{--ig-size: 1;grid-row:toolbar-row;display:block;background:var(--igx-header-background, var(--header-background, var(--ag-surface-elevated)));color:var(--igx-header-text-color, var(--header-text-color, var(--ag-text-muted)));border-block-end:1px solid var(--igx-header-border-color, var(--header-border-color, var(--ag-hairline)));z-index:calc(var(--z-index-base) + 4);position:sticky;inset-block-start:0;inset-inline-start:0;box-sizing:border-box;width:var(--apex-host-width, 100%);max-width:var(--apex-host-width, 100%)}[part=toolbar]{display:flex;align-items:center;gap:.5rem;padding:var(--ag-toolbar-pad)}[part=toolbar-search]{flex:1;max-width:22.5rem}[part=search-field]{display:inline-flex;align-items:center;inline-size:100%;block-size:1.875rem;padding:0 .625rem;gap:.375rem;background:var(--ag-surface);color:var(--ag-text-body);border:.0625rem solid var(--ag-brand-line);border-radius:8px;transition:border-color var(--ag-dur-fast) var(--ag-ease),box-shadow var(--ag-dur-fast) var(--ag-ease);box-sizing:border-box}[part=search-field]:focus-within{border-color:color-mix(in srgb, var(--ag-brand) 50%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--ag-brand) 14%, transparent)}[part=search-icon]{inline-size:1rem;block-size:1rem;flex-shrink:0;opacity:.65;color:currentcolor}[part=search-input]{flex:1;min-inline-size:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgba(0,0,0,0);color:inherit;border:0;outline:0;padding:0;margin:0;font:inherit;font-size:var(--ag-fs-cell);line-height:1}[part=search-input]::-moz-placeholder{color:var(--ag-text-subtle);opacity:1}[part=search-input]::placeholder{color:var(--ag-text-subtle);opacity:1}[part=search-input]::-webkit-search-cancel-button,[part=search-input]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}[part=toolbar-actions]{display:inline-flex;align-items:center;gap:.25rem;margin-inline-start:auto}[part=toolbar-action]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:.3125rem;border:.0625rem solid rgba(0,0,0,0);border-radius:var(--ag-radius-sm);background:rgba(0,0,0,0);color:var(--ag-text-body);cursor:pointer;font:inherit;font-size:var(--ag-fs-cell);font-weight:var(--ag-fw-regular);line-height:1;min-block-size:1.75rem;padding:0 .625rem;transition:background-color var(--ag-dur-fast) var(--ag-ease),border-color var(--ag-dur-fast) var(--ag-ease),color var(--ag-dur-fast) var(--ag-ease);white-space:nowrap}[part=toolbar-action]:hover{background:var(--ag-brand-softer);color:var(--ag-brand-strong)}[part=toolbar-action]:focus-visible{outline:0;border-color:color-mix(in srgb, var(--ag-brand) 50%, transparent);box-shadow:0 0 0 .1875rem color-mix(in srgb, var(--ag-brand) 14%, transparent)}[part=toolbar-action][data-action-id=create-chart]{border-color:var(--ag-hairline);font-weight:var(--ag-fw-semibold)}[part=toolbar-action][data-action-id=create-chart]:hover{border-color:color-mix(in srgb, var(--ag-brand) 40%, transparent);background:var(--ag-brand-softer);color:var(--ag-brand-strong)}[part=toolbar-action][data-action-id=ask-ai]{background:var(--ag-brand);border-color:var(--ag-brand);color:var(--ag-text-on-brand);font-weight:var(--ag-fw-semibold)}[part=toolbar-action][data-action-id=ask-ai]:hover{background:var(--ag-brand-strong);border-color:var(--ag-brand-strong);color:var(--ag-text-on-brand)}[part=toolbar-action][data-action-id=ask-ai]:focus-visible{border-color:var(--ag-brand-strong)}[part=export]{position:relative}[part=export-trigger]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgba(0,0,0,0);border:.0625rem solid rgba(0,0,0,0);color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.125rem;min-inline-size:1.75rem;min-block-size:1.75rem;padding:0 .375rem;border-radius:var(--ag-radius-sm);transition:background-color var(--ag-dur-fast) var(--ag-ease),border-color var(--ag-dur-fast) var(--ag-ease),color var(--ag-dur-fast) var(--ag-ease)}[part=export-trigger]:hover{background:var(--ag-brand-softer);color:var(--ag-brand-strong)}[part=export-trigger]:focus-visible{outline:0;border-color:color-mix(in srgb, var(--ag-brand) 50%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--ag-brand) 14%, transparent)}[part=export-icon]{inline-size:1rem;block-size:1rem}[part=export-caret]{inline-size:.75rem;block-size:.75rem;opacity:.65}[part=export-menu]{position:absolute;inset-block-start:calc(100% + 0.25rem);inset-inline-end:0;margin:0;padding:.25rem 0;min-inline-size:11.25rem;background:var(--igx-cell-editor-background, var(--ag-surface));color:var(--ag-text-body);border:.0625rem solid var(--ag-brand-line);border-radius:var(--ag-radius-sm);box-shadow:0 .125rem .25rem rgba(0,0,0,.06),0 .375rem 1rem rgba(0,0,0,.12);list-style:none;z-index:calc(var(--z-index-base) + 10)}[part=export-menu][hidden]{display:none}[part=export-menu] li{margin:0;padding:0}[part=export-menu-item]{display:block;inline-size:100%;text-align:start;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgba(0,0,0,0);color:inherit;border:0;margin:0;padding:.5rem .75rem;font:inherit;font-size:.8125rem;cursor:pointer;min-block-size:1.5rem}[part=export-menu-item]:hover{background:var(--ag-brand-softer);color:var(--ag-brand-strong)}[part=export-menu-item]:focus-visible{outline:0;background:var(--ag-brand-soft);box-shadow:inset 0 0 0 .125rem var(--ag-brand)}`;
+export const styles = css `:host{--ig-size: 1;grid-row:toolbar-row;display:block;background:var(--header-background, var(--_ag-surface-elevated));color:var(--header-text-color, var(--_ag-text-muted));border-block-end:1px solid var(--header-border-color, var(--_ag-hairline));z-index:calc(var(--z-index-base) + 4);position:sticky;inset-block-start:0;inset-inline-start:0;box-sizing:border-box;width:var(--apex-host-width, 100%);max-width:var(--apex-host-width, 100%)}[part=toolbar]{display:flex;align-items:center;gap:.5rem;padding:var(--_ag-toolbar-pad)}[part=toolbar-search]{flex:1;max-width:22.5rem}[part=search-field]{display:inline-flex;align-items:center;inline-size:100%;block-size:1.875rem;padding:0 .625rem;gap:.375rem;background:var(--_ag-surface);color:var(--_ag-text-body);border:.0625rem solid var(--_ag-brand-line);border-radius:8px;transition:border-color var(--_ag-dur-fast) var(--_ag-ease),box-shadow var(--_ag-dur-fast) var(--_ag-ease);box-sizing:border-box}[part=search-field]:focus-within{border-color:color-mix(in srgb, var(--_ag-brand) 50%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--_ag-brand) 14%, transparent)}[part=search-icon]{inline-size:1rem;block-size:1rem;flex-shrink:0;opacity:.65;color:currentcolor}[part=search-input]{flex:1;min-inline-size:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgba(0,0,0,0);color:inherit;border:0;outline:0;padding:0;margin:0;font:inherit;font-size:var(--_ag-fs-cell);line-height:1}[part=search-input]::-moz-placeholder{color:var(--_ag-text-subtle);opacity:1}[part=search-input]::placeholder{color:var(--_ag-text-subtle);opacity:1}[part=search-input]::-webkit-search-cancel-button,[part=search-input]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}[part=toolbar-actions]{display:inline-flex;align-items:center;gap:.25rem;margin-inline-start:auto}[part=toolbar-action]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:.3125rem;border:.0625rem solid rgba(0,0,0,0);border-radius:var(--_ag-radius-sm);background:rgba(0,0,0,0);color:var(--_ag-text-body);cursor:pointer;font:inherit;font-size:var(--_ag-fs-cell);font-weight:var(--_ag-fw-regular);line-height:1;min-block-size:1.75rem;padding:0 .625rem;transition:background-color var(--_ag-dur-fast) var(--_ag-ease),border-color var(--_ag-dur-fast) var(--_ag-ease),color var(--_ag-dur-fast) var(--_ag-ease);white-space:nowrap}[part=toolbar-action]:hover{background:var(--_ag-brand-softer);color:var(--_ag-brand-strong)}[part=toolbar-action]:focus-visible{outline:0;border-color:color-mix(in srgb, var(--_ag-brand) 50%, transparent);box-shadow:0 0 0 .1875rem color-mix(in srgb, var(--_ag-brand) 14%, transparent)}[part=toolbar-action][data-action-id=create-chart]{border-color:var(--_ag-hairline);font-weight:var(--_ag-fw-semibold)}[part=toolbar-action][data-action-id=create-chart]:hover{border-color:color-mix(in srgb, var(--_ag-brand) 40%, transparent);background:var(--_ag-brand-softer);color:var(--_ag-brand-strong)}[part=toolbar-action][data-action-id=ask-ai]{background:var(--_ag-brand);border-color:var(--_ag-brand);color:var(--_ag-text-on-brand);font-weight:var(--_ag-fw-semibold)}[part=toolbar-action][data-action-id=ask-ai]:hover{background:var(--_ag-brand-strong);border-color:var(--_ag-brand-strong);color:var(--_ag-text-on-brand)}[part=toolbar-action][data-action-id=ask-ai]:focus-visible{border-color:var(--_ag-brand-strong)}[part=export]{position:relative}[part=export-trigger]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgba(0,0,0,0);border:.0625rem solid rgba(0,0,0,0);color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.125rem;min-inline-size:1.75rem;min-block-size:1.75rem;padding:0 .375rem;border-radius:var(--_ag-radius-sm);transition:background-color var(--_ag-dur-fast) var(--_ag-ease),border-color var(--_ag-dur-fast) var(--_ag-ease),color var(--_ag-dur-fast) var(--_ag-ease)}[part=export-trigger]:hover{background:var(--_ag-brand-softer);color:var(--_ag-brand-strong)}[part=export-trigger]:focus-visible{outline:0;border-color:color-mix(in srgb, var(--_ag-brand) 50%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--_ag-brand) 14%, transparent)}[part=export-icon]{inline-size:1rem;block-size:1rem}[part=export-caret]{inline-size:.75rem;block-size:.75rem;opacity:.65}[part=export-menu]{position:absolute;inset-block-start:calc(100% + 0.25rem);inset-inline-end:0;margin:0;padding:.25rem 0;min-inline-size:11.25rem;background:var(--_ag-surface);color:var(--_ag-text-body);border:.0625rem solid var(--_ag-brand-line);border-radius:var(--_ag-radius-sm);box-shadow:0 .125rem .25rem rgba(0,0,0,.06),0 .375rem 1rem rgba(0,0,0,.12);list-style:none;z-index:calc(var(--z-index-base) + 10)}[part=export-menu][hidden]{display:none}[part=export-menu] li{margin:0;padding:0}[part=export-menu-item]{display:block;inline-size:100%;text-align:start;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgba(0,0,0,0);color:inherit;border:0;margin:0;padding:.5rem .75rem;font:inherit;font-size:.8125rem;cursor:pointer;min-block-size:1.5rem}[part=export-menu-item]:hover{background:var(--_ag-brand-softer);color:var(--_ag-brand-strong)}[part=export-menu-item]:focus-visible{outline:0;background:var(--_ag-brand-soft);box-shadow:inset 0 0 0 .125rem var(--_ag-brand)}@media(forced-colors: active){[part=search-field]:focus-within,[part=toolbar-action]:focus-visible,[part=toolbar-action][data-action-id=ask-ai]:focus-visible,[part=export-trigger]:focus-visible,[part=export-menu-item]:focus-visible{outline:0.125rem solid Highlight;outline-offset:0.0625rem}[part=export-menu-item]:focus-visible{outline-offset:-0.125rem}}`;
 //# sourceMappingURL=toolbar.css.js.map

package/styles/toolbar/toolbar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.css.js","sourceRoot":"","sources":["../../../src/styles/toolbar/toolbar.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,4oLAA4oL,CAAC","sourcesContent":["import { css } from 'lit';\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: 3}:host{--ig-size: 1;grid-row:toolbar-row;display:block;background:var(--igx-header-background, var(--header-background, var(--ag-surface-elevated)));color:var(--igx-header-text-color, var(--header-text-color, var(--ag-text-muted)));border-block-end:1px solid var(--igx-header-border-color, var(--header-border-color, var(--ag-hairline)));z-index:calc(var(--z-index-base) + 4);position:sticky;inset-block-start:0;inset-inline-start:0;box-sizing:border-box;width:var(--apex-host-width, 100%);max-width:var(--apex-host-width, 100%)}[part=toolbar]{display:flex;align-items:center;gap:.5rem;padding:var(--ag-toolbar-pad)}[part=toolbar-search]{flex:1;max-width:22.5rem}[part=search-field]{display:inline-flex;align-items:center;inline-size:100%;block-size:1.875rem;padding:0 .625rem;gap:.375rem;background:var(--ag-surface);color:var(--ag-text-body);border:.0625rem solid var(--ag-brand-line);border-radius:8px;transition:border-color var(--ag-dur-fast) var(--ag-ease),box-shadow var(--ag-dur-fast) var(--ag-ease);box-sizing:border-box}[part=search-field]:focus-within{border-color:color-mix(in srgb, var(--ag-brand) 50%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--ag-brand) 14%, transparent)}[part=search-icon]{inline-size:1rem;block-size:1rem;flex-shrink:0;opacity:.65;color:currentcolor}[part=search-input]{flex:1;min-inline-size:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgba(0,0,0,0);color:inherit;border:0;outline:0;padding:0;margin:0;font:inherit;font-size:var(--ag-fs-cell);line-height:1}[part=search-input]::-moz-placeholder{color:var(--ag-text-subtle);opacity:1}[part=search-input]::placeholder{color:var(--ag-text-subtle);opacity:1}[part=search-input]::-webkit-search-cancel-button,[part=search-input]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}[part=toolbar-actions]{display:inline-flex;align-items:center;gap:.25rem;margin-inline-start:auto}[part=toolbar-action]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:.3125rem;border:.0625rem solid rgba(0,0,0,0);border-radius:var(--ag-radius-sm);background:rgba(0,0,0,0);color:var(--ag-text-body);cursor:pointer;font:inherit;font-size:var(--ag-fs-cell);font-weight:var(--ag-fw-regular);line-height:1;min-block-size:1.75rem;padding:0 .625rem;transition:background-color var(--ag-dur-fast) var(--ag-ease),border-color var(--ag-dur-fast) var(--ag-ease),color var(--ag-dur-fast) var(--ag-ease);white-space:nowrap}[part=toolbar-action]:hover{background:var(--ag-brand-softer);color:var(--ag-brand-strong)}[part=toolbar-action]:focus-visible{outline:0;border-color:color-mix(in srgb, var(--ag-brand) 50%, transparent);box-shadow:0 0 0 .1875rem color-mix(in srgb, var(--ag-brand) 14%, transparent)}[part=toolbar-action][data-action-id=create-chart]{border-color:var(--ag-hairline);font-weight:var(--ag-fw-semibold)}[part=toolbar-action][data-action-id=create-chart]:hover{border-color:color-mix(in srgb, var(--ag-brand) 40%, transparent);background:var(--ag-brand-softer);color:var(--ag-brand-strong)}[part=toolbar-action][data-action-id=ask-ai]{background:var(--ag-brand);border-color:var(--ag-brand);color:var(--ag-text-on-brand);font-weight:var(--ag-fw-semibold)}[part=toolbar-action][data-action-id=ask-ai]:hover{background:var(--ag-brand-strong);border-color:var(--ag-brand-strong);color:var(--ag-text-on-brand)}[part=toolbar-action][data-action-id=ask-ai]:focus-visible{border-color:var(--ag-brand-strong)}[part=export]{position:relative}[part=export-trigger]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgba(0,0,0,0);border:.0625rem solid rgba(0,0,0,0);color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.125rem;min-inline-size:1.75rem;min-block-size:1.75rem;padding:0 .375rem;border-radius:var(--ag-radius-sm);transition:background-color var(--ag-dur-fast) var(--ag-ease),border-color var(--ag-dur-fast) var(--ag-ease),color var(--ag-dur-fast) var(--ag-ease)}[part=export-trigger]:hover{background:var(--ag-brand-softer);color:var(--ag-brand-strong)}[part=export-trigger]:focus-visible{outline:0;border-color:color-mix(in srgb, var(--ag-brand) 50%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--ag-brand) 14%, transparent)}[part=export-icon]{inline-size:1rem;block-size:1rem}[part=export-caret]{inline-size:.75rem;block-size:.75rem;opacity:.65}[part=export-menu]{position:absolute;inset-block-start:calc(100% + 0.25rem);inset-inline-end:0;margin:0;padding:.25rem 0;min-inline-size:11.25rem;background:var(--igx-cell-editor-background, var(--ag-surface));color:var(--ag-text-body);border:.0625rem solid var(--ag-brand-line);border-radius:var(--ag-radius-sm);box-shadow:0 .125rem .25rem rgba(0,0,0,.06),0 .375rem 1rem rgba(0,0,0,.12);list-style:none;z-index:calc(var(--z-index-base) + 10)}[part=export-menu][hidden]{display:none}[part=export-menu] li{margin:0;padding:0}[part=export-menu-item]{display:block;inline-size:100%;text-align:start;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgba(0,0,0,0);color:inherit;border:0;margin:0;padding:.5rem .75rem;font:inherit;font-size:.8125rem;cursor:pointer;min-block-size:1.5rem}[part=export-menu-item]:hover{background:var(--ag-brand-softer);color:var(--ag-brand-strong)}[part=export-menu-item]:focus-visible{outline:0;background:var(--ag-brand-soft);box-shadow:inset 0 0 0 .125rem var(--ag-brand)}`;"]}
+{"version":3,"file":"toolbar.css.js","sourceRoot":"","sources":["../../../src/styles/toolbar/toolbar.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2lLAA2lL,CAAC","sourcesContent":["import { css } from 'lit';\nexport const styles = css`:host{--ig-size: 1;grid-row:toolbar-row;display:block;background:var(--header-background, var(--_ag-surface-elevated));color:var(--header-text-color, var(--_ag-text-muted));border-block-end:1px solid var(--header-border-color, var(--_ag-hairline));z-index:calc(var(--z-index-base) + 4);position:sticky;inset-block-start:0;inset-inline-start:0;box-sizing:border-box;width:var(--apex-host-width, 100%);max-width:var(--apex-host-width, 100%)}[part=toolbar]{display:flex;align-items:center;gap:.5rem;padding:var(--_ag-toolbar-pad)}[part=toolbar-search]{flex:1;max-width:22.5rem}[part=search-field]{display:inline-flex;align-items:center;inline-size:100%;block-size:1.875rem;padding:0 .625rem;gap:.375rem;background:var(--_ag-surface);color:var(--_ag-text-body);border:.0625rem solid var(--_ag-brand-line);border-radius:8px;transition:border-color var(--_ag-dur-fast) var(--_ag-ease),box-shadow var(--_ag-dur-fast) var(--_ag-ease);box-sizing:border-box}[part=search-field]:focus-within{border-color:color-mix(in srgb, var(--_ag-brand) 50%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--_ag-brand) 14%, transparent)}[part=search-icon]{inline-size:1rem;block-size:1rem;flex-shrink:0;opacity:.65;color:currentcolor}[part=search-input]{flex:1;min-inline-size:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgba(0,0,0,0);color:inherit;border:0;outline:0;padding:0;margin:0;font:inherit;font-size:var(--_ag-fs-cell);line-height:1}[part=search-input]::-moz-placeholder{color:var(--_ag-text-subtle);opacity:1}[part=search-input]::placeholder{color:var(--_ag-text-subtle);opacity:1}[part=search-input]::-webkit-search-cancel-button,[part=search-input]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}[part=toolbar-actions]{display:inline-flex;align-items:center;gap:.25rem;margin-inline-start:auto}[part=toolbar-action]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:.3125rem;border:.0625rem solid rgba(0,0,0,0);border-radius:var(--_ag-radius-sm);background:rgba(0,0,0,0);color:var(--_ag-text-body);cursor:pointer;font:inherit;font-size:var(--_ag-fs-cell);font-weight:var(--_ag-fw-regular);line-height:1;min-block-size:1.75rem;padding:0 .625rem;transition:background-color var(--_ag-dur-fast) var(--_ag-ease),border-color var(--_ag-dur-fast) var(--_ag-ease),color var(--_ag-dur-fast) var(--_ag-ease);white-space:nowrap}[part=toolbar-action]:hover{background:var(--_ag-brand-softer);color:var(--_ag-brand-strong)}[part=toolbar-action]:focus-visible{outline:0;border-color:color-mix(in srgb, var(--_ag-brand) 50%, transparent);box-shadow:0 0 0 .1875rem color-mix(in srgb, var(--_ag-brand) 14%, transparent)}[part=toolbar-action][data-action-id=create-chart]{border-color:var(--_ag-hairline);font-weight:var(--_ag-fw-semibold)}[part=toolbar-action][data-action-id=create-chart]:hover{border-color:color-mix(in srgb, var(--_ag-brand) 40%, transparent);background:var(--_ag-brand-softer);color:var(--_ag-brand-strong)}[part=toolbar-action][data-action-id=ask-ai]{background:var(--_ag-brand);border-color:var(--_ag-brand);color:var(--_ag-text-on-brand);font-weight:var(--_ag-fw-semibold)}[part=toolbar-action][data-action-id=ask-ai]:hover{background:var(--_ag-brand-strong);border-color:var(--_ag-brand-strong);color:var(--_ag-text-on-brand)}[part=toolbar-action][data-action-id=ask-ai]:focus-visible{border-color:var(--_ag-brand-strong)}[part=export]{position:relative}[part=export-trigger]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgba(0,0,0,0);border:.0625rem solid rgba(0,0,0,0);color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.125rem;min-inline-size:1.75rem;min-block-size:1.75rem;padding:0 .375rem;border-radius:var(--_ag-radius-sm);transition:background-color var(--_ag-dur-fast) var(--_ag-ease),border-color var(--_ag-dur-fast) var(--_ag-ease),color var(--_ag-dur-fast) var(--_ag-ease)}[part=export-trigger]:hover{background:var(--_ag-brand-softer);color:var(--_ag-brand-strong)}[part=export-trigger]:focus-visible{outline:0;border-color:color-mix(in srgb, var(--_ag-brand) 50%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--_ag-brand) 14%, transparent)}[part=export-icon]{inline-size:1rem;block-size:1rem}[part=export-caret]{inline-size:.75rem;block-size:.75rem;opacity:.65}[part=export-menu]{position:absolute;inset-block-start:calc(100% + 0.25rem);inset-inline-end:0;margin:0;padding:.25rem 0;min-inline-size:11.25rem;background:var(--_ag-surface);color:var(--_ag-text-body);border:.0625rem solid var(--_ag-brand-line);border-radius:var(--_ag-radius-sm);box-shadow:0 .125rem .25rem rgba(0,0,0,.06),0 .375rem 1rem rgba(0,0,0,.12);list-style:none;z-index:calc(var(--z-index-base) + 10)}[part=export-menu][hidden]{display:none}[part=export-menu] li{margin:0;padding:0}[part=export-menu-item]{display:block;inline-size:100%;text-align:start;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgba(0,0,0,0);color:inherit;border:0;margin:0;padding:.5rem .75rem;font:inherit;font-size:.8125rem;cursor:pointer;min-block-size:1.5rem}[part=export-menu-item]:hover{background:var(--_ag-brand-softer);color:var(--_ag-brand-strong)}[part=export-menu-item]:focus-visible{outline:0;background:var(--_ag-brand-soft);box-shadow:inset 0 0 0 .125rem var(--_ag-brand)}@media(forced-colors: active){[part=search-field]:focus-within,[part=toolbar-action]:focus-visible,[part=toolbar-action][data-action-id=ask-ai]:focus-visible,[part=export-trigger]:focus-visible,[part=export-menu-item]:focus-visible{outline:0.125rem solid Highlight;outline-offset:0.0625rem}[part=export-menu-item]:focus-visible{outline-offset:-0.125rem}}`;"]}

package/tokens.css

@@ -0,0 +1,78 @@
+/*
+ * apex-grid design token defaults (`--ag-*`), on `:where(:root)`.
+ *
+ * The grid adopts these into the document by itself. Import this file only
+ * if you opted out with `setup({ tokenStyles: false })` or render on the
+ * server. Zero specificity: a value set on any element wins.
+ */
+:where(:root) {
+  --ag-hairline: rgba(15, 23, 42, 0.08);
+  --ag-border: rgba(15, 23, 42, 0.08);
+  --ag-pin-line: rgba(15, 23, 42, 0.18);
+  --ag-header-separator: rgba(15, 23, 42, 0.12);
+  --ag-grid-bg: #fff;
+  --ag-surface: #fff;
+  --ag-surface-elevated: #f8f9fb;
+  --ag-text: #111827;
+  --ag-text-body: #1f2937;
+  --ag-text-muted: #6b7280;
+  --ag-text-subtle: #9ca3af;
+  --ag-text-on-brand: #fff;
+  --ag-good: #10b981;
+  --ag-good-text: #047857;
+  --ag-good-soft: rgba(16, 185, 129, 0.1);
+  --ag-watch: #f59e0b;
+  --ag-watch-text: #b45309;
+  --ag-watch-soft: rgba(245, 158, 11, 0.1);
+  --ag-risk: #ef4444;
+  --ag-risk-text: #b91c1c;
+  --ag-risk-soft: rgba(239, 68, 68, 0.1);
+  --ag-gold: #fef3c7;
+  --ag-gold-line: #fde68a;
+  --ag-gold-text: #92400e;
+  --ag-shadow-card: 0 16px 38px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
+  --ag-font: Inter, -apple-system, blinkmacsystemfont, sans-serif;
+  --ag-fs-cell: 13px;
+  --ag-fs-cell-secondary: 11.5px;
+  --ag-fs-tiny: 10px;
+  --ag-fw-regular: 500;
+  --ag-fw-semibold: 600;
+  --ag-fw-bold: 700;
+  --ag-tracking-tight: -0.005em;
+  --ag-tracking-header: 0.05em;
+  --ag-leading: 1.4;
+  --ag-cell-pad-x: 10px;
+  --ag-row-h: 36px;
+  --ag-header-h: 40px;
+  --ag-toolbar-pad: 12px 14px;
+  --ag-footer-pad: 10px 14px;
+  --ag-radius: 8px;
+  --ag-radius-sm: 6px;
+  --ag-radius-xs: 4px;
+  --ag-radius-pill: 20px;
+  --ag-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ag-dur-fast: 120ms;
+  --ag-dur-med: 180ms;
+  --ag-dur-slow: 240ms;
+  --ag-dark-grid-bg: #0f172a;
+  --ag-dark-surface: #0f172a;
+  --ag-dark-surface-elevated: #1e2532;
+  --ag-dark-hairline: rgba(255, 255, 255, 0.12);
+  --ag-dark-border: rgba(255, 255, 255, 0.12);
+  --ag-dark-pin-line: rgba(255, 255, 255, 0.28);
+  --ag-dark-header-separator: rgba(255, 255, 255, 0.18);
+  --ag-dark-text: #f1f5f9;
+  --ag-dark-text-body: #e2e8f0;
+  --ag-dark-text-muted: #94a3b8;
+  --ag-dark-text-subtle: #64748b;
+  --ag-dark-good-text: #34d399;
+  --ag-dark-good-soft: rgba(16, 185, 129, 0.18);
+  --ag-dark-watch-text: #fbbf24;
+  --ag-dark-watch-soft: rgba(245, 158, 11, 0.18);
+  --ag-dark-risk-text: #f87171;
+  --ag-dark-risk-soft: rgba(239, 68, 68, 0.18);
+  --ag-dark-gold: rgba(245, 158, 11, 0.16);
+  --ag-dark-gold-line: rgba(245, 158, 11, 0.35);
+  --ag-dark-gold-text: #fcd34d;
+  --ag-dark-shadow-card: 0 16px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
+}

package/LICENSE

@@ -1,80 +0,0 @@
-## 📄 License Options for ApexCharts
-
-ApexCharts is offered under a **dual-license model** to support individuals, startups, and commercial products of all sizes.
-
----
-
-### 🔓 Community License (Free)
-
-For individuals, non-profits, educators, and small businesses with **less than $2 million USD in annual revenue**.
-
-✅ What’s allowed:
-
-- Personal, educational, or non-profit use
-- Commercial use by small orgs (< $2M annual revenue)
-- Modifications and redistribution (with attribution)
-
-🚫 Not allowed:
-
-- Use by companies or entities over $2M/year revenue
-- Use in competing charting products
-- Sublicensing under different terms
-
-➡ By using ApexCharts under this license, you confirm that **you qualify as a Small Organization**.
-
----
-
-### 💼 Commercial License (Paid)
-
-Required if **you or your affiliated organization earns $2 million USD or more per year**.
-
-✅ What's included:
-
-- Use in internal tools and commercial applications
-- Modifications and app-level distribution
-- 12-month subscription with updates & support
-
-🚫 Not allowed:
-
-- Redistribution in toolkits, SDKs, or platforms
-- Use by unlicensed developers
-- Competing charting products
-
----
-
-### 🔄 OEM / Redistribution License (Paid)
-
-Required if you are **embedding ApexCharts into a product or platform used by other people**, such as:
-
-- No-code dashboards
-- Developer platforms
-- Embedded BI tools
-- White-labeled apps or SDKs
-
-✅ What's included:
-
-- Redistribution rights for 1 application or product
-- 12-month subscription with updates & support
-
-✅ OEM **not required** if your app simply renders static charts and users **cannot** configure or interact with them.
-
----
-
-### ⚠️ License Acceptance
-
-By installing ApexCharts (e.g., via `npm install apexcharts`), you are agreeing to the applicable license based on your usage:
-
-- Community License (if under $2M revenue)
-- Commercial License (if over $2M revenue)
-- OEM License (if redistributing to third-party users)
-
----
-
-### 🛠 Need a License or Have Questions?
-
-📧 Contact us at [sales@apexcharts.com](mailto:sales@apexcharts.com)  
-📚 Read full license agreements here: [https://apexcharts.com/license](https://apexcharts.com/license)
-
----
-
-Thank you for supporting ApexCharts! Your licensing helps keep it free and open for individuals and small teams.

package/docs/media/LICENSE

@@ -1,80 +0,0 @@
-## 📄 License Options for ApexCharts
-
-ApexCharts is offered under a **dual-license model** to support individuals, startups, and commercial products of all sizes.
-
----
-
-### 🔓 Community License (Free)
-
-For individuals, non-profits, educators, and small businesses with **less than $2 million USD in annual revenue**.
-
-✅ What’s allowed:
-
-- Personal, educational, or non-profit use
-- Commercial use by small orgs (< $2M annual revenue)
-- Modifications and redistribution (with attribution)
-
-🚫 Not allowed:
-
-- Use by companies or entities over $2M/year revenue
-- Use in competing charting products
-- Sublicensing under different terms
-
-➡ By using ApexCharts under this license, you confirm that **you qualify as a Small Organization**.
-
----
-
-### 💼 Commercial License (Paid)
-
-Required if **you or your affiliated organization earns $2 million USD or more per year**.
-
-✅ What's included:
-
-- Use in internal tools and commercial applications
-- Modifications and app-level distribution
-- 12-month subscription with updates & support
-
-🚫 Not allowed:
-
-- Redistribution in toolkits, SDKs, or platforms
-- Use by unlicensed developers
-- Competing charting products
-
----
-
-### 🔄 OEM / Redistribution License (Paid)
-
-Required if you are **embedding ApexCharts into a product or platform used by other people**, such as:
-
-- No-code dashboards
-- Developer platforms
-- Embedded BI tools
-- White-labeled apps or SDKs
-
-✅ What's included:
-
-- Redistribution rights for 1 application or product
-- 12-month subscription with updates & support
-
-✅ OEM **not required** if your app simply renders static charts and users **cannot** configure or interact with them.
-
----
-
-### ⚠️ License Acceptance
-
-By installing ApexCharts (e.g., via `npm install apexcharts`), you are agreeing to the applicable license based on your usage:
-
-- Community License (if under $2M revenue)
-- Commercial License (if over $2M revenue)
-- OEM License (if redistributing to third-party users)
-
----
-
-### 🛠 Need a License or Have Questions?
-
-📧 Contact us at [sales@apexcharts.com](mailto:sales@apexcharts.com)  
-📚 Read full license agreements here: [https://apexcharts.com/license](https://apexcharts.com/license)
-
----
-
-Thank you for supporting ApexCharts! Your licensing helps keep it free and open for individuals and small teams.

package/docs/media/_tokens.scss

@@ -1,193 +0,0 @@
-// ─────────────────────────────────────────────────────────────────────────
-// Premium default design tokens (`--ag-*`).
-// These land on the `<apex-grid>` host (this file is `@use`d by
-// `grid/_grid.base.scss`, which ships inside every theme). CSS custom
-// properties inherit across shadow boundaries, so every child component
-// (`apex-grid-row`, `apex-grid-cell`, `apex-grid-header`, …) can read them.
-// This is the single rebrand surface: override ~12 values on `apex-grid` and
-// the whole grid re-skins. Values fall back to self-contained literals, so a
-// grid mounted with zero consumer CSS already looks premium; the brand tokens
-// additionally re-tint from the igniteui palette when it is present.
-// No `!important`, no downstream hardcoded numerics — every rule resolves here.
-// ─────────────────────────────────────────────────────────────────────────
-
-:host {
-    // ── Brand ────────────────────────────────────────────────────────────
-    // Re-tints from the igniteui palette when its CSS is loaded (so the grid
-    // auto-matches an igniteui host app), and falls back to the self-contained
-    // premium blue otherwise. This igniteui hook used to live in the per-theme
-    // files; folding it here keeps that integration without named themes.
-    --ag-brand: var(--ig-primary-500, #0d6fd3); /* primary blue */
-    --ag-brand-strong: var(--ig-primary-700, #0a56b8); /* hover / pressed */
-
-    // Brand-derived washes are mixed from `--ag-brand` so a one-line rebrand
-    // cascades to every tint. With the default brand these resolve to the
-    // spec's exact rgba(13, 111, 211, …) values.
-    --ag-brand-soft: color-mix(in srgb, var(--ag-brand) 10%, transparent); /* selected row / chip wash */
-    --ag-brand-softer: color-mix(in srgb, var(--ag-brand) 7%, transparent); /* chip / control wash */
-    --ag-brand-line: color-mix(in srgb, var(--ag-brand) 18%, transparent); /* chip / search borders */
-
-    // ── Neutral chrome ───────────────────────────────────────────────────
-    // The grid's chrome (surfaces, gridlines, row hover) is grayscale so the
-    // grid reads as a calm, neutral table; `--ag-brand` is reserved for genuine
-    // state (selection, focus, checkboxes, active sort) and accents (chips).
-    --ag-hairline: rgb(15 23 42 / 8%); /* header / structural gridlines */
-    --ag-border: rgb(15 23 42 / 8%); /* row separators — same weight as hairline */
-    --ag-pin-line: rgb(15 23 42 / 18%); /* 1px vertical line at pinned-column edge */
-    --ag-header-separator: rgb(15 23 42 / 12%); /* opt-in per-column header divider (columnSeparator) */
-    --ag-row-hover: color-mix(in srgb, #0f172a 5%, var(--ag-surface)); /* neutral hover wash (opaque) */
-
-    // ── Surfaces ─────────────────────────────────────────────────────────
-    // These back sticky/pinned regions (header, footer, frozen columns) which
-    // paint `background: inherit` to mask content scrolling underneath, so they
-    // MUST be opaque — a translucent surface lets the scrolled content bleed
-    // through.
-    // Host card background. Kept as its own token (rather than reusing
-    // `--ag-surface`) so the default can carry the subtle premium light
-    // gradient while sticky surfaces stay flat/opaque. Dark themes override it
-    // with a flat color. The host paints THIS, so dark mode is impossible
-    // without it being a token.
-    --ag-grid-bg: #fff; /* flat white — gradients are dated in modern data grids */
-    --ag-surface: #fff; /* grid card background */
-    --ag-surface-alt: var(--ag-surface); /* no zebra stripes — rely on hover + hairline borders */
-    --ag-surface-elevated: #f8f9fb; /* flat header/toolbar/footer surface */
-
-    // ── Text ─────────────────────────────────────────────────────────────
-    --ag-text: #111827; /* primary */
-    --ag-text-body: #1f2937; /* row text */
-    --ag-text-muted: #6b7280; /* roles, labels */
-    --ag-text-subtle: #9ca3af; /* placeholder, ellipsis */
-    --ag-text-on-brand: #fff;
-
-    // ── State ────────────────────────────────────────────────────────────
-    --ag-good: #10b981; /* health > 80, Active */
-    --ag-good-text: #047857;
-    --ag-good-soft: rgb(16 185 129 / 10%);
-    --ag-watch: #f59e0b; /* health 65–80, Trial */
-    --ag-watch-text: #b45309;
-    --ag-watch-soft: rgb(245 158 11 / 10%);
-    --ag-risk: #ef4444; /* health < 65, Churn */
-    --ag-risk-text: #b91c1c;
-    --ag-risk-soft: rgb(239 68 68 / 10%);
-    --ag-gold: #fef3c7; /* Enterprise pill bg */
-    --ag-gold-line: #fde68a;
-    --ag-gold-text: #92400e;
-    --ag-shadow-card:
-        0 16px 38px rgb(15 23 42 / 12%),
-        0 0 0 1px rgb(15 23 42 / 6%),
-        0 1px 0 rgb(255 255 255 / 90%) inset; /* soft neutral floating shadow */
-
-    // ── Typography ───────────────────────────────────────────────────────
-    --ag-font: 'Inter', -apple-system, blinkmacsystemfont, sans-serif;
-    --ag-fs-cell: 13px;
-    --ag-fs-cell-secondary: 11.5px; /* role line, header labels */
-    --ag-fs-tiny: 10px; /* tags, page ellipsis */
-    --ag-fw-regular: 500;
-    --ag-fw-semibold: 600;
-    --ag-fw-bold: 700;
-    --ag-tracking-tight: -0.005em;
-    --ag-tracking-header: 0.05em; /* uppercase header labels */
-    --ag-leading: 1.4;
-
-    // ── Spacing & sizing ─────────────────────────────────────────────────
-    --ag-cell-pad-x: 10px;
-    --ag-row-h: 36px; /* dense but readable */
-    --ag-header-h: 40px; /* taller than rows to accommodate 3-icon header */
-    --ag-toolbar-pad: 12px 14px;
-    --ag-footer-pad: 10px 14px;
-    --ag-radius: 8px; /* outer card — tighter matches modern table libraries */
-    --ag-radius-sm: 6px; /* chips, page buttons */
-    --ag-radius-xs: 4px; /* checkboxes, expand button */
-    --ag-radius-pill: 20px; /* status badges */
-
-    // ── Motion ───────────────────────────────────────────────────────────
-    --ag-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
-    --ag-dur-fast: 120ms; /* hover, focus */
-    --ag-dur-med: 180ms; /* chevron rotate */
-    --ag-dur-slow: 240ms; /* health bar fill */
-}
-
-// ─────────────────────────────────────────────────────────────────────────
-// Built-in dark theme. Opt in with `<apex-grid theme="dark">`.
-// Only color/surface tokens are flipped to a neutral slate palette; geometry,
-// typography, motion, and the brand hue (which still auto-tints from the
-// igniteui palette when present) are inherited from the light block above.
-// `theme~='dark'` matches a space-separated word so `theme="dark compact"`
-// style stacking keeps working. These tokens inherit across the shadow
-// boundary to every child component, so the whole grid re-skins from here.
-// ─────────────────────────────────────────────────────────────────────────
-:host([theme~='dark']) {
-    // ── Brand ── brighter fallbacks so the accent reads on a dark surface;
-    // still re-tints from the igniteui palette first when it is present.
-    --ag-brand: var(--ig-primary-500, #3b82f6);
-    --ag-brand-strong: var(--ig-primary-400, #60a5fa);
-
-    // ── Surfaces ── flat, opaque slate (sticky regions paint these).
-    --ag-grid-bg: #0f172a; /* host card (flat in dark) */
-    --ag-surface: #0f172a; /* grid body / row bg */
-    --ag-surface-alt: var(--ag-surface); /* no stripes in dark mode either */
-    --ag-surface-elevated: #1e2532; /* header / footer / toolbar — slightly lifted */
-
-    // ── Chrome ── light-on-dark gridlines + a hover wash that mixes toward
-    // white (the light default mixes toward #0f172a, which is invisible here).
-    --ag-hairline: rgb(255 255 255 / 12%); /* structural gridlines */
-    --ag-border: rgb(255 255 255 / 12%); /* row separators — same weight as hairline */
-    --ag-pin-line: rgb(255 255 255 / 28%); /* 1px vertical line at pinned-column edge */
-    --ag-header-separator: rgb(255 255 255 / 18%); /* opt-in per-column header divider (columnSeparator) */
-    --ag-row-hover: color-mix(in srgb, #fff 7%, var(--ag-surface));
-
-    // ── Text ──
-    --ag-text: #f1f5f9; /* primary */
-    --ag-text-body: #e2e8f0; /* row text */
-    --ag-text-muted: #94a3b8; /* roles, labels */
-    --ag-text-subtle: #64748b; /* placeholder, ellipsis */
-
-    // ── State ── brighter text + slightly stronger washes for legibility on
-    // the dark surface.
-    --ag-good-text: #34d399;
-    --ag-good-soft: rgb(16 185 129 / 18%);
-    --ag-watch-text: #fbbf24;
-    --ag-watch-soft: rgb(245 158 11 / 18%);
-    --ag-risk-text: #f87171;
-    --ag-risk-soft: rgb(239 68 68 / 18%);
-    --ag-gold: rgb(245 158 11 / 16%); /* Enterprise pill bg (dark amber wash) */
-    --ag-gold-line: rgb(245 158 11 / 35%);
-    --ag-gold-text: #fcd34d;
-
-    // Drop the light-mode white inset highlight; deepen the drop shadow.
-    --ag-shadow-card:
-        0 16px 38px rgb(0 0 0 / 55%),
-        0 0 0 1px rgb(255 255 255 / 6%),
-        0 1px 0 rgb(255 255 255 / 4%) inset;
-}
-
-// ─────────────────────────────────────────────────────────────────────────
-// Optional brand-tinted chrome. Opt in with `theme="tinted"` (composes with
-// dark as `theme="dark tinted"`).
-// By default the chrome is neutral grayscale and `--ag-brand` only shows on
-// interactive state (selection, focus, active sort). This variant mixes a
-// little brand into the surfaces/gridlines so the grid wears its brand even
-// at rest, a brand-tinted variant. Because every value is `color-mix(... var
-// (--ag-brand) ...)`, it follows whatever brand is in effect (including the
-// igniteui auto-tint) with no per-brand CSS.
-// The light variant mixes into the white neutrals; the dark variant (higher
-// specificity, so it wins under `theme="dark tinted"`) mixes the SAME token
-// set into the slate neutrals. Body row surface stays untinted for legibility.
-// ─────────────────────────────────────────────────────────────────────────
-:host([theme~='tinted']) {
-    --ag-surface-alt: color-mix(in srgb, var(--ag-brand) 4%, #fff); /* zebra */
-    --ag-surface-elevated: color-mix(in srgb, var(--ag-brand) 11%, #fbfcfd); /* header / footer / toolbar */
-    --ag-hairline: color-mix(in srgb, var(--ag-brand) 24%, rgb(15 23 42 / 7%)); /* gridlines */
-    --ag-border: color-mix(in srgb, var(--ag-brand) 12%, transparent); /* row separators */
-    --ag-row-hover: color-mix(in srgb, var(--ag-brand) 9%, var(--ag-surface));
-    --ag-text-muted: color-mix(in srgb, var(--ag-brand) 32%, #6b7280); /* header labels pick up the brand */
-}
-
-:host([theme~='dark'][theme~='tinted']) {
-    --ag-surface-alt: color-mix(in srgb, var(--ag-brand) 10%, #172033);
-    --ag-surface-elevated: color-mix(in srgb, var(--ag-brand) 20%, #1e293b);
-    --ag-hairline: color-mix(in srgb, var(--ag-brand) 30%, rgb(255 255 255 / 12%));
-    --ag-border: color-mix(in srgb, var(--ag-brand) 16%, rgb(255 255 255 / 7%));
-    --ag-row-hover: color-mix(in srgb, var(--ag-brand) 12%, var(--ag-surface));
-    --ag-text-muted: color-mix(in srgb, var(--ag-brand) 28%, #94a3b8);
-}