@progress/kendo-theme-bootstrap 14.4.0-dev.2 → 14.4.0-dev.4

package/dist/meta/variables.json

@@ -1530,41 +1530,80 @@
             }
         }
     },
-    "kendo-icon-default-size": {
+    "ki-icon-default-size": {
         "type": "String",
         "value": "\"md\""
     },
-    "kendo-icon-size": {
+    "ki-icon-size": {
         "type": "Number",
         "value": "1rem"
     },
-    "kendo-icon-size-xs": {
-        "type": "Calculation",
-        "value": "calc(var(--kendo-icon-size, 1rem) * 0.75)"
+    "ki-icon-size-xs": {
+        "type": "String",
+        "value": "var(--kendo-icon-size-xs, calc(var(--kendo-icon-size, 1rem) * 0.75))"
     },
-    "kendo-icon-size-sm": {
-        "type": "Calculation",
-        "value": "calc(var(--kendo-icon-size, 1rem) * 0.875)"
+    "ki-icon-size-sm": {
+        "type": "String",
+        "value": "var(--kendo-icon-size-sm, calc(var(--kendo-icon-size, 1rem) * 0.875))"
     },
-    "kendo-icon-size-md": {
+    "ki-icon-size-md": {
         "type": "String",
-        "value": "var(--kendo-icon-size, 1rem)"
+        "value": "var(--kendo-icon-size-md, var(--kendo-icon-size, 1rem))"
     },
-    "kendo-icon-size-lg": {
-        "type": "Calculation",
-        "value": "calc(var(--kendo-icon-size, 1rem) * 1.25)"
+    "ki-icon-size-lg": {
+        "type": "String",
+        "value": "var(--kendo-icon-size-lg, calc(var(--kendo-icon-size, 1rem) * 1.25))"
     },
-    "kendo-icon-size-xl": {
-        "type": "Calculation",
-        "value": "calc(var(--kendo-icon-size, 1rem) * 1.5)"
+    "ki-icon-size-xl": {
+        "type": "String",
+        "value": "var(--kendo-icon-size-xl, calc(var(--kendo-icon-size, 1rem) * 1.5))"
     },
-    "kendo-icon-size-xxl": {
-        "type": "Calculation",
-        "value": "calc(var(--kendo-icon-size, 1rem) * 2)"
+    "ki-icon-size-xxl": {
+        "type": "String",
+        "value": "var(--kendo-icon-size-xxl, calc(var(--kendo-icon-size, 1rem) * 2))"
     },
-    "kendo-icon-size-xxxl": {
-        "type": "Calculation",
-        "value": "calc(var(--kendo-icon-size, 1rem) * 3)"
+    "ki-icon-size-xxxl": {
+        "type": "String",
+        "value": "var(--kendo-icon-size-xxxl, calc(var(--kendo-icon-size, 1rem) * 3))"
+    },
+    "ki-icon-stroke-width": {
+        "type": "Number",
+        "value": "1.5"
+    },
+    "ki-icon-sizes": {
+        "type": "Map",
+        "value": "(xs: var(--kendo-icon-size-xs, calc(var(--kendo-icon-size, 1rem) * 0.75)), sm: var(--kendo-icon-size-sm, calc(var(--kendo-icon-size, 1rem) * 0.875)), md: var(--kendo-icon-size-md, var(--kendo-icon-size, 1rem)), lg: var(--kendo-icon-size-lg, calc(var(--kendo-icon-size, 1rem) * 1.25)), xl: var(--kendo-icon-size-xl, calc(var(--kendo-icon-size, 1rem) * 1.5)), xxl: var(--kendo-icon-size-xxl, calc(var(--kendo-icon-size, 1rem) * 2)), xxxl: var(--kendo-icon-size-xxxl, calc(var(--kendo-icon-size, 1rem) * 3)))",
+        "prettyValue": {
+            "xs": "var(--kendo-icon-size-xs, calc(var(--kendo-icon-size, 1rem) * 0.75))",
+            "sm": "var(--kendo-icon-size-sm, calc(var(--kendo-icon-size, 1rem) * 0.875))",
+            "md": "var(--kendo-icon-size-md, var(--kendo-icon-size, 1rem))",
+            "lg": "var(--kendo-icon-size-lg, calc(var(--kendo-icon-size, 1rem) * 1.25))",
+            "xl": "var(--kendo-icon-size-xl, calc(var(--kendo-icon-size, 1rem) * 1.5))",
+            "xxl": "var(--kendo-icon-size-xxl, calc(var(--kendo-icon-size, 1rem) * 2))",
+            "xxxl": "var(--kendo-icon-size-xxxl, calc(var(--kendo-icon-size, 1rem) * 3))"
+        }
+    },
+    "ki-rotate-map": {
+        "type": "Map",
+        "value": "(0: 0deg, 45: 45deg, 90: 90deg, 135: 135deg, 180: 180deg, 225: 225deg, 270: 270deg, 315: 315deg)",
+        "prettyValue": {
+            "0": "0deg",
+            "45": "45deg",
+            "90": "90deg",
+            "135": "135deg",
+            "180": "180deg",
+            "225": "225deg",
+            "270": "270deg",
+            "315": "315deg"
+        }
+    },
+    "kendo-icon-default-size": {
+        "type": "String",
+        "value": "\"md\""
+    },
+    "kendo-icon-size": {
+        "type": "Number",
+        "value": "1rem"
     },
     "kendo-icon-spacing": {
         "type": "String",
@@ -3125,6 +3164,10 @@
         "type": "String",
         "value": "var(--kendo-spacing-2)"
     },
+    "kendo-tooltip-icon-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2)"
+    },
     "kendo-tooltip-border-width": {
         "type": "Number",
         "value": "0px"
@@ -5541,6 +5584,10 @@
         "type": "Null",
         "value": "null"
     },
+    "kendo-menu-expand-arrow-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2)"
+    },
     "kendo-menu-separator-margin-inline": {
         "type": "String",
         "value": "var(--kendo-spacing-1)"
@@ -5838,6 +5885,10 @@
         "type": "String",
         "value": "var(--kendo-spacing-2\\.5)"
     },
+    "kendo-toolbar-item-icon-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2)"
+    },
     "kendo-toolbar-separator-height": {
         "type": "Calculation",
         "value": "calc(var(--kendo-line-height) * 1em + var(--kendo-spacing-1\\.5) * 2 + 1px * 2)"
@@ -7489,6 +7540,10 @@
         "type": "String",
         "value": "var(--kendo-spacing-0\\.5)"
     },
+    "kendo-treeview-item-icon-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2)"
+    },
     "kendo-treeview-border-radius": {
         "type": "Null",
         "value": "null"
@@ -10213,6 +10268,10 @@
         "type": "String",
         "value": "var(--kendo-border-radius-xxl)"
     },
+    "kendo-stepper-label-icon-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2)"
+    },
     "kendo-stepper-border-width": {
         "type": "Number",
         "value": "0px"
@@ -10553,6 +10612,10 @@
         "type": "String",
         "value": "var(--kendo-spacing-0)"
     },
+    "kendo-tabstrip-item-icon-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2)"
+    },
     "kendo-tabstrip-item-spacing-x": {
         "type": "String",
         "value": "var(--kendo-spacing-1\\.5)"
@@ -10957,6 +11020,10 @@
         "type": "String",
         "value": "var(--kendo-spacing-3)"
     },
+    "kendo-panelbar-item-icon-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2)"
+    },
     "kendo-panelbar-item-level-count": {
         "type": "Number",
         "value": "4"
@@ -11769,6 +11836,10 @@
         "type": "String",
         "value": "var(--kendo-spacing-2)"
     },
+    "kendo-grid-column-menu-icon-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2)"
+    },
     "kendo-grid-toolbar-border-width": {
         "type": "Number",
         "value": "1px"
@@ -13109,6 +13180,10 @@
         "type": "String",
         "value": "var(--kendo-spacing-1)"
     },
+    "kendo-file-manager-icon-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2)"
+    },
     "kendo-file-manager-preview-bg": {
         "type": "Null",
         "value": "null"
@@ -14265,6 +14340,10 @@
         "type": "String",
         "value": "var(--kendo-spacing-1)"
     },
+    "kendo-scheduler-nav-item-icon-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2)"
+    },
     "kendo-scheduler-header-bg": {
         "type": "String",
         "value": "var(--kendo-color-surface)"
@@ -14693,6 +14772,94 @@
         "type": "String",
         "value": "var(--kendo-color-primary-emphasis)"
     },
+    "kendo-agent-step-gap": {
+        "type": "String",
+        "value": "var(--kendo-spacing-1\\.5)"
+    },
+    "kendo-agent-step-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2)"
+    },
+    "kendo-agent-step-icon-margin-top": {
+        "type": "String",
+        "value": "var(--kendo-spacing-1)"
+    },
+    "kendo-agent-step-added-color": {
+        "type": "String",
+        "value": "var(--kendo-color-success-on-surface)"
+    },
+    "kendo-agent-step-removed-color": {
+        "type": "String",
+        "value": "var(--kendo-color-error-on-surface)"
+    },
+    "kendo-agent-step-font-size": {
+        "type": "String",
+        "value": "var(--kendo-font-size-sm)"
+    },
+    "kendo-agent-step-body-font-size": {
+        "type": "String",
+        "value": "var(--kendo-font-size-sm)"
+    },
+    "kendo-thought-gap": {
+        "type": "String",
+        "value": "var(--kendo-spacing-1\\.5)"
+    },
+    "kendo-thought-icon-col-gap": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2)"
+    },
+    "kendo-thought-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4)"
+    },
+    "kendo-thought-connector-color": {
+        "type": "String",
+        "value": "var(--kendo-color-border)"
+    },
+    "kendo-tool-call-indent": {
+        "type": "String",
+        "value": "var(--kendo-spacing-5)"
+    },
+    "kendo-tool-call-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2)"
+    },
+    "kendo-citation-popover-view-padding": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4)"
+    },
+    "kendo-citation-pages-color": {
+        "type": "String",
+        "value": "var(--kendo-color-subtle)"
+    },
+    "kendo-checkpoint-line-color": {
+        "type": "String",
+        "value": "var(--kendo-color-border)"
+    },
+    "kendo-checkpoint-gap": {
+        "type": "String",
+        "value": "var(--kendo-spacing-1\\.5)"
+    },
+    "kendo-checkpoint-line-width": {
+        "type": "Number",
+        "value": "1px"
+    },
+    "kendo-checkpoint-stamp-font-size": {
+        "type": "String",
+        "value": "var(--kendo-font-size-sm)"
+    },
+    "kendo-checkpoint-stamp-color": {
+        "type": "String",
+        "value": "var(--kendo-color-subtle)"
+    },
+    "kendo-checkpoint-stamp-font-weight": {
+        "type": "Null",
+        "value": "null"
+    },
+    "kendo-checkpoint-stamp-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-1)"
+    },
     "kendo-media-player-border-width": {
         "type": "Number",
         "value": "1px"

package/lib/swatches/bootstrap-3-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 3 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "14.4.0-dev.2",
+    "version": "14.4.0-dev.4",
     "previewColors": [
         "oklch(0.00% 0.0000 0deg)",
         "oklch(25.20% 0.0000 0deg)",

package/lib/swatches/bootstrap-3.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 3",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "14.4.0-dev.2",
+    "version": "14.4.0-dev.4",
     "previewColors": [
         "oklch(100.00% 0.0001 0deg)",
         "oklch(97.01% 0.0001 0deg)",

package/lib/swatches/bootstrap-4-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 4 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "14.4.0-dev.2",
+    "version": "14.4.0-dev.4",
     "previewColors": [
         "oklch(0.00% 0.0000 0deg)",
         "oklch(26.21% 0.0095 248.24deg)",

package/lib/swatches/bootstrap-4.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 4",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "14.4.0-dev.2",
+    "version": "14.4.0-dev.4",
     "previewColors": [
         "oklch(100.00% 0.0001 0deg)",
         "oklch(98.16% 0.0018 248.66deg)",

package/lib/swatches/bootstrap-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "14.4.0-dev.2",
+    "version": "14.4.0-dev.4",
     "previewColors": [
         "oklch(56.39% 0.1748 253.31deg)",
         "oklch(75.91% 0.1029 220.18deg)",

package/lib/swatches/bootstrap-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "14.4.0-dev.2",
+    "version": "14.4.0-dev.4",
     "previewColors": [
         "oklch(0.00% 0.0000 0deg)",
         "oklch(26.21% 0.0095 248.24deg)",

package/lib/swatches/bootstrap-main.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "14.4.0-dev.2",
+    "version": "14.4.0-dev.4",
     "previewColors": [
         "oklch(100.00% 0.0001 0deg)",
         "oklch(98.16% 0.0018 248.66deg)",

package/lib/swatches/bootstrap-nordic.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "14.4.0-dev.2",
+    "version": "14.4.0-dev.4",
     "previewColors": [
         "oklch(100.00% 0.0001 0deg)",
         "oklch(98.16% 0.0018 248.66deg)",

package/lib/swatches/bootstrap-turquoise-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Turquoise Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "14.4.0-dev.2",
+    "version": "14.4.0-dev.4",
     "previewColors": [
         "oklch(0.00% 0.0000 0deg)",
         "oklch(28.74% 0.0034 229.23deg)",

package/lib/swatches/bootstrap-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "14.4.0-dev.2",
+    "version": "14.4.0-dev.4",
     "previewColors": [
         "oklch(100.00% 0.0001 0deg)",
         "oklch(96.12% 0.0001 0deg)",

package/lib/swatches/bootstrap-urban.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "14.4.0-dev.2",
+    "version": "14.4.0-dev.4",
     "previewColors": [
         "oklch(100.00% 0.0001 0deg)",
         "oklch(94.26% 0.0144 231.45deg)",

package/lib/swatches/bootstrap-vintage.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Vintage",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "14.4.0-dev.2",
+    "version": "14.4.0-dev.4",
     "previewColors": [
         "oklch(100.00% 0.0001 0deg)",
         "oklch(95.25% 0.0097 87.57deg)",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "14.4.0-dev.2",
+  "version": "14.4.0-dev.4",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,9 +52,9 @@
     "postpublish": "echo 'no postpublish for bootstrap theme'"
   },
   "dependencies": {
-    "@progress/kendo-svg-icons": "^4.9.0",
-    "@progress/kendo-theme-core": "14.4.0-dev.2",
-    "@progress/kendo-theme-utils": "14.4.0-dev.2"
+    "@progress/kendo-svg-icons": "^4.11.0",
+    "@progress/kendo-theme-core": "14.4.0-dev.4",
+    "@progress/kendo-theme-utils": "14.4.0-dev.4"
   },
   "directories": {
     "doc": "docs",

package/scss/agent-response/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-agent-response--styles() {
+    @include import-once( "agent-response" ) {
+        @include core-styles();
+        @include kendo-agent-response--layout();
+        @include kendo-agent-response--theme();
+    }
+}

package/scss/agent-response/_layout.scss

@@ -0,0 +1,5 @@
+@use "@progress/kendo-theme-core/scss/components/agent-response/_layout.scss" as *;
+
+@mixin kendo-agent-response--layout() {
+    @include kendo-agent-response--layout-base();
+}

package/scss/agent-response/_theme.scss

@@ -0,0 +1,5 @@
+@use "@progress/kendo-theme-core/scss/components/agent-response/_theme.scss" as *;
+
+@mixin kendo-agent-response--theme() {
+    @include kendo-agent-response--theme-base();
+}

package/scss/agent-response/_variables.scss

@@ -0,0 +1,61 @@
+@use "../core/_index.scss" as *;
+
+// Agent Response
+
+/// The gap between the icon and the content of the AgentStep head and content row.
+/// @group agent-response
+$kendo-agent-step-gap: k-spacing(1.5) !default;
+/// The vertical padding of the AgentStep head.
+/// @group agent-response
+$kendo-agent-step-padding-y: k-spacing(2) !default;
+/// The top margin of the AgentStep icon.
+/// @group agent-response
+$kendo-agent-step-icon-margin-top: k-spacing(1) !default;
+/// The text color of the added lines count in the AgentStep diffstat.
+/// @group agent-response
+$kendo-agent-step-added-color: k-color(success-on-surface) !default;
+/// The text color of the removed lines count in the AgentStep diffstat.
+/// @group agent-response
+$kendo-agent-step-removed-color: k-color(error-on-surface) !default;
+/// The font size of the AgentStep label, secondary text, and diffstat.
+/// @group agent-response
+$kendo-agent-step-font-size: var(--kendo-font-size-sm) !default;
+/// The font size of the AgentStep body content.
+/// @group agent-response
+$kendo-agent-step-body-font-size: var(--kendo-font-size-sm) !default;
+
+/// The gap between the icon column and the content of the Thought.
+/// @group agent-response
+$kendo-thought-gap: k-spacing(1.5) !default;
+/// The gap in the icon column of the Thought.
+/// @group agent-response
+$kendo-thought-icon-col-gap: k-spacing(2) !default;
+/// The spacing between stacked Thought items.
+/// @group agent-response
+$kendo-thought-spacing: k-spacing(4) !default;
+/// The color of the connector line between stacked Thought items.
+/// @group agent-response
+$kendo-thought-connector-color: k-color(border) !default;
+
+/// The start indent of the ToolCall body.
+/// @group agent-response
+$kendo-tool-call-indent: k-spacing(5) !default;
+/// The bottom padding of the ToolCall body.
+/// @group agent-response
+$kendo-tool-call-padding-y: k-spacing(2) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/agent-response/_variables.scss" with (
+    $kendo-agent-step-gap: $kendo-agent-step-gap,
+    $kendo-agent-step-padding-y: $kendo-agent-step-padding-y,
+    $kendo-agent-step-icon-margin-top: $kendo-agent-step-icon-margin-top,
+    $kendo-agent-step-added-color: $kendo-agent-step-added-color,
+    $kendo-agent-step-removed-color: $kendo-agent-step-removed-color,
+    $kendo-agent-step-font-size: $kendo-agent-step-font-size,
+    $kendo-agent-step-body-font-size: $kendo-agent-step-body-font-size,
+    $kendo-thought-gap: $kendo-thought-gap,
+    $kendo-thought-icon-col-gap: $kendo-thought-icon-col-gap,
+    $kendo-thought-spacing: $kendo-thought-spacing,
+    $kendo-thought-connector-color: $kendo-thought-connector-color,
+    $kendo-tool-call-indent: $kendo-tool-call-indent,
+    $kendo-tool-call-padding-y: $kendo-tool-call-padding-y
+);

package/scss/checkpoint/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-checkpoint--styles() {
+    @include import-once( "checkpoint" ) {
+        @include core-styles();
+        @include kendo-checkpoint--layout();
+        @include kendo-checkpoint--theme();
+    }
+}

package/scss/checkpoint/_layout.scss

@@ -0,0 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/checkpoint/_layout.scss" as *;
+
+@mixin kendo-checkpoint--layout() {
+    @include kendo-checkpoint--layout-base();
+}

package/scss/checkpoint/_theme.scss

@@ -0,0 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/checkpoint/_theme.scss" as *;
+
+@mixin kendo-checkpoint--theme() {
+    @include kendo-checkpoint--theme-base();
+}

package/scss/checkpoint/_variables.scss

@@ -0,0 +1,33 @@
+@use "../core/_index.scss" as *;
+
+/// The color of the Checkpoint separator line.
+/// @group checkpoint
+$kendo-checkpoint-line-color: k-color(border) !default;
+/// The gap between the Checkpoint line and stamp.
+/// @group checkpoint
+$kendo-checkpoint-gap: k-spacing(1.5) !default;
+/// The width of the Checkpoint separator line.
+/// @group checkpoint
+$kendo-checkpoint-line-width: 1px !default;
+/// The font size of the Checkpoint stamp text.
+/// @group checkpoint
+$kendo-checkpoint-stamp-font-size: var(--kendo-font-size-sm) !default;
+/// The text color of the Checkpoint stamp.
+/// @group checkpoint
+$kendo-checkpoint-stamp-color: k-color(subtle) !default;
+/// The font weight of the Checkpoint stamp text.
+/// @group checkpoint
+$kendo-checkpoint-stamp-font-weight: null !default;
+/// The horizontal padding of the Checkpoint stamp.
+/// @group checkpoint
+$kendo-checkpoint-stamp-padding-x: k-spacing(1) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/checkpoint/_variables.scss" with (
+    $kendo-checkpoint-line-color: $kendo-checkpoint-line-color,
+    $kendo-checkpoint-gap: $kendo-checkpoint-gap,
+    $kendo-checkpoint-line-width: $kendo-checkpoint-line-width,
+    $kendo-checkpoint-stamp-font-size: $kendo-checkpoint-stamp-font-size,
+    $kendo-checkpoint-stamp-color: $kendo-checkpoint-stamp-color,
+    $kendo-checkpoint-stamp-font-weight: $kendo-checkpoint-stamp-font-weight,
+    $kendo-checkpoint-stamp-padding-x: $kendo-checkpoint-stamp-padding-x
+);

package/scss/citation/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-citation--styles() {
+    @include import-once( "citation" ) {
+        @include core-styles();
+        @include kendo-citation--layout();
+        @include kendo-citation--theme();
+    }
+}

package/scss/citation/_layout.scss

@@ -0,0 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/citation/_layout.scss" as *;
+
+@mixin kendo-citation--layout() {
+    @include kendo-citation--layout-base();
+}

package/scss/citation/_theme.scss

@@ -0,0 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/citation/_theme.scss" as *;
+
+@mixin kendo-citation--theme() {
+    @include kendo-citation--theme-base();
+}

package/scss/citation/_variables.scss

@@ -0,0 +1,15 @@
+@use "../core/_index.scss" as *;
+
+// Citation
+
+/// The padding of the CitationPopover view.
+/// @group citation
+$kendo-citation-popover-view-padding: k-spacing(4) !default;
+/// The text color of the CitationPopover page indicator.
+/// @group citation
+$kendo-citation-pages-color: k-color(subtle) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/citation/_variables.scss" with (
+    $kendo-citation-popover-view-padding: $kendo-citation-popover-view-padding,
+    $kendo-citation-pages-color: $kendo-citation-pages-color
+);