purgetss 3.1.2 → 3.1.3

package/README.md

@@ -22,12 +22,13 @@
 - Provides more than 8400 [Tailwind-like utility classes](https://tailwindcss.com/) ready to use in your projects.
 - Creates a clean `app.tss` file with only the classes used in your project by parsing all your XML files.
 - You can customize any of the default classes through a simple configuration file, or you can create new *just-in-time* classes with arbitrary values within the `Views`.
-- You can easily use Font Awesome, Material Design, Lineicons, Boxicons, Tabler Icons and Framework7-Icons fonts in `Buttons` and `Labels`.
+- You can easily use Font Awesome, Material Design, Lineicons, Boxicons, Tabler Icons, Framework7-Icons and Bootstrap Icons fonts in `Buttons` and `Labels`.
 - Includes an Animation module to apply a 2D Matrix animation or transformation to any element or to an `Array` of elements.
 - Includes a simple two-dimensional Grid System to align and distribute elements in your views.
 
 ## List of available classes
 - [tailwind.tss](https://github.com/macCesar/purgeTSS/blob/master/dist/tailwind.tss)
+- [bootstrapicons.tss](https://github.com/macCesar/purgeTSS/blob/master/dist/bootstrapicons.tss)
 - [boxicons.tss](https://github.com/macCesar/purgeTSS/blob/master/dist/boxicons.tss)
 - [fontawesome.tss](https://github.com/macCesar/purgeTSS/blob/master/dist/fontawesome.tss)
 - [framework7icons.tss](https://github.com/macCesar/purgeTSS/blob/master/dist/framework7icons.tss)
@@ -270,10 +271,10 @@ Use **`purgetss module`** command to install the `purgetss.ui.js` module in your
 If you want to create a new Alloy Project with `purgetss` ready to go, use the `create` command.
 
 ```bash
-> purgetss create 'Name of the Project' [--vendor="fontawesome, materialdesign, lineicons, boxicons, framework7, tablericons"]
+> purgetss create 'Name of the Project' [--vendor="fontawesome, materialdesign, lineicons, boxicons, framework7, tablericons, bootstrapicons"]
 
 # alias:
-> purgetss c 'Name of the Project' [-v=fa,md,li,bx,f7,ti]
+> purgetss c 'Name of the Project' [-v=fa,md,li,bx,f7,ti,bi]
 ```
 
 You need to have `app.idprefix` and `app.idprefix` already configured in `ti config`.
@@ -300,7 +301,7 @@ When you run `purgetss create 'Name of the Project'` it will execute the followi
 - **`alloy new`** To convert it to an Alloy Project.
 - **`purgetss w`** To autorun `purgetss` every time you compile your project.
 - **`purgetss b`** To build a new `./purgetss/tailwind.tss` and `./purgetss/config.js` files.
-- **`[-v=fa,md,li,bx,f7,ti]`** Set the `--vendor` argument to copy the selected fonts into your project. Including the CommonJS module into `./app/lib/` folder.
+- **`[-v=fa,md,li,bx,f7,ti,bi]`** Set the `--vendor` argument to copy the selected fonts into your project. Including the CommonJS module into `./app/lib/` folder.
 - **`code .`**, **`subl .`** or **`open .`** It will use either one of these commands to open `VS Code`, `Sublime Text` or the project’s folder in that order.
 
 ## fonts
@@ -311,8 +312,10 @@ When you run `purgetss create 'Name of the Project'` it will execute the followi
 > purgetss f
 ```
 
-Use this command to copy the free versions of [Boxicons](https://boxicons.com), [Font Awesome](https://github.com/FortAwesome/Font-Awesome/tree/master/js-packages/%40fortawesome/fontawesome-free/webfonts), [Framework7 Icons](https://framework7.io/icons/), [LineIcons](https://lineicons.com/icons/?type=free), [Material Design Icons](https://github.com/google/material-design-icons) and [Tabler Icons](https://tabler-icons.io) Fonts into your `app/assets/fonts` folder. With their names fixed to work in iOS or Android.
+Use this command to copy the free versions of [Boxicons](https://boxicons.com), [Font Awesome](https://github.com/FortAwesome/Font-Awesome/tree/master/js-packages/%40fortawesome/fontawesome-free/webfonts), [Framework7 Icons](https://framework7.io/icons/), [LineIcons](https://lineicons.com/icons/?type=free), [Material Design Icons](https://github.com/google/material-design-icons), [Tabler Icons](https://tabler-icons.io) and [Bootstrap Icons](https://icons.getbootstrap.com) Fonts into your `app/assets/fonts` folder. With their names fixed to work in iOS or Android.
 
+> bootstrap-icons.ttf
+>
 > boxicons.ttf
 >
 > FontAwesome5Brands-Regular.ttf
@@ -351,38 +354,58 @@ After copying the desired fonts, you can use them in Buttons and Labels, just se
 ```xml
 <Alloy>
   <Window>
-    <View class="vertical">
-      <!-- FontAwesome -->
-      <Label class="mt-2 text-gray-700" text="FontAwesome" />
-      <Label class="text-xl text-blue-500 fa fa-home" />
-      <Button class="w-10 h-10 my-1 text-xl text-white bg-blue-500 rounded fa fa-home" />
-
-      <!-- Material Design -->
-      <Label class="mt-2 text-gray-700" text="Material Design" />
-      <Label class="text-xl text-blue-500 md md-home" />
-      <Button class="w-10 h-10 my-1 text-xl text-white bg-blue-500 rounded md md-home" />
-
-      <!-- LineIcons -->
-      <Label class="mt-2 text-gray-700" text="LineIcons" />
-
-      <Label class="text-xl text-blue-500 lni lni-delivery" />
-      <Button class="w-10 h-10 my-1 text-xl text-white bg-blue-500 rounded lni lni-delivery" />
-
-      <!-- Boxicons -->
-      <Label class="mt-2 text-gray-700" text="Boxicons" />
-      <Label class="text-xl text-blue-500 bx bx-home" />
-      <Button class="w-10 h-10 my-1 text-xl text-white bg-blue-500 rounded bx bx-home" />
-
-      <!-- Framework7-Icons -->
-      <Label class="mt-2 text-gray-700" text="Framework7-Icons" />
-      <Label class="text-xl text-blue-500 f7 f7-house" />
-      <Button class="w-10 h-10 my-1 text-xl text-white bg-blue-500 rounded f7 f7-house" />
-
-      <!-- Tabler-Icons -->
-      <Label class="mt-2 text-gray-700" text="Tabler-Icons" />
-      <Label class="text-xl text-blue-500 ti ti-home" />
-      <Button class="w-10 h-10 my-1 text-xl text-white bg-blue-500 rounded ti ti-home" />
-    </View>
+    <ScrollView>
+      <View class="grid">
+        <View class="grid-cols-2 mx-auto gap-y-2 vertical">
+          <!-- FontAwesome -->
+          <Label class="mt-2 text-gray-700" text="FontAwesome" />
+          <Label class="text-xl text-blue-500 fa fa-home" />
+          <Button class="w-10 h-10 my-1 text-xl text-white bg-blue-500 rounded fa fa-home" />
+        </View>
+
+        <View class="grid-cols-2 mx-auto gap-y-2 vertical">
+          <!-- Material Design -->
+          <Label class="mt-2 text-gray-700" text="Material Design" />
+          <Label class="text-xl text-blue-500 md md-home" />
+          <Button class="w-10 h-10 my-1 text-xl text-white bg-blue-500 rounded md md-home" />
+        </View>
+
+        <View class="grid-cols-2 mx-auto gap-y-2 vertical">
+          <!-- LineIcons -->
+          <Label class="mt-2 text-gray-700" text="LineIcons" />
+          <Label class="text-xl text-blue-500 lni lni-delivery" />
+          <Button class="w-10 h-10 my-1 text-xl text-white bg-blue-500 rounded lni lni-delivery" />
+        </View>
+
+        <View class="grid-cols-2 mx-auto gap-y-2 vertical">
+          <!-- Boxicons -->
+          <Label class="mt-2 text-gray-700" text="Boxicons" />
+          <Label class="text-xl text-blue-500 bx bx-home" />
+          <Button class="w-10 h-10 my-1 text-xl text-white bg-blue-500 rounded bx bx-home" />
+        </View>
+
+        <View class="grid-cols-2 mx-auto gap-y-2 vertical">
+          <!-- Framework7-Icons -->
+          <Label class="mt-2 text-gray-700" text="Framework7-Icons" />
+          <Label class="text-xl text-blue-500 f7 f7-house" />
+          <Button class="w-10 h-10 my-1 text-xl text-white bg-blue-500 rounded f7 f7-house" />
+        </View>
+
+        <View class="grid-cols-2 mx-auto gap-y-2 vertical">
+          <!-- Tabler-Icons -->
+          <Label class="mt-2 text-gray-700" text="Tabler-Icons" />
+          <Label class="text-xl text-blue-500 ti ti-home" />
+          <Button class="w-10 h-10 my-1 text-xl text-white bg-blue-500 rounded ti ti-home" />
+        </View>
+
+        <View class="grid-cols-2 mx-auto gap-y-2 vertical">
+          <!-- Bootstrap Icons -->
+          <Label class="mt-2 text-gray-700" text="Bootstrap Icons" />
+          <Label class="text-xl text-blue-500 bi bi-house-fill" />
+          <Button class="w-10 h-10 my-1 text-xl text-white bg-blue-500 rounded bi bi-house-fill" />
+        </View>
+      </View>
+    </ScrollView>
   </Window>
 </Alloy>
 ```
@@ -392,20 +415,23 @@ After copying the desired fonts, you can use them in Buttons and Labels, just se
 // Created by César Estrada
 // https://github.com/macCesar/purgeTSS
 
-// Tailwind styles
+// Main styles
 'View': { width: Ti.UI.SIZE, height: Ti.UI.SIZE }
 'Window': { backgroundColor: '#ffffff' }
 '.bg-blue-500': { backgroundColor: '#3b82f6' }
 '.rounded': { borderRadius: 4 }
 '.text-xl': { font: { fontSize: 20 } }
+'.gap-y-2': { top: 8, bottom: 8 }
+'.grid': { layout: 'horizontal' }
+'.grid-cols-2': { width: '50%' }
 '.h-10': { height: 40 }
-'.keep-screen-on[platform=android]': { keepScreenOn: true }
 '.vertical': { layout: 'vertical' }
 '.my-1': { top: 4, bottom: 4 }
+'.mx-auto': { right: null, left: null }
 '.mt-2': { top: 8 }
 '.text-white': { color: '#ffffff' }
+'.text-gray-700': { color: '#374151' }
 '.text-blue-500': { color: '#3b82f6' }
-'.text-gray-700': { color: '#3f3f46' }
 '.w-10': { width: 40 }
 
 // Default Font Awesome styles
@@ -422,7 +448,7 @@ After copying the desired fonts, you can use them in Buttons and Labels, just se
 
 // BoxIcons styles
 '.bx': { font: { fontFamily: 'boxicons' } }
-'.bx-home': { text: '\ued75', title: '\ued75' }
+'.bx-home': { text: '\ueb12', title: '\ueb12' }
 
 // Framework7 styles
 '.f7': { font: { fontFamily: 'Framework7-Icons' } }
@@ -431,27 +457,32 @@ After copying the desired fonts, you can use them in Buttons and Labels, just se
 // Tabler Icons styles
 '.ti': { font: { fontFamily: 'tabler-icons' } }
 '.ti-home': { text: '\ueac1', title: '\ueac1' }
+
+// Bootstrap Icons styles
+'.bi': { font: { fontFamily: 'bootstrap-icons' } }
+'.bi-house-fill': { text: '\uf424', title: '\uf424' }
 ```
 
 ## Result
-<img src="https://raw.githubusercontent.com/macCesar/purgeTSS/master/assets/images/icon-fonts-tabler.png" width="375" alt="iOS Screen - Icon Fonts">
+<img src="https://raw.githubusercontent.com/macCesar/purgeTSS/master/assets/images/icon-fonts-bootstrap-grid.png" width="375" alt="iOS Screen - Icon Fonts">
 
 ### Copying specific font vendors
 Use any of the following arguments to copy specific vendors:
 
 ```bash
-> purgetss fonts --vendor="fontawesome, materialdesign, lineicons, boxicons, framework7, tablericons"
+> purgetss fonts --vendor="fontawesome, materialdesign, lineicons, boxicons, framework7, tablericons, bootstrapicons"
 
 # alias:
-> purgetss f -v=fa,md,li,bx,f7,ti
+> purgetss f -v=fa,md,li,bx,f7,ti,bi
 ```
 
 Available aliases:
+- bi, bootstrap, bootstrapicons = Bootstrap Icons
 - bx, box, boxicons = BoxIcons
-- li, line, lineicons = LineIcons
+- f7, framework, framework7 = Framework7 Icons
 - fa, font, fontawesome = Font Awesome Icons
+- li, line, lineicons = LineIcons
 - md, material, materialdesign = Material Design Icons
-- f7, framework, framework7 = Framework7 Icons
 - ti, tablericons, tabler = Tabler Icons
 
 ### Copying corresponding CommonJS Modules
@@ -459,22 +490,23 @@ You can use the `--modules` flag to copy the corresponding CommonJS modules into
 
 ```bash
 > purgetss fonts --modules
-> purgetss fonts --modules --vendor="fontawesome, materialdesign, lineicons, boxicons, framework7, tablericons"
+> purgetss fonts --modules --vendor="fontawesome, materialdesign, lineicons, boxicons, framework7, tablericons, bootstrapicons"
 
 # alias:
 > purgetss f -m
-> purgetss f -m -v=fa,md,li,bx,f7,ti
+> purgetss f -m -v=fa,md,li,bx,f7,ti,bi
 ```
 
-Each library contains a CommonJS module exposing the UniCode strings for Font Awesome icons, Material Design Icons, Line Icons Boxicons and Framework7-Icons fonts.
+Each library contains a CommonJS module exposing the UniCode strings for Font Awesome Icons, Material Design Icons, Line Icons, Boxicons, Framework7-Icons and Bootstrap Icons fonts.
 
 All prefixes are stripped out from their class names and are camelCased, for example:
 
-- **Line Icons**: `lni-flag` becomes `flag`
+- **Bootstrap Icons** `bi-alarm-fill` becomes `alarmFill` or `bi-clock-fill` becomes `clockFill`.
 - **Font Awesome**: `fa-flag` becomes `flag`
+- **Framework7 Icons** `f7-alarm_fill` becomes `alarmFill` or `f7-clock_fill` becomes `clockFill`.
+- **Line Icons**: `lni-flag` becomes `flag`
 - **Material Design Icons**: `md-flag` becomes `flag`
 - **Tabler Icons** `ti-flag` becomes `flag` or `ti-cloud-download` becomes `cloudDownload`.
-- **Framework7 Icons** `f7-alarm_fill` becomes `alarmFill` or `f7-clock_fill` becomes `clockFill`.
 - **boxicons** have three sets of icons in the same font file: Regular, Solid and Logos, so we need to keep their prefixes:
 
   - **Regular**: `bx-flag` becomes `bxFlag`

package/bin/purgetss

@@ -36,7 +36,7 @@ program
 	.description('Creates a new Alloy Project with `purgetss` already configured.')
 	.help('Creates a new Alloy Project with `purgetss` already configured.')
 	.option('-t, --tailwind', 'To install Tailwind CSS in your project to work with `Tailwind CSS Intellisense`.')
-	.option('-v, --vendor <arguments>', 'Use any of the following arguments to copy specific vendors:\n   fa = Font Awesome Icons\n   md = Material Design Icons\n   li = LineIcons\n   bx = Boxicons\n   f7 = Framework7 Icons\n   ti = Tabler Icons')
+	.option('-v, --vendor <arguments>', 'Use any of the following arguments to copy specific vendors:\n   fa = Font Awesome Icons\n   md = Material Design Icons\n   li = LineIcons\n   bx = Boxicons\n   f7 = Framework7 Icons\n   ti = Tabler Icons\n   bi = Bootstrap Icons')
 	.argument('<name>', 'The name of the project')
 	.action((args, options, logger) => {
 		purgetss.create(args, options);
@@ -64,9 +64,9 @@ program
 program
 	.command('fonts')
 	.alias('f')
-	.description('Copy Font Awesome icons, Material Design Icons, LineIcons, Boxicons and Framework7-Icons Font files into your project.')
-	.help('Command to copy the Free versions of:\n\n   • Font Awesome Icons ( Brands, Regular, Solid )\n   • Material Design Icons\n   • LineIcons\n   • Boxicons\n   • Framework7 Icons\n   • Tabler Icons\n\nInto your projects’s app/assets/fonts/ folder.\n\nWith their names fixed to work with your app whether it is for iOS or for Android.')
-	.option('-v, --vendor <arguments>', 'Use any of the following arguments to copy specific vendors:\n   fa = Font Awesome Icons\n   md = Material Design Icons\n   li = LineIcons\n   bx = Boxicons\n   f7 = Framework7 Icons\n   ti = Tabler Icons')
+	.description('Copy Font Awesome icons, Material Design Icons, LineIcons, Boxicons, Framework7-Icons and Bootstrap Icons Font files into your project.')
+	.help('Command to copy the Free versions of:\n\n   • Font Awesome Icons ( Brands, Regular, Solid )\n   • Material Design Icons\n   • LineIcons\n   • Boxicons\n   • Framework7 Icons\n   • Tabler Icons\n   • Bootstrap Icons\n\nInto your projects’s app/assets/fonts/ folder.\n\nWith their names fixed to work with your app whether it is for iOS or for Android.')
+	.option('-v, --vendor <arguments>', 'Use any of the following arguments to copy specific vendors:\n   fa = Font Awesome Icons\n   md = Material Design Icons\n   li = LineIcons\n   bx = Boxicons\n   f7 = Framework7 Icons\n   ti = Tabler Icons\n   bi = Bootstrap Icons')
 	.option('-m, --modules', 'Use the `--modules` option to also copy the corresponding CommonJS module into `./app/lib/` folder.')
 	.action((args, options, logger) => {
 		purgetss.copyFonts(options);

package/dist/bootstrapicons.tss

@@ -4,9 +4,10 @@
 // Font Families
 '.bi': { font: { fontFamily: 'bootstrap-icons' } }
 '.bootstrap': { font: { fontFamily: 'bootstrap-icons' } }
+'.bootstrapicons': { font: { fontFamily: 'bootstrap-icons' } }
 
 // Font Icons
-// To use boxicons in Buttons AND Labels each class sets 'text' and 'title' properties
+// To use Bootstrap Icons in Buttons AND Labels each class sets 'text' and 'title' properties
 '.bi-123': { text: '\uf67f', title: '\uf67f' }
 '.bi-alarm-fill': { text: '\uf101', title: '\uf101' }
 '.bi-alarm': { text: '\uf102', title: '\uf102' }

package/dist/tailwind.tss

@@ -615,6 +615,7 @@
 // Component(s): Ti.UI.Animation
 // Property(ies): autoreverse
 '.autoreverse': { autoreverse: true }
+'.no-autoreverse': { autoreverse: false }
 
 // Component(s): Ti.UI.MaskedImage
 // Property(ies): mode ( Background Blend Mode )
@@ -4130,22 +4131,22 @@
 // Component(s): Ti.UI.Window
 // Property(ies): hidesBackButton
 '.hides-back-button': { hidesBackButton: true }
-'.shows-back-button': { hidesBackButton: false }
+'.show-back-button': { hidesBackButton: false }
 
 // Component(s): Ti.UI.Window
 // Property(ies): hidesBarsOnSwipe - iOS Only
 '.hides-bars-on-swipe[platform=ios]': { hidesBarsOnSwipe: true }
-'.shows-bars-on-swipe[platform=ios]': { hidesBarsOnSwipe: false }
+'.show-bars-on-swipe[platform=ios]': { hidesBarsOnSwipe: false }
 
 // Component(s): Ti.UI.Window
 // Property(ies): hidesBarsOnTap - iOS Only
 '.hides-bars-on-tap[platform=ios]': { hidesBarsOnTap: true }
-'.shows-bars-on-tap[platform=ios]': { hidesBarsOnTap: false }
+'.show-bars-on-tap[platform=ios]': { hidesBarsOnTap: false }
 
 // Component(s): Ti.UI.Window
 // Property(ies): hidesBarsWhenKeyboardAppears - iOS Only
 '.hides-bars-when-keyboard-appears[platform=ios]': { hidesBarsWhenKeyboardAppears: true }
-'.shows-bars-when-keyboard-appears[platform=ios]': { hidesBarsWhenKeyboardAppears: false }
+'.show-bars-when-keyboard-appears[platform=ios]': { hidesBarsWhenKeyboardAppears: false }
 
 // Component(s): Ti.UI.Window
 // Property(ies): hideShadow - iOS Only
@@ -4155,7 +4156,7 @@
 // Component(s): Ti.UI.Window
 // Property(ies): hidesSearchBarWhenScrolling - iOS Only
 '.hides-search-bar-when-scrolling[platform=ios]': { hidesSearchBarWhenScrolling: true }
-'.shows-search-bar-when-scrolling[platform=ios]': { hidesSearchBarWhenScrolling: false }
+'.show-search-bar-when-scrolling[platform=ios]': { hidesSearchBarWhenScrolling: false }
 
 // Component(s): Ti.UI.Window
 // Property(ies): homeIndicatorAutoHidden - iOS Only
@@ -5684,6 +5685,7 @@
 // Component(s): Ti.UI.ScrollableView
 // Property(ies): overlayEnabled
 '.overlay-enabled[platform=ios]': { overlayEnabled: true }
+'.overlay-disabled[platform=ios]': { overlayEnabled: false }
 
 // Component(s): Ti.UI.Android.CardView, Ti.UI.TextArea, Ti.UI.TextField
 // Property(ies): padding
@@ -6351,6 +6353,7 @@
 // Component(s): Ti.UI.ScrollableView
 // Property(ies): showPagingControl
 '.show-paging-control': { showPagingControl: true }
+'.hide-paging-control': { showPagingControl: false }
 
 // Component(s): Ti.UI.ScrollableView
 // Property(ies): pagingControlAlpha
@@ -7281,6 +7284,7 @@
 // Component(s): Ti.UI.SearchBar
 // Property(ies): showCancel
 '.show-cancel': { showCancel: true }
+'.hide-cancel': { showCancel: false }
 
 // Component(s): Ti.UI.TabGroup
 // Property(ies): smoothScrollOnTabClick
@@ -8005,11 +8009,11 @@
 // Ti.Media
 // Component(s): Ti.Media
 // Property(ies): audioSessionCategory - iOS Only
-'.audio-sesion-record[platform=ios]': { audioSessionCategory: Ti.Media.AUDIO_SESSION_CATEGORY_RECORD }
-'.audio-sesion-ambient[platform=ios]': { audioSessionCategory: Ti.Media.AUDIO_SESSION_CATEGORY_AMBIENT }
-'.audio-sesion-playback[platform=ios]': { audioSessionCategory: Ti.Media.AUDIO_SESSION_CATEGORY_PLAYBACK }
-'.audio-sesion-solo-ambient[platform=ios]': { audioSessionCategory: Ti.Media.AUDIO_SESSION_CATEGORY_SOLO_AMBIENT }
-'.audio-sesion-play-record[platform=ios]': { audioSessionCategory: Ti.Media.AUDIO_SESSION_CATEGORY_PLAY_AND_RECORD }
+'.audio-session-record[platform=ios]': { audioSessionCategory: Ti.Media.AUDIO_SESSION_CATEGORY_RECORD }
+'.audio-session-ambient[platform=ios]': { audioSessionCategory: Ti.Media.AUDIO_SESSION_CATEGORY_AMBIENT }
+'.audio-session-playback[platform=ios]': { audioSessionCategory: Ti.Media.AUDIO_SESSION_CATEGORY_PLAYBACK }
+'.audio-session-solo-ambient[platform=ios]': { audioSessionCategory: Ti.Media.AUDIO_SESSION_CATEGORY_SOLO_AMBIENT }
+'.audio-session-play-record[platform=ios]': { audioSessionCategory: Ti.Media.AUDIO_SESSION_CATEGORY_PLAY_AND_RECORD }
 
 // Component(s): Ti.Media.AudioPlayer[android], Ti.Media.Sound[android]
 // Property(ies): audioType

package/docs/whats-new/v2.5.0.md

@@ -322,7 +322,8 @@ Point to rotate around, specified as a dictionary object with x and y properties
 **Default:** `(0.5, 0.5)`
 
 ```css
-// anchorPoint Properties
+// Component(s): Ti.UI.Animation, Ti.UI.View
+// Property(ies): anchorPoint
 '.origin-center': { anchorPoint: { x: 0.5, y: 0.5 } }
 '.origin-top': { anchorPoint: { x: 0.5, y: 0 } }
 '.origin-top-right': { anchorPoint: { x: 1, y: 0 } }
@@ -340,7 +341,8 @@ Specifies if the animation should be replayed in reverse upon completion.
 **Default:** `false`
 
 ```css
-// autoreverse Property
+// Component(s): Ti.UI.Animation
+// Property(ies): autoreverse
 '.autoreverse': { autoreverse: true }
 '.no-autoreverse': { autoreverse: false }
 ```
@@ -351,7 +353,8 @@ Animation curve or easing function to apply to the animation.
 This API can be assigned the following constants:
 
 ```css
-// curve Property
+// Component(s): Ti.UI.Animation
+// Property(ies): curve
 '.ease-in': { curve: Ti.UI.ANIMATION_CURVE_EASE_IN }
 '.ease-out': { curve: Ti.UI.ANIMATION_CURVE_EASE_OUT }
 '.ease-linear': { curve: Ti.UI.ANIMATION_CURVE_LINEAR }
@@ -362,7 +365,8 @@ This API can be assigned the following constants:
 Delay, in milliseconds before starting the animation
 
 ```css
-// delay Property
+// Component(s): Ti.UI.Animation
+// Property(ies): delay
 '.delay-0': { delay: 0 }
 '.delay-25': { delay: 25 }
 '.delay-50': { delay: 50 }
@@ -384,8 +388,8 @@ Delay, in milliseconds before starting the animation
 Duration of the animation, in milliseconds.
 
 ```css
-// duration Property
-'.duration': { duration: 150 }
+// Component(s): Ti.UI.Animation
+// Property(ies): duration
 '.duration-0': { duration: 0 }
 '.duration-25': { duration: 25 }
 '.duration-50': { duration: 50 }
@@ -397,6 +401,7 @@ Duration of the animation, in milliseconds.
 '.duration-500': { duration: 500 }
 '.duration-700': { duration: 700 }
 '.duration-1000': { duration: 1000 }
+'.duration': { duration: 150 }
 ```
 #### repeat
 Number of times the animation should be performed.
@@ -404,7 +409,8 @@ Number of times the animation should be performed.
 If `autoreverse` is true, then one repeat of the animation consists of the animation being played once forward, and once backward.
 
 ```css
-// repeat Property
+// Component(s): Ti.UI.Animation
+// Property(ies): repeat
 '.repeat-1': { repeat: 1 }
 '.repeat-2': { repeat: 2 }
 '.repeat-3': { repeat: 3 }
@@ -425,7 +431,8 @@ Rotation angle, in degrees. See the rotate method for a discussion of rotation.
 **Default:** `No rotation.`
 
 ```css
-// rotate Property
+// Component(s): For the Animation Component
+// Property(ies): rotate
 '.rotate-0': { rotate: 0 }
 '.rotate-1': { rotate: 1 }
 '.rotate-2': { rotate: 2 }
@@ -435,14 +442,6 @@ Rotation angle, in degrees. See the rotate method for a discussion of rotation.
 '.rotate-45': { rotate: 45 }
 '.rotate-90': { rotate: 90 }
 '.rotate-180': { rotate: 180 }
-'.-rotate-180': { rotate: -180 }
-'.-rotate-90': { rotate: -90 }
-'.-rotate-45': { rotate: -45 }
-'.-rotate-12': { rotate: -12 }
-'.-rotate-6': { rotate: -6 }
-'.-rotate-3': { rotate: -3 }
-'.-rotate-2': { rotate: -2 }
-'.-rotate-1': { rotate: -1 }
 ```
 
 #### scale
@@ -451,8 +450,12 @@ Scale the matrix by the specified scaling factor. The same scaling factor is use
 **Default:** `1`
 
 ```css
-// scale Property
+// Component(s): Ti.UI.ScrollView
+// Property(ies): scale
 '.scale-0': { scale: '0' }
+'.scale-5': { scale: '.05' }
+'.scale-10': { scale: '.10' }
+'.scale-25': { scale: '.25' }
 '.scale-50': { scale: '.5' }
 '.scale-75': { scale: '.75' }
 '.scale-90': { scale: '.9' }
@@ -487,7 +490,8 @@ The clipMode property lets the user control the clipping behavior of the View. S
 - If none of the conditions are met, clipping is disabled.
 
 ```css
-// clipMode Property
+// Component(s): Ti.UI.View
+// Property(ies): clipMode - iOS Only
 '.clip-enabled[platform=ios]': { clipMode: Ti.UI.iOS.CLIP_MODE_ENABLED }
 '.clip-disabled[platform=ios]': { clipMode: Ti.UI.iOS.CLIP_MODE_DISABLED }
 ```
@@ -498,10 +502,13 @@ Color for the current page of the paging control, as a color name or hex triplet
 **Default:** `undefined (system-default white)`
 
 ```css
-// currentPageIndicatorColor Property
+// Component(s): Ti.UI.ScrollableView
+// Property(ies): currentPageIndicatorColor
 '.current-page-transparent': { currentPageIndicatorColor: 'transparent' }
 '.current-page-black': { currentPageIndicatorColor: '#000000' }
 '.current-page-white': { currentPageIndicatorColor: '#ffffff' }
+'.current-page-slate-50': { currentPageIndicatorColor: '#f8fafc' }
+'.current-page-slate-100': { currentPageIndicatorColor: '#f1f5f9' }
 // ...
 // The rest of available colors
 ```
@@ -512,9 +519,10 @@ Determines whether page bouncing effect is disabled.
 **Default**: `false`
 
 ```css
-// disableBounce Property
-'.enable-bounce': { disableBounce: false }
+// Component(s): Ti.UI.ListView, Ti.UI.ScrollableView, Ti.UI.ScrollView, Ti.UI.WebView
+// Property(ies): disableBounce
 '.disable-bounce': { disableBounce: true }
+'.enable-bounce': { disableBounce: false }
 ```
 
 ### overlayEnabled
@@ -525,9 +533,10 @@ If this property is set to true, the view takes up the entire height available i
 **Default**: `false`
 
 ```css
-// overlayEnabled Property
-'.overlay-enabled': { overlayEnabled: true }
-'.overlay-disabled': { overlayEnabled: false }
+// Component(s): Ti.UI.ScrollableView
+// Property(ies): overlayEnabled
+'.overlay-enabled[platform=ios]': { overlayEnabled: true }
+'.overlay-disabled[platform=ios]': { overlayEnabled: false }
 ```
 
 ### pageIndicatorColor
@@ -536,10 +545,13 @@ Color for the current page of the paging control, as a color name or hex triplet
 **Default:** `undefined (system-default white)`
 
 ```css
-// pageIndicatorColor Property
+// Component(s): Ti.UI.ScrollableView
+// Property(ies): pageIndicatorColor
 '.page-transparent': { pageIndicatorColor: 'transparent' }
 '.page-black': { pageIndicatorColor: '#000000' }
 '.page-white': { pageIndicatorColor: '#ffffff' }
+'.page-slate-50': { pageIndicatorColor: '#f8fafc' }
+'.page-slate-100': { pageIndicatorColor: '#f1f5f9' }
 // ...
 // The rest of available colors
 ```
@@ -550,7 +562,8 @@ Alpha value of the paging control.
 **Default**: `1`
 
 ```css
-// pagingControlAlpha Property
+// Component(s): Ti.UI.ScrollableView
+// Property(ies): pagingControlAlpha
 '.paging-alpha-0': { pagingControlAlpha: 0 }
 '.paging-alpha-5': { pagingControlAlpha: 0.05 }
 '.paging-alpha-10': { pagingControlAlpha: 0.1 }
@@ -574,10 +587,13 @@ Color of the paging control, as a color name or hex triplet.
 **Default:** `black`
 
 ```css
-// pagingControlColor Property
+// Component(s): Ti.UI.ScrollableView
+// Property(ies): pagingControlColor
 '.paging-transparent': { pagingControlColor: 'transparent' }
 '.paging-black': { pagingControlColor: '#000000' }
 '.paging-white': { pagingControlColor: '#ffffff' }
+'.paging-slate-50': { pagingControlColor: '#f8fafc' }
+'.paging-slate-100': { pagingControlColor: '#f1f5f9' }
 // ...
 // The rest of available colors
 ```
@@ -588,7 +604,8 @@ Height of the paging control.
 **Default:** `20`
 
 ```css
-// pagingControlHeight Property
+// Component(s): Ti.UI.ScrollableView
+// Property(ies): pagingControlHeight
 '.paging-h-0': { pagingControlHeight: 0 }
 '.paging-h-1': { pagingControlHeight: 4 }
 '.paging-h-2': { pagingControlHeight: 8 }
@@ -602,9 +619,7 @@ Height of the paging control.
 '.paging-h-10': { pagingControlHeight: 40 }
 '.paging-h-11': { pagingControlHeight: 44 }
 '.paging-h-12': { pagingControlHeight: 48 }
-'.paging-h-13': { pagingControlHeight: 52 }
 '.paging-h-14': { pagingControlHeight: 56 }
-'.paging-h-15': { pagingControlHeight: 60 }
 '.paging-h-16': { pagingControlHeight: 64 }
 '.paging-h-20': { pagingControlHeight: 80 }
 '.paging-h-24': { pagingControlHeight: 96 }
@@ -636,7 +651,8 @@ Set to true for the paging control at the top.
 **Default:** `false`
 
 ```css
-// pagingControlOnTop Property
+// Component(s): Ti.UI.ScrollableView
+// Property(ies): pagingControlOnTop
 '.paging-control-on-top': { pagingControlOnTop: true }
 '.paging-control-on-bottom': { pagingControlOnTop: false }
 ```
@@ -649,7 +665,8 @@ Set to less than or equal to 0 to disable timeout, to keep controls displayed.
 **Default:** `3000`
 
 ```css
-// pagingControlTimeout Property
+// Component(s): Ti.UI.ScrollableView
+// Property(ies): pagingControlTimeout
 '.paging-timeout-0': { pagingControlTimeout: 0 }
 '.paging-timeout-25': { pagingControlTimeout: 25 }
 '.paging-timeout-50': { pagingControlTimeout: 50 }
@@ -675,7 +692,8 @@ If this property is unset or true, scrolling is enabled.
 **Default:** `undefined (scrolling enabled)`
 
 ```css
-// scrollingEnabled Property
+// Component(s): Ti.UI.ScrollableView, Ti.UI.ScrollView
+// Property(ies): scrollingEnabled
 '.scrolling-enabled': { scrollingEnabled: true }
 '.scrolling-disabled': { scrollingEnabled: false }
 ```
@@ -688,9 +706,10 @@ Set to true to show paging control.
 **Default:** `false`
 
 ```css
-// showPagingControl Property
-'.show-paging': { showPagingControl: true }
-'.hide-paging': { showPagingControl: false }
+// Component(s): Ti.UI.ScrollableView
+// Property(ies): showPagingControl
+'.show-paging-control': { showPagingControl: true }
+'.hide-paging-control': { showPagingControl: false }
 ```
 
 ## Radial Gradients ( iOS only )
@@ -701,7 +720,8 @@ Use it in combination with `from-{color}` and `to-{color}` utilities.
 Unfortunately this implementation do not work on Android, due to the lack of support for percentage values in `startRadius` and `endRadius` properties.
 
 ```css
-// Radial backgroundGradient Property [iOS]
+// Component(s): Ti.UI.ListItem, Ti.UI.View
+// Property(ies): backgroundGradient: type, startRadius, endRadius, backfillStart, backfillEnd
 '.bg-radial[platform=ios]': { backgroundGradient: { type: 'radial', startRadius: '125%', endRadius: '0%', backfillStart: true, backfillEnd: true } }
 '.bg-radial-to-b[platform=ios]': { backgroundGradient: { type: 'radial', startPoint: { x: '50%', y: '0%' }, endPoint: { x: '50%', y: '0%' }, startRadius: '150%', endRadius: '0%', backfillStart: true, backfillEnd: true } }
 '.bg-radial-to-bl[platform=ios]': { backgroundGradient: { type: 'radial', startPoint: { x: '100%', y: '0%' }, endPoint: { x: '100%', y: '0%' }, startRadius: '150%', endRadius: '0%', backfillStart: true, backfillEnd: true } }

package/docs/whats-new/v2.5.3.md

@@ -9,7 +9,8 @@
 ## `zIndex` utilities
 Utilities for controlling the stack order of an element.
 ```css
-// zIndex Property
+// Component(s): Ti.UI.Animation, Ti.UI.View
+// Property(ies): zIndex
 '.z-0': { zIndex: 0 }
 '.z-10': { zIndex: 10 }
 '.z-20': { zIndex: 20 }