@neovici/cosmoz-queue 2.11.4 → 3.0.0-beta.0

package/dist/list/more/render-more.d.ts

@@ -1,8 +1,9 @@
 import '@neovici/cosmoz-spinner';
 export declare const style: string;
-export declare const renderLoadMore: ({ loading, data$, onMore, }: {
+export declare const renderLoadMore: ({ loading, data$, hasItems, onMore, }: {
     loading?: boolean;
     data$?: PromiseLike<unknown>;
+    hasItems?: boolean;
     onMore?: () => void;
 }) => import("lit-html").TemplateResult<1>;
 //# sourceMappingURL=render-more.d.ts.map

package/dist/list/more/render-more.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render-more.d.ts","sourceRoot":"","sources":["../../../src/list/more/render-more.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAOjC,eAAO,MAAM,KAAK,QAcjB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,6BAI5B;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,yCAkBU,CAAC"}
+{"version":3,"file":"render-more.d.ts","sourceRoot":"","sources":["../../../src/list/more/render-more.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAOjC,eAAO,MAAM,KAAK,QAcjB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,uCAK5B;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,yCAkBU,CAAC"}

package/dist/list/more/render-more.js

@@ -19,13 +19,13 @@ export const style = css `
 		color: var(--secondary-text-color);
 	}
 `;
-export const renderLoadMore = ({ loading, data$, onMore, }) => html `<button
+export const renderLoadMore = ({ loading, data$, hasItems, onMore, }) => html `<button
 		class="more"
 		slot="extraContent"
 		?hidden="${!onMore}"
 		@click="${onMore}"
 	>
 		${when(loading, () => html `<cosmoz-spinner></cosmoz-spinner>`)}
-		${when(data$, (data$) => until(data$.then(() => nothing, () => nothing), html `<cosmoz-spinner></cosmoz-spinner>`))}
+		${when(hasItems && data$, (data$) => until(data$.then(() => nothing, () => nothing), html `<cosmoz-spinner></cosmoz-spinner>`))}
 		<span>${t('Load more')}</span>
 	</button>`;

package/dist/list/render-list-core.d.ts

@@ -20,7 +20,7 @@ export interface RenderListCoreProps<TItem extends object> {
 export interface RenderListCore<TColumns extends Columns, TItem extends object> extends UseListCoreResult<TColumns, TItem>, RenderListCoreProps<TItem> {
 }
 export declare const renderColumns: <T extends Columns>(columns: T) => import("../types/lit").LitRenderable[];
-export declare const renderListCore: <TColumns extends Columns, TItem extends object>({ settingsId, hashParam, enabledColumns, csvFilename, exposedParts, data$, noLocal, miniBreakpoint, sortOn, setSortOn, descending, setDescending, groupOn, setGroupOn, selectedItems, setSelectedItems, setVisibleItems, setFilters, setIsMini, columns, actions, dialog, open, content, loadMore, compareItemsFn, }: RenderListCore<TColumns, TItem>) => import("lit-html/directive.js").DirectiveResult<new (_partInfo: import("lit-html/directive.js").PartInfo) => import("lit-html/directives/until.js").UntilDirective<import("lit-html").TemplateResult<1> | Promise<symbol | {
+export declare const renderListCore: <TColumns extends Columns, TItem extends object>({ settingsId, hashParam, enabledColumns, csvFilename, exposedParts, data$, noLocal, miniBreakpoint, sortOn, setSortOn, descending, setDescending, groupOn, setGroupOn, selectedItems, setSelectedItems, setVisibleItems, hasItems, setFilters, setIsMini, columns, actions, dialog, open, content, loadMore, compareItemsFn, }: RenderListCore<TColumns, TItem>) => import("lit-html/directive.js").DirectiveResult<new (_partInfo: import("lit-html/directive.js").PartInfo) => import("lit-html/directives/until.js").UntilDirective<import("lit-html").TemplateResult<1> | Promise<symbol | {
     toString(): string;
 } | readonly import("@neovici/cosmoz-form").Renderable[] | null | undefined>>>[];
 //# sourceMappingURL=render-list-core.d.ts.map

package/dist/list/render-list-core.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render-list-core.d.ts","sourceRoot":"","sources":["../../src/list/render-list-core.ts"],"names":[],"mappings":"AACA,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAKrD,OAAO,EAAE,MAAM,EAAiB,MAAM,YAAY,CAAC;AACnD,OAAO,KAAK,EAAU,OAAO,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,MAAM,WAAW,mBAAmB,CAAC,KAAK,SAAS,MAAM;IACxD,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,OAAO,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,aAAa,EAAE,KAAK,EAAE,CAAA;KAAE,KAAK,UAAU,CAAC;IAC3D,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,OAAO,CAAC;CACjD;AAED,MAAM,WAAW,cAAc,CAAC,QAAQ,SAAS,OAAO,EAAE,KAAK,SAAS,MAAM,CAC7E,SAAQ,iBAAiB,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC;CAAG;AAE1E,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,OAAO,EAAE,SAAS,CAAC,2CAGzD,CAAC;AAEH,eAAO,MAAM,cAAc,GAAI,QAAQ,SAAS,OAAO,EAAE,KAAK,SAAS,MAAM,EAAE,sTAgC5E,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC;;gFA0CjC,CAAC"}
+{"version":3,"file":"render-list-core.d.ts","sourceRoot":"","sources":["../../src/list/render-list-core.ts"],"names":[],"mappings":"AACA,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAKrD,OAAO,EAAE,MAAM,EAAiB,MAAM,YAAY,CAAC;AACnD,OAAO,KAAK,EAAU,OAAO,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,MAAM,WAAW,mBAAmB,CAAC,KAAK,SAAS,MAAM;IACxD,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,OAAO,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,aAAa,EAAE,KAAK,EAAE,CAAA;KAAE,KAAK,UAAU,CAAC;IAC3D,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,OAAO,CAAC;CACjD;AAED,MAAM,WAAW,cAAc,CAAC,QAAQ,SAAS,OAAO,EAAE,KAAK,SAAS,MAAM,CAC7E,SAAQ,iBAAiB,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC;CAAG;AAE1E,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,OAAO,EAAE,SAAS,CAAC,2CAGzD,CAAC;AAEH,eAAO,MAAM,cAAc,GAAI,QAAQ,SAAS,OAAO,EAAE,KAAK,SAAS,MAAM,EAAE,gUAiC5E,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC;;gFA0CjC,CAAC"}

package/dist/list/render-list-core.js

@@ -8,7 +8,7 @@ import { when } from 'lit-html/directives/when.js';
 import { renderActions } from '../actions';
 import { renderLoadMore } from './more/render-more';
 export const renderColumns = (columns) => Object.entries(columns).map(([name, column]) => column.render({ ...column, name }));
-export const renderListCore = ({ settingsId, hashParam, enabledColumns, csvFilename, exposedParts, data$, noLocal = true, miniBreakpoint, sortOn, setSortOn, descending, setDescending, groupOn, setGroupOn, selectedItems, setSelectedItems, setVisibleItems, setFilters, setIsMini, columns, actions, dialog, open, content, loadMore, compareItemsFn, }) => [
+export const renderListCore = ({ settingsId, hashParam, enabledColumns, csvFilename, exposedParts, data$, noLocal = true, miniBreakpoint, sortOn, setSortOn, descending, setDescending, groupOn, setGroupOn, selectedItems, setSelectedItems, setVisibleItems, hasItems, setFilters, setIsMini, columns, actions, dialog, open, content, loadMore, compareItemsFn, }) => [
     html `<cosmoz-omnitable
 		id="omnitable"
 		?no-local=${noLocal}
@@ -37,7 +37,7 @@ export const renderListCore = ({ settingsId, hashParam, enabledColumns, csvFilen
         renderColumns(columns),
         when(actions, renderActions({ open, items: selectedItems, slot: 'actions' })),
         content?.({ selectedItems }),
-        renderLoadMore({ data$, onMore: loadMore }),
+        renderLoadMore({ data$, onMore: loadMore, hasItems }),
     ]}</cosmoz-omnitable
 	>`,
     formDialog$(dialog),

package/dist/list/use-list-core.d.ts

@@ -19,6 +19,8 @@ export interface UseListCore<TColumns extends Columns, TParams extends object, T
 type UseFormDialogable$ = ReturnType<typeof useFormDialogable$>;
 export interface UseListCoreResult<TColumns extends Columns, TItem extends object = object, TParams extends object = object> extends ListCoreState<TItem, TColumns>, Pick<UseFormDialogable$, 'dialog' | 'open'> {
     data$: PromiseLike<TItem[]>;
+    visibleItems: TItem[];
+    hasItems: boolean;
     columns: TColumns;
     params: TParams;
     paramsMeta: TParams;

package/dist/list/use-list-core.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-list-core.d.ts","sourceRoot":"","sources":["../../src/list/use-list-core.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG1D,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACpE,OAAO,EAAE,MAAM,EAAW,MAAM,iBAAiB,CAAC;AAClD,OAAO,EACN,gBAAgB,EAChB,aAAa,EAEb,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,aAAa,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACxB,OAAO,EAAE,CAAC,CAAC;IACX,OAAO,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW,CAC3B,QAAQ,SAAS,OAAO,EACxB,OAAO,SAAS,MAAM,EACtB,KAAK,SAAS,MAAM,CACnB,SAAQ,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,SAAS,CAAC,CAAC,IAAI,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;IACzE,OAAO,EAAE,SAAS,CAAC,CAAC,IAAI,EAAE;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC;IAC3E,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;CACpD;AAED,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAEhE,MAAM,WAAW,iBAAiB,CACjC,QAAQ,SAAS,OAAO,EACxB,KAAK,SAAS,MAAM,GAAG,MAAM,EAC7B,OAAO,SAAS,MAAM,GAAG,MAAM,CAE/B,SACC,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,EAC9B,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5C,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC;IAC5B,OAAO,EAAE,QAAQ,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACnC;AAED,eAAO,MAAM,WAAW,GACvB,QAAQ,SAAS,OAAO,EACxB,OAAO,SAAS,MAAM,EACtB,KAAK,SAAS,MAAM,EACnB,kJAQC,WAAW,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,KAAG,iBAAiB,CAC3D,QAAQ,EACR,KAAK,EACL,OAAO,CAgDP,CAAC"}
+{"version":3,"file":"use-list-core.d.ts","sourceRoot":"","sources":["../../src/list/use-list-core.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG1D,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACpE,OAAO,EAAE,MAAM,EAAW,MAAM,iBAAiB,CAAC;AAClD,OAAO,EACN,gBAAgB,EAChB,aAAa,EAEb,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,aAAa,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACxB,OAAO,EAAE,CAAC,CAAC;IACX,OAAO,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW,CAC3B,QAAQ,SAAS,OAAO,EACxB,OAAO,SAAS,MAAM,EACtB,KAAK,SAAS,MAAM,CACnB,SAAQ,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,SAAS,CAAC,CAAC,IAAI,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;IACzE,OAAO,EAAE,SAAS,CAAC,CAAC,IAAI,EAAE;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC;IAC3E,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;CACpD;AAED,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAEhE,MAAM,WAAW,iBAAiB,CACjC,QAAQ,SAAS,OAAO,EACxB,KAAK,SAAS,MAAM,GAAG,MAAM,EAC7B,OAAO,SAAS,MAAM,GAAG,MAAM,CAE/B,SACC,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,EAC9B,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5C,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC;IAC5B,YAAY,EAAE,KAAK,EAAE,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,QAAQ,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACnC;AAED,eAAO,MAAM,WAAW,GACvB,QAAQ,SAAS,OAAO,EACxB,OAAO,SAAS,MAAM,EACtB,KAAK,SAAS,MAAM,EACnB,kJAQC,WAAW,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,KAAG,iBAAiB,CAC3D,QAAQ,EACR,KAAK,EACL,OAAO,CAgDP,CAAC"}

package/dist/list/use-list-state.d.ts

@@ -14,9 +14,11 @@ export declare const useListCoreState: <TItem extends object, TColumns extends o
     setSortOn: import("@pionjs/pion").StateUpdater<ColumnNames<TColumns> | undefined>;
     groupOn: ColumnNames<TColumns> | undefined;
     setGroupOn: import("@pionjs/pion").StateUpdater<ColumnNames<TColumns> | undefined>;
+    visibleItems: TItem[];
+    setVisibleItems: import("@pionjs/pion").StateUpdater<TItem[]>;
+    hasItems: boolean;
     selectedItems: TItem[];
     setSelectedItems: import("@pionjs/pion").StateUpdater<TItem[]>;
-    setVisibleItems: import("@pionjs/pion").StateUpdater<TItem[]>;
     setTotalAvailable: import("@pionjs/pion").StateUpdater<number | undefined>;
     isMini: boolean;
     setIsMini: import("@pionjs/pion").StateUpdater<boolean>;

package/dist/list/use-list-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-list-state.d.ts","sourceRoot":"","sources":["../../src/list/use-list-state.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEtD,MAAM,WAAW,gBAAgB,CAAC,QAAQ,SAAS,MAAM;IACxD,OAAO,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,GAAI,KAAK,SAAS,MAAM,EAAE,QAAQ,SAAS,MAAM,EAC7E,WAAW,gBAAgB,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;CAkCrC,CAAC;AAEF,MAAM,MAAM,aAAa,CACxB,KAAK,SAAS,MAAM,EACpB,QAAQ,SAAS,MAAM,IACpB,UAAU,CAAC,OAAO,gBAAgB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"use-list-state.d.ts","sourceRoot":"","sources":["../../src/list/use-list-state.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEtD,MAAM,WAAW,gBAAgB,CAAC,QAAQ,SAAS,MAAM;IACxD,OAAO,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,GAAI,KAAK,SAAS,MAAM,EAAE,QAAQ,SAAS,MAAM,EAC7E,WAAW,gBAAgB,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;CAwCrC,CAAC;AAEF,MAAM,MAAM,aAAa,CACxB,KAAK,SAAS,MAAM,EACpB,QAAQ,SAAS,MAAM,IACpB,UAAU,CAAC,OAAO,gBAAgB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC"}

package/dist/list/use-list-state.js

@@ -4,7 +4,8 @@ export const useListCoreState = (defaults) => {
     const [descending, setDescending] = useProperty('descending', () => defaults?.descending ?? false);
     const [groupOn, setGroupOn] = useProperty('groupOn', () => defaults?.groupOn);
     const [sortOn, setSortOn] = useProperty('sortOn', () => defaults?.sortOn);
-    const [, setVisibleItems] = useProperty('visibleItems', []);
+    const [visibleItems, setVisibleItems] = useProperty('visibleItems', []);
+    const hasItems = visibleItems.length > 0;
     const [selectedItems, setSelectedItems] = useProperty('selectedItems', []);
     // TODO: use pagination
     const [, setTotalAvailable] = useProperty('totalAvailable');
@@ -18,9 +19,11 @@ export const useListCoreState = (defaults) => {
         setSortOn,
         groupOn,
         setGroupOn,
+        visibleItems,
+        setVisibleItems,
+        hasItems,
         selectedItems,
         setSelectedItems,
-        setVisibleItems,
         setTotalAvailable,
         isMini,
         setIsMini,

package/dist/queue/render.d.ts

@@ -1,3 +1,4 @@
+import '@neovici/cosmoz-button';
 import { RenderTabs } from '@neovici/cosmoz-tabs/next/index.js';
 import { nothing, TemplateResult } from 'lit-html';
 import type { Pagination } from './types';

package/dist/queue/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/queue/render.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/queue/render.ts"],"names":[],"mappings":"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"}

package/dist/queue/render.js

@@ -1,3 +1,4 @@
+import '@neovici/cosmoz-button';
 import { slideInLeft, slideInRight } from '@neovici/cosmoz-slider';
 import { renderTabs } from '@neovici/cosmoz-tabs/next/index.js';
 import { lazyUntil } from '@neovici/cosmoz-utils/directives/lazy-until';
@@ -13,7 +14,8 @@ const _emptySlide = {
     animation: slideInRight,
 };
 const emptySlide = () => _emptySlide;
-export const renderNav = ({ next, prev, }) => html ` <button
+export const renderNav = ({ next, prev, }) => html ` <cosmoz-button
+			variant="secondary"
 			class="button-nav prev"
 			title="${t('Previous item')}"
 			?disabled=${!prev}
@@ -21,8 +23,9 @@ export const renderNav = ({ next, prev, }) => html ` <button
 			@click=${prev}
 		>
 			${arrow}
-		</button>
-		<button
+		</cosmoz-button>
+		<cosmoz-button
+			variant="secondary"
 			title="${t('Next item')}"
 			class="button-nav next"
 			?disabled=${!next}
@@ -30,7 +33,7 @@ export const renderNav = ({ next, prev, }) => html ` <button
 			@click=${next}
 		>
 			${arrow}
-		</button>`;
+		</cosmoz-button>`;
 export const renderPagination = (pagination) => {
     if (!pagination)
         return nothing;

package/dist/queue/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/queue/style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QA8KhB,CAAC;yBAEc,WAAW;IAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;AAAtD,wBAoBE"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/queue/style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QA2JhB,CAAC;yBAEc,WAAW;IAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;AAAtD,wBAkBE"}

package/dist/queue/style.js

@@ -3,41 +3,51 @@ export const base = css `
 	:host {
 		display: flex;
 		flex-direction: column;
-		height: 100%;
+		height: calc(100% - var(--cz-spacing) * 6);
 		position: relative;
-		font-size: 14px;
+		font-size: var(--cz-text-sm);
+		line-height: var(--cz-text-sm-line-height);
+		padding-block: calc(var(--cz-spacing) * 3) 0;
+		padding-inline: calc(var(--cz-spacing) * 3);
+		border: 1px solid var(--cz-color-border-primary);
+		background: var(--cz-color-bg-secondary);
+		border-radius: var(--cz-radius-xl);
+		margin-inline: calc(var(--cz-spacing) * 3);
 	}
 
 	.tabn {
-		--cosmoz-tabs-bg-color: var(--cz-bg-color);
 		box-shadow: none;
 		position: relative;
-		color: #959ba5;
 	}
 	.tabn-tab {
 		flex: 0 1 0.000001px;
 		flex: 0 1 min-content;
 		padding: 11px 16px;
 		background: inherit;
+		color: var(--cz-color-gray-400);
 	}
 	.tabn-tab:first-of-type {
 		margin-left: auto;
 	}
+
 	.tabn-tab[active] {
-		color: var(--cz-tabn-tab-active-color);
+		color: var(--cz-color-text-primary);
 		box-shadow: none;
 	}
+	.tabn-tab:hover {
+		color: red;
+	}
 	.tabn-heading {
-		font-size: 17px;
-		font-weight: 600;
-		line-height: 25px;
-		color: var(--cz-tabn-heading-color, var(--cz-text-secondary-color));
+		font-size: var(--cz-text-lg);
+		font-weight: var(--cz-font-weight-semibold);
+		line-height: var(--cz-text-lg-line-height);
+		color: var(--cz-color-text-secondary);
 		margin-left: 18px;
 		white-space: nowrap;
 	}
 	.tabn-stats {
-		margin: 0 16px;
-		color: var(--cz-text-color);
+		margin: 0 calc(var(--cz-spacing) * 4);
+		color: var(--cz-color-text-secondary);
 		white-space: nowrap;
 	}
 
@@ -52,7 +62,7 @@ export const base = css `
 		cursor: col-resize;
 		flex: none;
 		display: flex;
-		background: var(--cz-queue-gutter-bg, var(--cz-header-bg-color, #fff));
+		background: var(--cz-color-gray-200);
 		z-index: 2;
 		position: relative;
 	}
@@ -60,14 +70,14 @@ export const base = css `
 		content: '';
 		display: block;
 		flex: none;
-		background: var(--cz-queue-gutter-bg, var(--cz-header-bg-color, #bbb));
+		background: var(--cz-color-gray-300);
 		width: 1px;
 		margin-left: auto;
 		pointer-events: none;
 	}
 	.gutter:hover::before {
-		background: var(--cz-accent-color);
-		box-shadow: -1px 0 0 1px var(--cz-accent-color);
+		background: var(--cz-color-bg-brand-secondary);
+		box-shadow: -1px 0 0 1px var(--cz-color-bg-brand-secondary);
 	}
 	.gutter:hover::after {
 		content: '';
@@ -99,35 +109,6 @@ export const base = css `
 		flex: none;
 	}
 
-	.button-nav {
-		flex: none;
-		width: 40px;
-		height: 40px;
-		cursor: pointer;
-		outline: none;
-		background-color: var(--cz-button-nav-bg, #fff);
-		border-radius: 500px;
-		border: solid 1px var(--cz-button-nav-border, #a4abae);
-		font-size: 1.08em;
-		letter-spacing: -0.01em;
-		padding: 0 10px;
-		text-transform: none;
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		color: var(--cz-button-nav-color, #343434);
-		font-weight: normal;
-		margin: 0 0.29em;
-	}
-
-	.button-nav[disabled] {
-		opacity: 0.5;
-	}
-
-	.button-nav:active {
-		background: var(--cz-button-nav-active-bg, rgba(52, 52, 52, 0.4));
-	}
 	.button-nav.prev,
 	.button-page.prev,
 	.page-prev {
@@ -178,15 +159,13 @@ export default ({ index }) => css `
 	${base}
 
 	#list::part(itemRow-${index || '0'}) {
-		background: var(
-			--cosmoz-omnitable-highlight-color,
-			rgba(80, 138, 239, 0.4)
-		);
+		background: var(--cz-color-bg-tertiary);
 	}
 
 	:host([data-mobile]) .tabn-heading {
-		font-size: 14px;
-		margin-left: 12px;
+		font-size: var(--cz-text-sm);
+		line-height: var(--cz-text-sm-line-height);
+		margin-left: calc(var(--cz-spacing) * 3);
 	}
 	:host([data-mobile]) .tabn-tab {
 		padding: 10px;

package/dist/queue/use-queue.d.ts

@@ -29,7 +29,7 @@ interface Opts<I> extends ReturnType<typeof useListState<I>>, Pick<UseTabsOption
     split?: SplitOpts;
 }
 declare const useQueue: <I>({ id, api, tabHashParam, idHashParam, fallback, onActivate, split, ...thru }: Opts<I>) => {
-    tabnav: import("@neovici/cosmoz-tabs/next/use-tabs.js").Result<{
+    tabnav: import("@neovici/cosmoz-tabs/next").Result<{
         readonly name: "overview";
         readonly title: string;
         readonly disabled: false;
@@ -89,7 +89,7 @@ declare const useQueue: <I>({ id, api, tabHashParam, idHashParam, fallback, onAc
 };
 export type UseQueue<I> = Omit<Parameters<typeof useQueue<I>>[0], keyof ReturnType<typeof useListState<I>>>;
 declare const _default: <I>(thru: UseQueue<I>) => {
-    tabnav: import("@neovici/cosmoz-tabs/next/use-tabs.js").Result<{
+    tabnav: import("@neovici/cosmoz-tabs/next").Result<{
         readonly name: "overview";
         readonly title: string;
         readonly disabled: false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neovici/cosmoz-queue",
-  "version": "2.11.4",
+  "version": "3.0.0-beta.0",
   "description": "A reusable queue component for master-detail views with list, split, and queue modes",
   "keywords": [
     "web-components",
@@ -63,11 +63,13 @@
     "./list/more/render": "./dist/list/more/render-more.js"
   },
   "dependencies": {
+    "@neovici/cosmoz-button": "^1.1.0",
     "@neovici/cosmoz-form": "^1.0.1 || ^2.0.0 || ^3.2.0-beta.1",
     "@neovici/cosmoz-omnitable": "^16.0.3 || ^17.0.0 || ^18.6.0",
     "@neovici/cosmoz-router": "^11.2.8",
     "@neovici/cosmoz-slider": "^5.2.1",
-    "@neovici/cosmoz-tabs": "^9.3.2",
+    "@neovici/cosmoz-tabs": "^10.0.0-beta.1",
+    "@neovici/cosmoz-tokens": "^3.4.0",
     "@neovici/cosmoz-utils": "^6.22.0",
     "@pionjs/pion": "^2.10.0",
     "i18next": ">=23.0.0 <27.0.0",