@progress/kendo-theme-utils 11.1.0-dev.3 → 11.1.0-dev.5

package/scss/interactivity/_will-change.scss

@@ -1,4 +1,26 @@
-// TODO: docs
+/// This is equivalent to `will-change: auto;`.
+/// @example will-change: auto;
+/// @name .k-will-change-auto
+/// @group will-change
+/// @contextType css
+
+/// This is equivalent to `will-change: scroll-position;`.
+/// @example will-change: scroll-position;
+/// @name .k-will-change-scroll
+/// @group will-change
+/// @contextType css
+
+/// This is equivalent to `will-change: contents;`.
+/// @example will-change: contents;
+/// @name .k-will-change-contents
+/// @group will-change
+/// @contextType css
+
+/// This is equivalent to `will-change: transform;`.
+/// @example will-change: transform;
+/// @name .k-will-change-transform
+/// @group will-change
+/// @contextType css
 
 @use "sass:map";
 @use "../_globals.scss" as *;

package/scss/layout/_display.scss

@@ -82,6 +82,94 @@
 /// @group display
 /// @contextType css
 
+// ============================================================================
+// Responsive Display Utilities
+// ============================================================================
+
+/// This is equivalent to `display: none;`.
+/// @example display: none;
+/// @name .k-d-{xs|md|lg|xl|xxl}-none
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: contents;`.
+/// @example display: contents;
+/// @name .k-d-{xs|md|lg|xl|xxl}-contents
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: block;`.
+/// @example display: block;
+/// @name .k-d-{xs|md|lg|xl|xxl}-block
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: inline;`.
+/// @example display: inline;
+/// @name .k-d-{xs|md|lg|xl|xxl}-inline
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: inline-block;`.
+/// @example display: inline-block;
+/// @name .k-d-{xs|md|lg|xl|xxl}-inline-block
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: flex;`.
+/// @example display: flex;
+/// @name .k-d-{xs|md|lg|xl|xxl}-flex
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: inline-flex;`.
+/// @example display: inline-flex;
+/// @name .k-d-{xs|md|lg|xl|xxl}-inline-flex
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
+/// @example display: grid
+/// @name .k-d-{xs|md|lg|xl|xxl}-grid
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: inline-grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
+/// @example display: inline-grid
+/// @name .k-d-{xs|md|lg|xl|xxl}-inline-grid
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: table;`.
+/// @example display: table;
+/// @name .k-d-{xs|md|lg|xl|xxl}-table
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: inline-table;`.
+/// @example display: inline-table;
+/// @name .k-d-{xs|md|lg|xl|xxl}-inline-table
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: list-item;`.
+/// @example display: list-item;
+/// @name .k-d-{xs|md|lg|xl|xxl}-list-item
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: table-row;`.
+/// @example display: table-row;
+/// @name .k-d-{xs|md|lg|xl|xxl}-table-row
+/// @group display-responsive
+/// @contextType css
+
+/// This is equivalent to `display: table-cell;`.
+/// @example display: table-cell;
+/// @name .k-d-{xs|md|lg|xl|xxl}-table-cell
+/// @group display-responsive
+/// @contextType css
+
 @use "sass:map";
 @use "../_globals.scss" as *;
 

package/scss/responsive-layout/_col-gap.scss

@@ -1,3 +1,571 @@
+/// Sets column gap to 0 pixels.
+/// @example --kendo-col-gap: 0px;
+/// @name .k-col-gap-0
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 1 pixel.
+/// @example --kendo-col-gap: 1px;
+/// @name .k-col-gap-1px
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 0.125rem (2px at 16px base).
+/// @example --kendo-col-gap: 0.125rem;
+/// @name .k-col-gap-0\.5
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 0.25rem (4px at 16px base).
+/// @example --kendo-col-gap: 0.25rem;
+/// @name .k-col-gap-1
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 0.375rem (6px at 16px base).
+/// @example --kendo-col-gap: 0.375rem;
+/// @name .k-col-gap-1\.5
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 0.5rem (8px at 16px base).
+/// @example --kendo-col-gap: 0.5rem;
+/// @name .k-col-gap-2
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 0.625rem (10px at 16px base).
+/// @example --kendo-col-gap: 0.625rem;
+/// @name .k-col-gap-2\.5
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 0.75rem (12px at 16px base).
+/// @example --kendo-col-gap: 0.75rem;
+/// @name .k-col-gap-3
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 0.875rem (14px at 16px base).
+/// @example --kendo-col-gap: 0.875rem;
+/// @name .k-col-gap-3\.5
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 1rem (16px at 16px base).
+/// @example --kendo-col-gap: 1rem;
+/// @name .k-col-gap-4
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 1.125rem (18px at 16px base).
+/// @example --kendo-col-gap: 1.125rem;
+/// @name .k-col-gap-4\.5
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 1.25rem (20px at 16px base).
+/// @example --kendo-col-gap: 1.25rem;
+/// @name .k-col-gap-5
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 1.375rem (22px at 16px base).
+/// @example --kendo-col-gap: 1.375rem;
+/// @name .k-col-gap-5\.5
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 1.5rem (24px at 16px base).
+/// @example --kendo-col-gap: 1.5rem;
+/// @name .k-col-gap-6
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 1.625rem (26px at 16px base).
+/// @example --kendo-col-gap: 1.625rem;
+/// @name .k-col-gap-6\.5
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 1.75rem (28px at 16px base).
+/// @example --kendo-col-gap: 1.75rem;
+/// @name .k-col-gap-7
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 1.875rem (30px at 16px base).
+/// @example --kendo-col-gap: 1.875rem;
+/// @name .k-col-gap-7\.5
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 2rem (32px at 16px base).
+/// @example --kendo-col-gap: 2rem;
+/// @name .k-col-gap-8
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 2.25rem (36px at 16px base).
+/// @example --kendo-col-gap: 2.25rem;
+/// @name .k-col-gap-9
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 2.5rem (40px at 16px base).
+/// @example --kendo-col-gap: 2.5rem;
+/// @name .k-col-gap-10
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 2.75rem (44px at 16px base).
+/// @example --kendo-col-gap: 2.75rem;
+/// @name .k-col-gap-11
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 3rem (48px at 16px base).
+/// @example --kendo-col-gap: 3rem;
+/// @name .k-col-gap-12
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 3.25rem (52px at 16px base).
+/// @example --kendo-col-gap: 3.25rem;
+/// @name .k-col-gap-13
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 3.5rem (56px at 16px base).
+/// @example --kendo-col-gap: 3.5rem;
+/// @name .k-col-gap-14
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 3.75rem (60px at 16px base).
+/// @example --kendo-col-gap: 3.75rem;
+/// @name .k-col-gap-15
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 4rem (64px at 16px base).
+/// @example --kendo-col-gap: 4rem;
+/// @name .k-col-gap-16
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 4.25rem (68px at 16px base).
+/// @example --kendo-col-gap: 4.25rem;
+/// @name .k-col-gap-17
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 4.5rem (72px at 16px base).
+/// @example --kendo-col-gap: 4.5rem;
+/// @name .k-col-gap-18
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 4.75rem (76px at 16px base).
+/// @example --kendo-col-gap: 4.75rem;
+/// @name .k-col-gap-19
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 5rem (80px at 16px base).
+/// @example --kendo-col-gap: 5rem;
+/// @name .k-col-gap-20
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 5.25rem (84px at 16px base).
+/// @example --kendo-col-gap: 5.25rem;
+/// @name .k-col-gap-21
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 5.5rem (88px at 16px base).
+/// @example --kendo-col-gap: 5.5rem;
+/// @name .k-col-gap-22
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 5.75rem (92px at 16px base).
+/// @example --kendo-col-gap: 5.75rem;
+/// @name .k-col-gap-23
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 6rem (96px at 16px base).
+/// @example --kendo-col-gap: 6rem;
+/// @name .k-col-gap-24
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 7rem (112px at 16px base).
+/// @example --kendo-col-gap: 7rem;
+/// @name .k-col-gap-25
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 8rem (128px at 16px base).
+/// @example --kendo-col-gap: 8rem;
+/// @name .k-col-gap-26
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 9rem (144px at 16px base).
+/// @example --kendo-col-gap: 9rem;
+/// @name .k-col-gap-27
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 10rem (160px at 16px base).
+/// @example --kendo-col-gap: 10rem;
+/// @name .k-col-gap-28
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 11rem (176px at 16px base).
+/// @example --kendo-col-gap: 11rem;
+/// @name .k-col-gap-29
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 12rem (192px at 16px base).
+/// @example --kendo-col-gap: 12rem;
+/// @name .k-col-gap-30
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to extra small spacing.
+/// @example --kendo-col-gap: var(--kendo-spacing-1, 0.25rem);
+/// @name .k-col-gap-xs
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to small spacing.
+/// @example --kendo-col-gap: var(--kendo-spacing-2, 0.5rem);
+/// @name .k-col-gap-sm
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to medium spacing.
+/// @example --kendo-col-gap: var(--kendo-spacing-3, 0.75rem);
+/// @name .k-col-gap-md
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to large spacing.
+/// @example --kendo-col-gap: var(--kendo-spacing-4, 1rem);
+/// @name .k-col-gap-lg
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to extra large spacing.
+/// @example --kendo-col-gap: var(--kendo-spacing-6, 1.5rem);
+/// @name .k-col-gap-xl
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to thin spacing.
+/// @example --kendo-col-gap: var(--kendo-spacing-0\.5, 0.125rem);
+/// @name .k-col-gap-thin
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to hair spacing.
+/// @example --kendo-col-gap: var(--kendo-spacing-1px, 1px);
+/// @name .k-col-gap-hair
+/// @group col-gap
+/// @contextType css
+
+// ============================================================================
+// Responsive Column Gap Utilities
+// ============================================================================
+
+/// Sets column gap to 0 pixels.
+/// @example --kendo-col-gap: 0px;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-0
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 1 pixel.
+/// @example --kendo-col-gap: 1px;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-1px
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 0.125rem (2px at 16px base).
+/// @example --kendo-col-gap: 0.125rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-0\.5
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 0.25rem (4px at 16px base).
+/// @example --kendo-col-gap: 0.25rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-1
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 0.375rem (6px at 16px base).
+/// @example --kendo-col-gap: 0.375rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-1\.5
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 0.5rem (8px at 16px base).
+/// @example --kendo-col-gap: 0.5rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-2
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 0.625rem (10px at 16px base).
+/// @example --kendo-col-gap: 0.625rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-2\.5
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 0.75rem (12px at 16px base).
+/// @example --kendo-col-gap: 0.75rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-3
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 0.875rem (14px at 16px base).
+/// @example --kendo-col-gap: 0.875rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-3\.5
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 1rem (16px at 16px base).
+/// @example --kendo-col-gap: 1rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-4
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 1.125rem (18px at 16px base).
+/// @example --kendo-col-gap: 1.125rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-4\.5
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 1.25rem (20px at 16px base).
+/// @example --kendo-col-gap: 1.25rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-5
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 1.375rem (22px at 16px base).
+/// @example --kendo-col-gap: 1.375rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-5\.5
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 1.5rem (24px at 16px base).
+/// @example --kendo-col-gap: 1.5rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-6
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 1.625rem (26px at 16px base).
+/// @example --kendo-col-gap: 1.625rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-6\.5
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 1.75rem (28px at 16px base).
+/// @example --kendo-col-gap: 1.75rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-7
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 1.875rem (30px at 16px base).
+/// @example --kendo-col-gap: 1.875rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-7\.5
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 2rem (32px at 16px base).
+/// @example --kendo-col-gap: 2rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-8
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 2.25rem (36px at 16px base).
+/// @example --kendo-col-gap: 2.25rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-9
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 2.5rem (40px at 16px base).
+/// @example --kendo-col-gap: 2.5rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-10
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 2.75rem (44px at 16px base).
+/// @example --kendo-col-gap: 2.75rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-11
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 3rem (48px at 16px base).
+/// @example --kendo-col-gap: 3rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-12
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 3.25rem (52px at 16px base).
+/// @example --kendo-col-gap: 3.25rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-13
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 3.5rem (56px at 16px base).
+/// @example --kendo-col-gap: 3.5rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-14
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 3.75rem (60px at 16px base).
+/// @example --kendo-col-gap: 3.75rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-15
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 4rem (64px at 16px base).
+/// @example --kendo-col-gap: 4rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-16
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 4.25rem (68px at 16px base).
+/// @example --kendo-col-gap: 4.25rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-17
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 4.5rem (72px at 16px base).
+/// @example --kendo-col-gap: 4.5rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-18
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 4.75rem (76px at 16px base).
+/// @example --kendo-col-gap: 4.75rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-19
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 5rem (80px at 16px base).
+/// @example --kendo-col-gap: 5rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-20
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 5.25rem (84px at 16px base).
+/// @example --kendo-col-gap: 5.25rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-21
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 5.5rem (88px at 16px base).
+/// @example --kendo-col-gap: 5.5rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-22
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 5.75rem (92px at 16px base).
+/// @example --kendo-col-gap: 5.75rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-23
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 6rem (96px at 16px base).
+/// @example --kendo-col-gap: 6rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-24
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 7rem (112px at 16px base).
+/// @example --kendo-col-gap: 7rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-25
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 8rem (128px at 16px base).
+/// @example --kendo-col-gap: 8rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-26
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 9rem (144px at 16px base).
+/// @example --kendo-col-gap: 9rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-27
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 10rem (160px at 16px base).
+/// @example --kendo-col-gap: 10rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-28
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 11rem (176px at 16px base).
+/// @example --kendo-col-gap: 11rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-29
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to 12rem (192px at 16px base).
+/// @example --kendo-col-gap: 12rem;
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-30
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to extra small spacing.
+/// @example --kendo-col-gap: var(--kendo-spacing-1, 0.25rem);
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-xs
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to small spacing.
+/// @example --kendo-col-gap: var(--kendo-spacing-2, 0.5rem);
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-sm
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to medium spacing.
+/// @example --kendo-col-gap: var(--kendo-spacing-3, 0.75rem);
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-md
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to large spacing.
+/// @example --kendo-col-gap: var(--kendo-spacing-4, 1rem);
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-lg
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to extra large spacing.
+/// @example --kendo-col-gap: var(--kendo-spacing-6, 1.5rem);
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-xl
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to thin spacing.
+/// @example --kendo-col-gap: var(--kendo-spacing-0\.5, 0.125rem);
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-thin
+/// @group col-gap
+/// @contextType css
+
+/// Sets column gap to hair spacing.
+/// @example --kendo-col-gap: var(--kendo-spacing-1px, 1px);
+/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-hair
+/// @group col-gap
+/// @contextType css
+
 @use "../_globals.scss" as *;
 @use "@progress/kendo-theme-core/scss/functions/index.import.scss" as *;
 @use "sass:map";