@progress/kendo-theme-utils 11.1.0-dev.4 → 11.1.0-dev.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-utils",
   "description": "Utility first library alongside Kendo UI",
-  "version": "11.1.0-dev.4",
+  "version": "11.1.0-dev.6",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -44,10 +44,10 @@
     "postpublish": "echo 'no postpublish for utils'"
   },
   "dependencies": {
-    "@progress/kendo-theme-core": "11.1.0-dev.4"
+    "@progress/kendo-theme-core": "11.1.0-dev.6"
   },
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "e3ca3e519a00fa4da7a575c64aba2e6a7e34991d"
+  "gitHead": "2bfdc0d1f3d785894ad99f35f140cc6219c06fa2"
 }

package/scss/border/_outline-color.scss

@@ -28,6 +28,222 @@
 /// @group outline-color
 /// @contextType css
 
+/// Sets the border color to the app surface color.
+/// @example outline-color: var(--kendo-color-app-surface, #fafafa);
+/// @name .k-outline-app-surface
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the on app surface color.
+/// @example outline-color: var(--kendo-color-on-app-surface, #424242);
+/// @name .k-outline-on-app-surface
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the subtle color.
+/// @example outline-color: var(--kendo-color-subtle, #666666);
+/// @name .k-outline-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the surface color.
+/// @example outline-color: var(--kendo-color-surface, #ffffff);
+/// @name .k-outline-surface
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the surface alt color.
+/// @example outline-color: var(--kendo-color-surface-alt, #f5f5f5);
+/// @name .k-outline-surface-alt
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the border color.
+/// @example outline-color: var(--kendo-color-border, #d9d9d9);
+/// @name .k-outline-border
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the border alt color.
+/// @example outline-color: var(--kendo-color-outline-alt, #e0e0e0);
+/// @name .k-outline-alt
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the base subtle color.
+/// @example outline-color: var(--kendo-color-base-subtle, #f0f0f0);
+/// @name .k-outline-base-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the base emphasis color.
+/// @example outline-color: var(--kendo-color-base-emphasis, #000000);
+/// @name .k-outline-base-emphasis
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the primary subtle color.
+/// @example outline-color: var(--kendo-color-primary-subtle, #e3f2fd);
+/// @name .k-outline-primary-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the primary color.
+/// @example outline-color: var(--kendo-color-primary, #2196f3);
+/// @name .k-outline-primary
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the primary emphasis color.
+/// @example outline-color: var(--kendo-color-primary-emphasis, #1976d2);
+/// @name .k-outline-primary-emphasis
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the secondary subtle color.
+/// @example outline-color: var(--kendo-color-secondary-subtle, #f3e5f5);
+/// @name .k-outline-secondary-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the secondary color.
+/// @example outline-color: var(--kendo-color-secondary, #9c27b0);
+/// @name .k-outline-secondary
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the secondary emphasis color.
+/// @example outline-color: var(--kendo-color-secondary-emphasis, #7b1fa2);
+/// @name .k-outline-secondary-emphasis
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the tertiary subtle color.
+/// @example outline-color: var(--kendo-color-tertiary-subtle, #fff3e0);
+/// @name .k-outline-tertiary-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the tertiary color.
+/// @example outline-color: var(--kendo-color-tertiary, #ff9800);
+/// @name .k-outline-tertiary
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the tertiary emphasis color.
+/// @example outline-color: var(--kendo-color-tertiary-emphasis, #f57c00);
+/// @name .k-outline-tertiary-emphasis
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the info subtle color.
+/// @example outline-color: var(--kendo-color-info-subtle, #e1f5fe);
+/// @name .k-outline-info-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the info color.
+/// @example outline-color: var(--kendo-color-info, #00bcd4);
+/// @name .k-outline-info
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the info emphasis color.
+/// @example outline-color: var(--kendo-color-info-emphasis, #0097a7);
+/// @name .k-outline-info-emphasis
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the success subtle color.
+/// @example outline-color: var(--kendo-color-success-subtle, #e8f5e8);
+/// @name .k-outline-success-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the success color.
+/// @example outline-color: var(--kendo-color-success, #4caf50);
+/// @name .k-outline-success
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the success emphasis color.
+/// @example outline-color: var(--kendo-color-success-emphasis, #388e3c);
+/// @name .k-outline-success-emphasis
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the warning subtle color.
+/// @example outline-color: var(--kendo-color-warning-subtle, #fff8e1);
+/// @name .k-outline-warning-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the warning color.
+/// @example outline-color: var(--kendo-color-warning, #ff9800);
+/// @name .k-outline-warning
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the warning emphasis color.
+/// @example outline-color: var(--kendo-color-warning-emphasis, #f57c00);
+/// @name .k-outline-warning-emphasis
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the error subtle color.
+/// @example outline-color: var(--kendo-color-error-subtle, #ffebee);
+/// @name .k-outline-error-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the error color.
+/// @example outline-color: var(--kendo-color-error, #f44336);
+/// @name .k-outline-error
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the error emphasis color.
+/// @example outline-color: var(--kendo-color-error-emphasis, #d32f2f);
+/// @name .k-outline-error-emphasis
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the light subtle color.
+/// @example outline-color: var(--kendo-color-light-subtle, #f8f9fa);
+/// @name .k-outline-light-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the light color.
+/// @example outline-color: var(--kendo-color-light, #f8f9fa);
+/// @name .k-outline-light
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the light emphasis color.
+/// @example outline-color: var(--kendo-color-light-emphasis, #dee2e6);
+/// @name .k-outline-light-emphasis
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the dark subtle color.
+/// @example outline-color: var(--kendo-color-dark-subtle, #6c757d);
+/// @name .k-outline-dark-subtle
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the dark color.
+/// @example outline-color: var(--kendo-color-dark, #343a40);
+/// @name .k-outline-dark
+/// @group outline-color
+/// @contextType css
+
+/// Sets the border color to the dark emphasis color.
+/// @example outline-color: var(--kendo-color-dark-emphasis, #212529);
+/// @name .k-outline-dark-emphasis
+/// @group outline-color
+/// @contextType css
+
 @use "sass:map";
 @use "../_globals.scss" as *;
 

package/scss/flex-grid/_grid-column-start-end.scss

@@ -102,48 +102,56 @@
 /// @example grid-column-span: span 3 / span 3;
 /// @name .k-col-span-3
 /// @group grid-column
-
 /// @contextType css
+
 /// This is equivalent to `grid-column-start: span 4 / span 4;`.
 /// @example grid-column-start: span 4 / span 4;
 /// @name .k-col-span-4
 /// @group grid-column
 /// @contextType css
+
 /// This is equivalent to `grid-column-start: span 5 / span 5;`.
 /// @example grid-column-start: span 5 / span 5;
 /// @name .k-col-span-5
 /// @group grid-column
 /// @contextType css
+
 /// This is equivalent to `grid-column-start: span 6 / span 6;`.
 /// @example grid-column-start: span 6 / span 6;
 /// @name .k-col-span-6
 /// @group grid-column
 /// @contextType css
+
 /// This is equivalent to `grid-column-start: span 7 / span 7;`.
 /// @example grid-column-start: span 7 / span 7;
 /// @name .k-col-span-7
 /// @group grid-column
 /// @contextType css
+
 /// This is equivalent to `grid-column-start: span 8 / span 8;`.
 /// @example grid-column-start: span 8 / span 8;
 /// @name .k-col-span-8
 /// @group grid-column
 /// @contextType css
+
 /// This is equivalent to `grid-column-start: span 9 / span 9;`.
 /// @example grid-column-start: span 9 / span 9;
 /// @name .k-col-span-9
 /// @group grid-column
 /// @contextType css
+
 /// This is equivalent to `grid-column-start: span 10 / span 10;`.
 /// @example grid-column-start: span 10 / span 10;
 /// @name .k-col-span-10
 /// @group grid-column
 /// @contextType css
+
 /// This is equivalent to `grid-column-start: span 11 / span 11;`.
 /// @example grid-column-start: span 11 / span 11;
 /// @name .k-col-span-11
 /// @group grid-column
 /// @contextType css
+
 /// This is equivalent to `grid-column-start: span 12 / span 12;`.
 /// @example grid-column-start: span 12 / span 12;
 /// @name .k-col-span-12
@@ -334,7 +342,7 @@
 
 /// This is equivalent to `grid-column-start: auto; for the specific breakpoint`.
 /// @example grid-column-start: auto;
-/// @name .k-col-start-auto
+/// @name .k-col-start-{xs|sm|md|lg|xl|xxl}-auto
 /// @group grid-column-responsive
 /// @contextType css
 
@@ -358,48 +366,56 @@
 /// @example grid-column-span: span 3 / span 3;
 /// @name .k-col-span-{xs|sm|md|lg|xl|xxl}-3
 /// @group grid-column-responsive
-
 /// @contextType css
+
 /// This is equivalent to `grid-column-start: span 4 / span 4; for the specific breakpoint`.
 /// @example grid-column-start: span 4 / span 4;
 /// @name .k-col-span-{xs|sm|md|lg|xl|xxl}-4
 /// @group grid-column-responsive
 /// @contextType css
+
 /// This is equivalent to `grid-column-start: span 5 / span 5; for the specific breakpoint`.
 /// @example grid-column-start: span 5 / span 5;
 /// @name .k-col-span-{xs|sm|md|lg|xl|xxl}-5
 /// @group grid-column-responsive
 /// @contextType css
+
 /// This is equivalent to `grid-column-start: span 6 / span 6; for the specific breakpoint`.
 /// @example grid-column-start: span 6 / span 6;
 /// @name .k-col-span-{xs|sm|md|lg|xl|xxl}-6
 /// @group grid-column-responsive
 /// @contextType css
+
 /// This is equivalent to `grid-column-start: span 7 / span 7; for the specific breakpoint`.
 /// @example grid-column-start: span 7 / span 7;
 /// @name .k-col-span-{xs|sm|md|lg|xl|xxl}-7
 /// @group grid-column-responsive
 /// @contextType css
+
 /// This is equivalent to `grid-column-start: span 8 / span 8; for the specific breakpoint`.
 /// @example grid-column-start: span 8 / span 8;
 /// @name .k-col-span-{xs|sm|md|lg|xl|xxl}-8
 /// @group grid-column-responsive
 /// @contextType css
+
 /// This is equivalent to `grid-column-start: span 9 / span 9; for the specific breakpoint`.
 /// @example grid-column-start: span 9 / span 9;
 /// @name .k-col-span-{xs|sm|md|lg|xl|xxl}-9
 /// @group grid-column-responsive
 /// @contextType css
+
 /// This is equivalent to `grid-column-start: span 10 / span 10; for the specific breakpoint`.
 /// @example grid-column-start: span 10 / span 10;
 /// @name .k-col-span-{xs|sm|md|lg|xl|xxl}-10
 /// @group grid-column-responsive
 /// @contextType css
+
 /// This is equivalent to `grid-column-start: span 11 / span 11; for the specific breakpoint`.
 /// @example grid-column-start: span 11 / span 11;
 /// @name .k-col-span-{xs|sm|md|lg|xl|xxl}-11
 /// @group grid-column-responsive
 /// @contextType css
+
 /// This is equivalent to `grid-column-start: span 12 / span 12; for the specific breakpoint`.
 /// @example grid-column-start: span 12 / span 12;
 /// @name .k-col-span-{xs|sm|md|lg|xl|xxl}-12
@@ -430,49 +446,49 @@
 
 /// This is equivalent to `grid-column-end: 2; for the specific breakpoint`.
 /// @example grid-column-end: 2;
-/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-12
+/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-2
 /// @group grid-column-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-column-end: 3; for the specific breakpoint`.
 /// @example grid-column-end: 3;
-/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-13
+/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-3
 /// @group grid-column-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-column-end: 4; for the specific breakpoint`.
 /// @example grid-column-end: 4;
-/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-14
+/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-4
 /// @group grid-column-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-column-end: 5; for the specific breakpoint`.
 /// @example grid-column-end: 5;
-/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-15
+/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-5
 /// @group grid-column-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-column-end: 6; for the specific breakpoint`.
 /// @example grid-column-end: 6;
-/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-16
+/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-6
 /// @group grid-column-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-column-end: 7; for the specific breakpoint`.
 /// @example grid-column-end: 7;
-/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-17
+/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-7
 /// @group grid-column-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-column-end: 8; for the specific breakpoint`.
 /// @example grid-column-end: 8;
-/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-18
+/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-8
 /// @group grid-column-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-column-end: 9; for the specific breakpoint`.
 /// @example grid-column-end: 9;
-/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-19
+/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-9
 /// @group grid-column-responsive
 /// @contextType css
 
@@ -502,7 +518,7 @@
 
 /// This is equivalent to `grid-column-end: auto; for the specific breakpoint`.
 /// @example grid-column-end: auto;
-/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-1auto
+/// @name .k-col-end-{xs|sm|md|lg|xl|xxl}-auto
 /// @group grid-column-responsive
 /// @contextType css
 

package/scss/flex-grid/_grid-row-start-end.scss

@@ -102,48 +102,56 @@
 /// @example grid-row-span: span 3 / span 3;
 /// @name .k-row-span-3
 /// @group grid-row
-
 /// @contextType css
+
 /// This is equivalent to `grid-row-start: span 4 / span 4;`.
 /// @example grid-row-start: span 4 / span 4;
 /// @name .k-row-span-4
 /// @group grid-row
 /// @contextType css
+
 /// This is equivalent to `grid-row-start: span 5 / span 5;`.
 /// @example grid-row-start: span 5 / span 5;
 /// @name .k-row-span-5
 /// @group grid-row
 /// @contextType css
+
 /// This is equivalent to `grid-row-start: span 6 / span 6;`.
 /// @example grid-row-start: span 6 / span 6;
 /// @name .k-row-span-6
 /// @group grid-row
 /// @contextType css
+
 /// This is equivalent to `grid-row-start: span 7 / span 7;`.
 /// @example grid-row-start: span 7 / span 7;
 /// @name .k-row-span-7
 /// @group grid-row
 /// @contextType css
+
 /// This is equivalent to `grid-row-start: span 8 / span 8;`.
 /// @example grid-row-start: span 8 / span 8;
 /// @name .k-row-span-8
 /// @group grid-row
 /// @contextType css
+
 /// This is equivalent to `grid-row-start: span 9 / span 9;`.
 /// @example grid-row-start: span 9 / span 9;
 /// @name .k-row-span-9
 /// @group grid-row
 /// @contextType css
+
 /// This is equivalent to `grid-row-start: span 10 / span 10;`.
 /// @example grid-row-start: span 10 / span 10;
 /// @name .k-row-span-10
 /// @group grid-row
 /// @contextType css
+
 /// This is equivalent to `grid-row-start: span 11 / span 11;`.
 /// @example grid-row-start: span 11 / span 11;
 /// @name .k-row-span-11
 /// @group grid-row
 /// @contextType css
+
 /// This is equivalent to `grid-row-start: span 12 / span 12;`.
 /// @example grid-row-start: span 12 / span 12;
 /// @name .k-row-span-12
@@ -422,7 +430,7 @@
 
 /// This is equivalent to `grid-row-end: auto; for the specific breakpoint`.
 /// @example grid-row-end: auto;
-/// @name .k-row-end-{xs|sm|md|lg|xl|xxl}-1auto
+/// @name .k-row-end-{xs|sm|md|lg|xl|xxl}-auto
 /// @group grid-row-responsive
 /// @contextType css
 

package/scss/flex-grid/_grid-template-columns.scss

@@ -88,49 +88,49 @@
 
 /// This is equivalent to `grid-template-columns: repeat(2, minmax(0, 1fr)); for the specific breakpoint`.
 /// @example grid-template-columns: repeat(2, minmax(0, 1fr));
-/// @name .k-grid-cols-{xs|sm|md|lg|xl}-1|xxl2
+/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-2
 /// @group grid-template-columns-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-template-columns: repeat(3, minmax(0, 1fr)); for the specific breakpoint`.
 /// @example grid-template-columns: repeat(3, minmax(0, 1fr));
-/// @name .k-grid-cols-{xs|sm|md|lg|xl}-1|xxl3
+/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-3
 /// @group grid-template-columns-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-template-columns: repeat(4, minmax(0, 1fr)); for the specific breakpoint`.
 /// @example grid-template-columns: repeat(4, minmax(0, 1fr));
-/// @name .k-grid-cols-{xs|sm|md|lg|xl}-1|xxl4
+/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-4
 /// @group grid-template-columns-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-template-columns: repeat(5, minmax(0, 1fr)); for the specific breakpoint`.
 /// @example grid-template-columns: repeat(5, minmax(0, 1fr));
-/// @name .k-grid-cols-{xs|sm|md|lg|xl}-1|xxl5
+/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-5
 /// @group grid-template-columns-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-template-columns: repeat(6, minmax(0, 1fr)); for the specific breakpoint`.
 /// @example grid-template-columns: repeat(6, minmax(0, 1fr));
-/// @name .k-grid-cols-{xs|sm|md|lg|xl}-1|xxl6
+/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-6
 /// @group grid-template-columns-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-template-columns: repeat(7, minmax(0, 1fr)); for the specific breakpoint`.
 /// @example grid-template-columns: repeat(7, minmax(0, 1fr));
-/// @name .k-grid-cols-{xs|sm|md|lg|xl}-1|xxl7
+/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-7
 /// @group grid-template-columns-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-template-columns: repeat(8, minmax(0, 1fr)); for the specific breakpoint`.
 /// @example grid-template-columns: repeat(8, minmax(0, 1fr));
-/// @name .k-grid-cols-{xs|sm|md|lg|xl}-1|xxl8
+/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-8
 /// @group grid-template-columns-responsive
 /// @contextType css
 
 /// This is equivalent to `grid-template-columns: repeat(9, minmax(0, 1fr)); for the specific breakpoint`.
 /// @example grid-template-columns: repeat(9, minmax(0, 1fr));
-/// @name .k-grid-cols-{xs|sm|md|lg|xl}-1|xxl9
+/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-9
 /// @group grid-template-columns-responsive
 /// @contextType css
 
@@ -152,12 +152,6 @@
 /// @group grid-template-columns-responsive
 /// @contextType css
 
-/// This is equivalent to `grid-template-columns: none;`.
-/// @example grid-template-columns: none;
-/// @name .k-grid-cols-none
-/// @group grid-template-columns
-/// @contextType css
-
 @use "sass:map";
 @use "../_globals.scss" as *;
 

package/scss/flex-grid/_grid-template-rows.scss

@@ -10,6 +10,66 @@
 /// @group grid-template-rows
 /// @contextType css
 
+/// This is equivalent to `grid-template-rows: repeat(3, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(3, minmax(0, 1fr));
+/// @name .k-grid-rows-3
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: repeat(4, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(4, minmax(0, 1fr));
+/// @name .k-grid-rows-4
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: repeat(5, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(5, minmax(0, 1fr));
+/// @name .k-grid-rows-5
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: repeat(6, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(6, minmax(0, 1fr));
+/// @name .k-grid-rows-6
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: repeat(7, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(7, minmax(0, 1fr));
+/// @name .k-grid-rows-7
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: repeat(8, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(8, minmax(0, 1fr));
+/// @name .k-grid-rows-8
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: repeat(9, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(9, minmax(0, 1fr));
+/// @name .k-grid-rows-9
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: repeat(10, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(10, minmax(0, 1fr));
+/// @name .k-grid-rows-10
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: repeat(11, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(11, minmax(0, 1fr));
+/// @name .k-grid-rows-11
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: repeat(12, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(12, minmax(0, 1fr));
+/// @name .k-grid-rows-12
+/// @group grid-template-rows
+/// @contextType css
+
 /// This is equivalent to `grid-template-rows: none;`.
 /// @example grid-template-rows: none;
 /// @name .k-grid-rows-none

package/scss/flex-grid/_order.scss

@@ -1,6 +1,6 @@
 /// This is equivalent to `order: 1;`.
 /// @example order: 1;
-/// @name .k-order-first
+/// @name .k-order-{1-12}
 /// @group order
 /// @contextType css