@tabler/core 1.0.0-beta23 → 1.0.0-beta24

package/docs/ui/utilities/margins.mdx

@@ -0,0 +1,234 @@
+---
+title: Margins
+summary: Use margin utilities to control the space between elements.
+description: Control the space between elements with margin utilities.
+---
+
+Margin utilities allow you to control the space between elements, providing flexibility to suit different design needs. These utilities are especially useful for creating spacing between components or aligning them consistently. Below are examples of how to use margin utilities for various directions and sizes.
+
+
+### Margin size
+
+In table below you can see the available margin sizes.
+
+Name|Value
+-|-
+0|0
+1|0.25rem
+2|0.5rem
+3|1rem
+4|1.5rem
+5|2rem
+6|3rem
+7|5rem
+8|8rem
+
+
+### Margin
+
+Use the `.m-*` utilities to control the margin of an element. Margin utilities are used to create consistent spacing around an element, ensuring that the layout is visually balanced.
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-purple-lt">
+    <div class="px-3 py-2 m-0 bg-purple rounded text-white font-monospace">.m-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-purple-lt">
+    <div class="px-3 py-2 m-4 bg-purple rounded text-white font-monospace">.m-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-purple-lt">
+    <div class="px-3 py-2 m-8 bg-purple rounded text-white font-monospace">.m-8</div>
+  </div>
+</div>
+```
+
+### Start margin
+
+Start margins control the spacing to the left of an element, helping to create consistent horizontal gaps between elements. Start margin class names are prefixed with `ms-`.
+
+```html
+<div class="ms-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-red-lt">
+    <div class="px-3 py-2 ms-0 bg-red rounded text-white font-monospace">.ms-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-red-lt">
+    <div class="px-3 py-2 ms-4 bg-red rounded text-white font-monospace">.ms-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-red-lt">
+    <div class="px-3 py-2 ms-8 bg-red rounded text-white font-monospace">.ms-8</div>
+  </div>
+</div>
+```
+
+### End margin
+
+End margins control the spacing on the right side of an element. These utilities are helpful for creating visual separation between elements that flow horizontally. End margin class names are prefixed with `me-`.
+
+```html
+<div class="me-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-orange-lt">
+    <div class="px-3 py-2 ms-0 bg-orange rounded text-white font-monospace">.me-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-orange-lt">
+    <div class="px-3 py-2 me-4 bg-orange rounded text-white font-monospace">.me-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-orange-lt">
+    <div class="px-3 py-2 me-8 bg-orange rounded text-white font-monospace">.me-8</div>
+  </div>
+</div>
+```
+
+### Top margin
+
+Top margins define the spacing above an element. This is useful for separating stacked components or creating vertical spacing between sections. Top margin class names are prefixed with `mt-`.
+
+```html
+<div class="mt-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-yellow-lt">
+    <div class="px-3 py-2 mt-0 bg-yellow rounded text-white font-monospace">.mt-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-yellow-lt">
+    <div class="px-3 py-2 mt-4 bg-yellow rounded text-white font-monospace">.mt-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-yellow-lt">
+    <div class="px-3 py-2 mt-8 bg-yellow rounded text-white font-monospace">.mt-8</div>
+  </div>
+</div>
+```
+
+### Bottom margin
+
+Bottom margins control the spacing below an element, helping to create consistent vertical gaps between stacked elements. Bottom margin class names are prefixed with `mb-`.
+
+```html
+<div class="mb-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-lime-lt">
+    <div class="px-3 py-2 mb-0 bg-lime rounded text-white font-monospace">.mb-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-lime-lt">
+    <div class="px-3 py-2 mb-4 bg-lime rounded text-white font-monospace">.mb-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-lime-lt">
+    <div class="px-3 py-2 mb-8 bg-lime rounded text-white font-monospace">.mb-8</div>
+  </div>
+</div>
+```
+
+### Horizontal margin
+
+Use the `mx-*` utilities to control the horizontal margin of an element. Horizontal margin utilities are used to create consistent spacing between elements that flow horizontally.
+
+```html
+<div class="mx-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-azure-lt">
+    <div class="px-3 py-2 mx-0 bg-azure rounded text-white font-monospace">.mx-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-azure-lt">
+    <div class="px-3 py-2 mx-4 bg-azure rounded text-white font-monospace">.mx-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-azure-lt">
+    <div class="px-3 py-2 mx-8 bg-azure rounded text-white font-monospace">.mx-8</div>
+  </div>
+</div>
+```
+
+
+### Vertical margin
+
+Use the `my-*` utilities to control the vertical margin of an element. Vertical margin utilities are used to create consistent spacing between elements that flow vertically.
+
+```html
+<div class="my-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-blue-lt">
+    <div class="px-3 py-2 my-0 bg-blue rounded text-white font-monospace">.my-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-blue-lt">
+    <div class="px-3 py-2 my-4 bg-blue rounded text-white font-monospace">.my-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-blue-lt">
+    <div class="px-3 py-2 my-8 bg-blue rounded text-white font-monospace">.my-8</div>
+  </div>
+</div>
+```
+
+## Horizontal centering
+
+Additionally, Tabler also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a width set—by setting the horizontal margins to `auto`.
+
+```html
+<div class="mx-auto">...</div>
+```
+
+```html example hide-code centered vertical
+<div class="bg-teal-lt w-100 d-flex">
+  <div class="px-3 py-2 mx-auto bg-teal rounded text-white font-monospace">.mx-auto</div>
+</div>
+```
+
+## Gap
+
+Use the `.gap-*` utilities to control the space between elements in a grid layout. The gap utilities are used to create consistent spacing between grid items, ensuring that the layout is visually balanced.
+
+```html
+<div class="d-grid gap-6">...</div>
+```
+
+```html example 
+<div class="d-grid gap-6 bg-indigo-lt">
+  <div class="px-3 py-2 bg-indigo text-white rounded">Grid item 1</div>
+  <div class="px-3 py-2 bg-indigo text-white rounded">Grid item 2</div>
+  <div class="px-3 py-2 bg-indigo text-white rounded">Grid item 3</div>
+</div>
+```

package/docs/ui/utilities/vertical-align.mdx

@@ -0,0 +1,66 @@
+---
+title: Vertical align
+description: Quickly and easily align elements vertically with utility classes.
+summary: Easily modify the vertical alignment of elements such as inline, inline-block, inline-table, and table-cell to ensure proper positioning and alignment within their parent containers, allowing for more precise control over your layout and design.
+---
+
+Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed.
+
+## Inline elements
+
+Use vertical alignment utilities to align inline-level elements relative to their surrounding text or baseline. These classes are particularly useful for aligning small inline elements like icons or badges alongside text.
+
+```html
+<span class="align-baseline">baseline</span>
+<span class="align-top">top</span>
+<span class="align-middle">middle</span>
+<span class="align-bottom">bottom</span>
+<span class="align-text-top">text-top</span>
+<span class="align-text-bottom">text-bottom</span>
+```
+
+```html example centered 
+<div>
+  <span class="align-baseline">baseline</span>
+  <span class="align-top">top</span>
+  <span class="align-middle">middle</span>
+  <span class="align-bottom">bottom</span>
+  <span class="align-text-top">text-top</span>
+  <span class="align-text-bottom">text-bottom</span>
+</div>
+```
+
+## Table cells
+
+Vertical alignment utilities are also applicable to table cells, allowing you to control the alignment of content within a cell. This is especially useful for creating well-structured and visually appealing tables where the content aligns consistently across rows and columns.
+
+
+```html
+<table>
+  <tbody>
+    <tr>
+      <td class="align-baseline">baseline</td>
+      <td class="align-top">top</td>
+      <td class="align-middle">middle</td>
+      <td class="align-bottom">bottom</td>
+      <td class="align-text-top">text-top</td>
+      <td class="align-text-bottom">text-bottom</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```html example
+<table style="height: 100px;">
+  <tbody>
+    <tr>
+      <td class="align-baseline">baseline</td>
+      <td class="align-top">top</td>
+      <td class="align-middle">middle</td>
+      <td class="align-bottom">bottom</td>
+      <td class="align-text-top">text-top</td>
+      <td class="align-text-bottom">text-bottom</td>
+    </tr>
+  </tbody>
+</table>
+```

package/docs/ui/utilities/visually-hidden.mdx

@@ -0,0 +1,12 @@
+---
+title: Visually hidden
+summary: Use these helpers to visually hide elements but keep them accessible to assistive technologies.
+---
+
+Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container–thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus.
+
+```html
+<h2 class="visually-hidden">Title for screen readers</h2>
+<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
+<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tabler/core",
-  "version": "1.0.0-beta23",
+  "version": "1.0.0-beta24",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "scripts": {
@@ -106,11 +106,11 @@
       },
       {
         "path": "./dist/css/tabler-vendors.css",
-        "maxSize": "7 kB"
+        "maxSize": "7.5 kB"
       },
       {
         "path": "./dist/css/tabler-vendors.min.css",
-        "maxSize": "6 kB"
+        "maxSize": "6.5 kB"
       },
       {
         "path": "./dist/js/tabler.js",
@@ -166,6 +166,7 @@
     "gulp-terser": "^2.1.0",
     "imageoptim-cli": "^3.1.9",
     "imask": "^7.6.1",
+    "js-beautify": "^1.15.1",
     "jsvectormap": "^1.6.0",
     "list.js": "^2.3.1",
     "litepicker": "^2.0.12",
@@ -173,7 +174,6 @@
     "plyr": "^3.7.8",
     "postcss": "^8.4.49",
     "prettier": "^2.8.8",
-    "js-beautify": "^1.15.1",
     "release-it": "^15.11.0",
     "request": "^2.88.2",
     "rollup": "2.79.2",
@@ -183,6 +183,7 @@
     "star-rating.js": "^4.3.1",
     "tinymce": "^7.5.1",
     "tom-select": "^2.4.1",
+    "typed.js": "^2.1.0",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "yaml": "^2.6.1",
@@ -211,7 +212,8 @@
     "plyr": "^3.7.8",
     "star-rating.js": "^4.3.0",
     "tinymce": "^6.4.2 || ^7.0.0",
-    "tom-select": "^2.2.2"
+    "tom-select": "^2.2.2",
+    "typed.js": "^2.1.0"
   },
   "peerDependenciesMeta": {
     "@melloware/coloris": {

package/src/scss/_utilities-marketing.scss

@@ -0,0 +1,209 @@
+$negative-spacers-extra: if(
+  $enable-negative-margins,
+  negativify-map(map-merge($spacers, $spacers-extra)),
+  null
+);
+
+$utilities: (
+  // Margin utilities
+  "margin":
+    (
+      responsive: true,
+      property: margin,
+      class: m,
+      values: $spacers-extra,
+    ),
+  "margin-x": (
+    responsive: true,
+    property: margin-right margin-left,
+    class: mx,
+    values: $spacers-extra,
+  ),
+  "margin-y": (
+    responsive: true,
+    property: margin-top margin-bottom,
+    class: my,
+    values: $spacers-extra,
+  ),
+  "margin-top": (
+    responsive: true,
+    property: margin-top,
+    class: mt,
+    values: $spacers-extra,
+  ),
+  "margin-end": (
+    responsive: true,
+    property: margin-right,
+    class: me,
+    values: $spacers-extra,
+  ),
+  "margin-bottom": (
+    responsive: true,
+    property: margin-bottom,
+    class: mb,
+    values: $spacers-extra,
+  ),
+  "margin-start": (
+    responsive: true,
+    property: margin-left,
+    class: ms,
+    values: $spacers-extra,
+  ),
+  // Negative margin utilities
+  "negative-margin":
+    (
+      responsive: true,
+      property: margin,
+      class: m,
+      values: $negative-spacers-extra,
+    ),
+  "negative-margin-x": (
+    responsive: true,
+    property: margin-right margin-left,
+    class: mx,
+    values: $negative-spacers-extra,
+  ),
+  "negative-margin-y": (
+    responsive: true,
+    property: margin-top margin-bottom,
+    class: my,
+    values: $negative-spacers-extra,
+  ),
+  "negative-margin-top": (
+    responsive: true,
+    property: margin-top,
+    class: mt,
+    values: $negative-spacers-extra,
+  ),
+  "negative-margin-end": (
+    responsive: true,
+    property: margin-right,
+    class: me,
+    values: $negative-spacers-extra,
+  ),
+  "negative-margin-bottom": (
+    responsive: true,
+    property: margin-bottom,
+    class: mb,
+    values: $negative-spacers-extra,
+  ),
+  "negative-margin-start": (
+    responsive: true,
+    property: margin-left,
+    class: ms,
+    values: $negative-spacers-extra,
+  ),
+  // Padding utilities
+  "padding":
+    (
+      responsive: true,
+      property: padding,
+      class: p,
+      values: $spacers-extra,
+    ),
+  "padding-x": (
+    responsive: true,
+    property: padding-right padding-left,
+    class: px,
+    values: $spacers-extra,
+  ),
+  "padding-y": (
+    responsive: true,
+    property: padding-top padding-bottom,
+    class: py,
+    values: $spacers-extra,
+  ),
+  "padding-top": (
+    responsive: true,
+    property: padding-top,
+    class: pt,
+    values: $spacers-extra,
+  ),
+  "padding-end": (
+    responsive: true,
+    property: padding-right,
+    class: pe,
+    values: $spacers-extra,
+  ),
+  "padding-bottom": (
+    responsive: true,
+    property: padding-bottom,
+    class: pb,
+    values: $spacers-extra,
+  ),
+  "padding-start": (
+    responsive: true,
+    property: padding-left,
+    class: ps,
+    values: $spacers-extra,
+  ),
+  // Gap utility
+  "gap":
+    (
+      responsive: true,
+      property: gap,
+      class: gap,
+      values: $spacers-extra,
+    ),
+  "row-gap": (
+    responsive: true,
+    property: row-gap,
+    class: row-gap,
+    values: $spacers-extra,
+  ),
+  "column-gap": (
+    responsive: true,
+    property: column-gap,
+    class: column-gap,
+    values: $spacers-extra,
+  ),
+  // Letter spacing
+  "spacing":
+    (
+      property: letter-spacing,
+      class: tracking,
+      values: (
+        tight: $spacing-tight,
+        normal: $spacing-normal,
+        wide: $spacing-wide,
+      ),
+    ),
+  "width": (
+    property: width,
+    class: w,
+    values: $spacers-extra,
+  ),
+  "height": (
+    property: height,
+    class: h,
+    values: $spacers-extra,
+  ),
+  "filter": (
+    property: filter,
+    class: filter,
+    values: (
+      grayscale: grayscale(100%),
+    ),
+  ),
+  "gutter-x": (
+    responsive: true,
+    css-var: true,
+    css-variable-name: gutter-x,
+    class: gx,
+    values: $spacers-extra,
+  ),
+  "gutter-y": (
+    responsive: true,
+    css-var: true,
+    css-variable-name: gutter-y,
+    class: gy,
+    values: $spacers-extra,
+  ),
+  "gutter": (
+    responsive: true,
+    css-var: true,
+    css-variable-name: gutter-x,
+    class: g,
+    values: $spacers-extra,
+  )
+);

package/src/scss/_utilities.scss

@@ -6,6 +6,11 @@ $border-values: (
   0: 0,
 );
 
+$utilities-border-colors: map-loop((
+  "red": red,
+  "green": green,
+), rgba-css-var, "$key", "border") !default;
+
 //Utilities
 $utilities: (
   "object": (
@@ -19,15 +24,6 @@ $utilities: (
       none: none,
     ),
   ),
-  "spacing": (
-    property: letter-spacing,
-    class: tracking,
-    values: (
-      tight: -0.05em,
-      normal: 0,
-      wide: 0.05em,
-    ),
-  ),
   "cursor": (
     property: cursor,
     class: cursor,