@ckeditor/ckeditor5-pagination 48.8.1-alpha.4 → 49.0.0-alpha.1

package/LICENSE.md

@@ -14,7 +14,7 @@ Where not otherwise indicated, all CKEditor 5 content is authored by CKSour
 
 The following libraries are included in CKEditor 5 under the [MIT license](https://opensource.org/licenses/MIT):
 
-* es-toolkit - Copyright (c) 2024 Viva Republica, Inc and Copyright OpenJS Foundation and other contributors.
+* es-toolkit - Copyright (c) 2024 Viva Republica, Inc.
 
 Trademarks
 ----------

package/dist/augmentation.d.ts

@@ -1,19 +1,19 @@
 /**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import type { PaginationConfig, Pagination } from './index.js';
-declare module '@ckeditor/ckeditor5-core' {
-    interface EditorConfig {
-        /**
-         * The configuration of the pagination feature. It is used by the pagination feature from the `@ckeditor/ckeditor5-pagination`
-         * package.
-         *
-         * Read more in {@link module:pagination/pagination~PaginationConfig}.
-         */
-        pagination?: PaginationConfig;
-    }
-    interface PluginsMap {
-        [Pagination.pluginName]: Pagination;
-    }
+* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+*/
+import type { PaginationConfig, Pagination } from "./index.js";
+declare module "@ckeditor/ckeditor5-core" {
+	interface EditorConfig {
+		/**
+		* The configuration of the pagination feature. It is used by the pagination feature from the `@ckeditor/ckeditor5-pagination`
+		* package.
+		*
+		* Read more in {@link module:pagination/pagination~PaginationConfig}.
+		*/
+		pagination?: PaginationConfig;
+	}
+	interface PluginsMap {
+		[Pagination.pluginName]: Pagination;
+	}
 }

package/dist/index-editor.css

@@ -2,144 +2,160 @@
  * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-:root{
-  --ck-color-pagination-divider:#ababab;
-}
-
-.ck.ck-pagination_enabled.ck-content .page-break:after{
-  display:none;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view > .ck-content{
-  box-sizing:border-box;
-  width:auto;
-  min-width:auto;
-  max-width:none;
-  height:auto;
-  min-height:auto;
-  max-height:none;
-  overflow:unset;
-  border:none;
-  margin:0;
-  padding:0;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view .ck-widget__type-around, .ck.ck-pagination_enabled.ck-pagination-view .ck-fake-selection-container, .ck.ck-pagination_enabled.ck-pagination-view .ck-widget__selection-handle, .ck.ck-pagination_enabled.ck-pagination-view .ck-widget__resizer, .ck.ck-pagination_enabled.ck-pagination-view .ck-table-column-resizer{
-  display:none;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view .ck-widget{
-  outline:none;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view .ck-editor__nested-editable:not(td, th){
-  border:0;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view p:first-child{
-  padding-top:0;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view :has( + .page-break){
-  margin-bottom:0;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view .page-break{
-  break-after:column;
-  height:0;
-  margin:0;
-  padding:0;
-  display:block;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view .page-break .page-break__label, .ck.ck-pagination_enabled.ck-pagination-view .page-break:after{
-  display:none;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view .table table{
-  overflow:initial;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view blockquote{
-  overflow:initial;
-  display:flow-root;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view .ck-bookmark{
-  width:0;
-  height:0;
-  overflow:hidden;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view figure.table:not(.layout-table):has( > figcaption) > table{
-  width:fit-content;
-  height:fit-content;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view figure.table:not(.layout-table):not(:has( > figcaption)){
-  width:fit-content;
-  display:block;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view .table-of-contents{
-  border:0;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view .table-of-contents ol li{
-  overflow:visible;
-}
-
-.ck.ck-page-navigator{
-  padding:0 var(--ck-spacing-standard);
-  line-height:1;
-}
-
-.ck.ck-page-navigator > .ck-input-number{
-  width:var(--ck-ui-component-min-height);
-  min-width:var(--ck-ui-component-min-height);
-  text-align:center;
-  -moz-appearance:textfield;
-  background:none;
-}
-
-.ck.ck-page-navigator > .ck-input-number::-webkit-inner-spin-button{
-  -webkit-appearance:none;
-  margin:0;
-}
-
-.ck.ck-page-navigator > .ck-input-number::-webkit-outer-spin-button{
-  -webkit-appearance:none;
-  margin:0;
-}
-
-.ck.ck-page-navigator > .ck-input-number:not(:focus){
-  border:1px solid #0000;
-  border-bottom:1px solid var(--ck-color-base-border);
-}
-
-.ck.ck-page-navigator > span:before{
-  content:"/";
-  margin:0 var(--ck-spacing-standard);
-}
-
-.ck.ck-pagination-view-line{
-  border-top:1px dotted var(--ck-color-pagination-divider);
-  pointer-events:none;
-  height:0;
-  position:absolute;
-}
-
-.ck.ck-pagination-view-line:after{
-  content:attr(data-page-number);
-  color:var(--ck-color-base-background);
-  text-align:center;
-  min-width:18px;
-  padding:var(--ck-spacing-tiny) var(--ck-spacing-medium);
-  background:#c4c4c4;
-  font-size:10px;
-  display:inline-block;
-  position:absolute;
-  top:-1px;
-  right:-1px;
-  transform:translateX(100%);
+:root, :host {
+  --ck-pagination-divider-color: var(--ck-color-pagination-divider, #ababab);
+  --ck-pagination-label-background-color: #c4c4c4;
+  --ck-pagination-label-border-radius: 0 var(--ck-border-radius-control-small) var(--ck-border-radius-control-small) 0;
+}
+
+.ck.ck-pagination_enabled {
+  &.ck-content .page-break:after {
+    display: none;
+  }
+
+  &.ck-pagination-view {
+    & > .ck-content {
+      box-sizing: border-box;
+      width: auto;
+      min-width: auto;
+      max-width: none;
+      height: auto;
+      min-height: auto;
+      max-height: none;
+      overflow: unset;
+      border: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    & .ck-widget__type-around, & .ck-fake-selection-container, & .ck-widget__selection-handle, & .ck-widget__resizer, & .ck-table-column-resizer {
+      display: none;
+    }
+
+    & .ck-widget {
+      outline: none;
+    }
+
+    & .ck-editor__nested-editable:not(td, th) {
+      border: 0;
+    }
+
+    & p:first-child {
+      padding-top: 0;
+    }
+
+    & :has( + .page-break) {
+      margin-bottom: 0;
+    }
+
+    & .page-break {
+      break-after: column;
+      height: 0;
+      margin: 0;
+      padding: 0;
+      display: block;
+
+      & .page-break__label, &:after {
+        display: none;
+      }
+    }
+
+    & .table table {
+      overflow: initial;
+    }
+
+    & blockquote {
+      overflow: initial;
+      display: flow-root;
+    }
+
+    & .ck-bookmark {
+      width: 0;
+      height: 0;
+      overflow: hidden;
+    }
+
+    & figure.table:not(.layout-table) {
+      &:has( > figcaption) > table {
+        width: fit-content;
+        height: fit-content;
+      }
+
+      &:not(:has( > figcaption)) {
+        width: fit-content;
+        display: block;
+      }
+    }
+
+    & .table-of-contents {
+      border: 0;
+
+      & ol li {
+        overflow: visible;
+      }
+    }
+  }
+}
+
+:root, :host {
+  --ck-page-navigator-font-size: var(--ck-font-size-md);
+}
+
+.ck.ck-page-navigator {
+  padding: 0 var(--ck-spacing-control-padding-inline);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+
+  & > .ck-input-number {
+    width: calc(4ch + 2 * var(--ck-spacing-padding-compact) + 2px);
+    min-width: calc(4ch + 2 * var(--ck-spacing-padding-compact) + 2px);
+    font-size: var(--ck-page-navigator-font-size);
+    text-align: center;
+    -moz-appearance: textfield;
+    background: none;
+
+    &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    &:not(:focus) {
+      border: 1px solid #0000;
+      border-bottom: 1px solid var(--ck-color-border-control);
+    }
+  }
+
+  & > span {
+    font-size: var(--ck-page-navigator-font-size);
+    min-width: calc(2 * var(--ck-spacing-standard, var(--ck-spacing-base)) + 5ch);
+    display: inline-block;
+
+    &:before {
+      content: "/";
+      margin: 0 var(--ck-spacing-standard, var(--ck-spacing-base));
+    }
+  }
+}
+
+.ck.ck-pagination-view-line {
+  border-top: 1px dotted var(--ck-pagination-divider-color);
+  pointer-events: none;
+  height: 0;
+  position: absolute;
+
+  &:after {
+    content: attr(data-page-number);
+    font-size: var(--ck-font-size-xs);
+    background: var(--ck-pagination-label-background-color);
+    border-radius: var(--ck-pagination-label-border-radius);
+    color: var(--ck-color-text-inverse);
+    text-align: center;
+    min-width: 18px;
+    padding: var(--ck-spacing-padding-tight);
+    display: inline-block;
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    transform: translateX(100%);
+  }
 }

package/dist/index.css

@@ -2,144 +2,160 @@
  * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-:root {
-  --ck-color-pagination-divider: #ababab;
-}
-
-.ck.ck-pagination_enabled.ck-content .page-break:after {
-  display: none;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view > .ck-content {
-  box-sizing: border-box;
-  width: auto;
-  min-width: auto;
-  max-width: none;
-  height: auto;
-  min-height: auto;
-  max-height: none;
-  overflow: unset;
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view .ck-widget__type-around, .ck.ck-pagination_enabled.ck-pagination-view .ck-fake-selection-container, .ck.ck-pagination_enabled.ck-pagination-view .ck-widget__selection-handle, .ck.ck-pagination_enabled.ck-pagination-view .ck-widget__resizer, .ck.ck-pagination_enabled.ck-pagination-view .ck-table-column-resizer {
-  display: none;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view .ck-widget {
-  outline: none;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view .ck-editor__nested-editable:not(td, th) {
-  border: 0;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view p:first-child {
-  padding-top: 0;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view :has( + .page-break) {
-  margin-bottom: 0;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view .page-break {
-  break-after: column;
-  height: 0;
-  margin: 0;
-  padding: 0;
-  display: block;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view .page-break .page-break__label, .ck.ck-pagination_enabled.ck-pagination-view .page-break:after {
-  display: none;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view .table table {
-  overflow: initial;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view blockquote {
-  overflow: initial;
-  display: flow-root;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view .ck-bookmark {
-  width: 0;
-  height: 0;
-  overflow: hidden;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view figure.table:not(.layout-table):has( > figcaption) > table {
-  width: fit-content;
-  height: fit-content;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view figure.table:not(.layout-table):not(:has( > figcaption)) {
-  width: fit-content;
-  display: block;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view .table-of-contents {
-  border: 0;
-}
-
-.ck.ck-pagination_enabled.ck-pagination-view .table-of-contents ol li {
-  overflow: visible;
+:root, :host {
+  --ck-pagination-divider-color: var(--ck-color-pagination-divider, #ababab);
+  --ck-pagination-label-background-color: #c4c4c4;
+  --ck-pagination-label-border-radius: 0 var(--ck-border-radius-control-small) var(--ck-border-radius-control-small) 0;
+}
+
+.ck.ck-pagination_enabled {
+  &.ck-content .page-break:after {
+    display: none;
+  }
+
+  &.ck-pagination-view {
+    & > .ck-content {
+      box-sizing: border-box;
+      width: auto;
+      min-width: auto;
+      max-width: none;
+      height: auto;
+      min-height: auto;
+      max-height: none;
+      overflow: unset;
+      border: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    & .ck-widget__type-around, & .ck-fake-selection-container, & .ck-widget__selection-handle, & .ck-widget__resizer, & .ck-table-column-resizer {
+      display: none;
+    }
+
+    & .ck-widget {
+      outline: none;
+    }
+
+    & .ck-editor__nested-editable:not(td, th) {
+      border: 0;
+    }
+
+    & p:first-child {
+      padding-top: 0;
+    }
+
+    & :has( + .page-break) {
+      margin-bottom: 0;
+    }
+
+    & .page-break {
+      break-after: column;
+      height: 0;
+      margin: 0;
+      padding: 0;
+      display: block;
+
+      & .page-break__label, &:after {
+        display: none;
+      }
+    }
+
+    & .table table {
+      overflow: initial;
+    }
+
+    & blockquote {
+      overflow: initial;
+      display: flow-root;
+    }
+
+    & .ck-bookmark {
+      width: 0;
+      height: 0;
+      overflow: hidden;
+    }
+
+    & figure.table:not(.layout-table) {
+      &:has( > figcaption) > table {
+        width: fit-content;
+        height: fit-content;
+      }
+
+      &:not(:has( > figcaption)) {
+        width: fit-content;
+        display: block;
+      }
+    }
+
+    & .table-of-contents {
+      border: 0;
+
+      & ol li {
+        overflow: visible;
+      }
+    }
+  }
+}
+
+:root, :host {
+  --ck-page-navigator-font-size: var(--ck-font-size-md);
 }
 
 .ck.ck-page-navigator {
-  padding: 0 var(--ck-spacing-standard);
+  padding: 0 var(--ck-spacing-control-padding-inline);
+  font-variant-numeric: tabular-nums;
   line-height: 1;
-}
-
-.ck.ck-page-navigator > .ck-input-number {
-  width: var(--ck-ui-component-min-height);
-  min-width: var(--ck-ui-component-min-height);
-  text-align: center;
-  -moz-appearance: textfield;
-  background: none;
-}
 
-.ck.ck-page-navigator > .ck-input-number::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.ck.ck-page-navigator > .ck-input-number::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.ck.ck-page-navigator > .ck-input-number:not(:focus) {
-  border: 1px solid #0000;
-  border-bottom: 1px solid var(--ck-color-base-border);
-}
-
-.ck.ck-page-navigator > span:before {
-  content: "/";
-  margin: 0 var(--ck-spacing-standard);
+  & > .ck-input-number {
+    width: calc(4ch + 2 * var(--ck-spacing-padding-compact) + 2px);
+    min-width: calc(4ch + 2 * var(--ck-spacing-padding-compact) + 2px);
+    font-size: var(--ck-page-navigator-font-size);
+    text-align: center;
+    -moz-appearance: textfield;
+    background: none;
+
+    &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    &:not(:focus) {
+      border: 1px solid #0000;
+      border-bottom: 1px solid var(--ck-color-border-control);
+    }
+  }
+
+  & > span {
+    font-size: var(--ck-page-navigator-font-size);
+    min-width: calc(2 * var(--ck-spacing-standard, var(--ck-spacing-base)) + 5ch);
+    display: inline-block;
+
+    &:before {
+      content: "/";
+      margin: 0 var(--ck-spacing-standard, var(--ck-spacing-base));
+    }
+  }
 }
 
 .ck.ck-pagination-view-line {
-  border-top: 1px dotted var(--ck-color-pagination-divider);
+  border-top: 1px dotted var(--ck-pagination-divider-color);
   pointer-events: none;
   height: 0;
   position: absolute;
-}
 
-.ck.ck-pagination-view-line:after {
-  content: attr(data-page-number);
-  color: var(--ck-color-base-background);
-  text-align: center;
-  min-width: 18px;
-  padding: var(--ck-spacing-tiny) var(--ck-spacing-medium);
-  background: #c4c4c4;
-  font-size: 10px;
-  display: inline-block;
-  position: absolute;
-  top: -1px;
-  right: -1px;
-  transform: translateX(100%);
+  &:after {
+    content: attr(data-page-number);
+    font-size: var(--ck-font-size-xs);
+    background: var(--ck-pagination-label-background-color);
+    border-radius: var(--ck-pagination-label-border-radius);
+    color: var(--ck-color-text-inverse);
+    text-align: center;
+    min-width: 18px;
+    padding: var(--ck-spacing-padding-tight);
+    display: inline-block;
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    transform: translateX(100%);
+  }
 }

package/dist/index.d.ts

@@ -1,10 +1,12 @@
 /**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
+* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+*/
 /**
- * @module pagination
- */
-export { Pagination, type PaginationConfig, type PaginationMarginsConfig } from './pagination.js';
-export { PaginationRenderer } from './paginationrenderer.js';
-import './augmentation.js';
+* @module pagination
+*/
+export { Pagination, type PaginationConfig, type PaginationMarginsConfig } from "./pagination.js";
+export { PaginationRenderer } from "./paginationrenderer.js";
+import "../theme/index-editor.css";
+import "../theme/index-content.css";
+import "./augmentation.js";