Shrink tabler.js and tabler.css with an ES2022 target and // Sass comments (#3259)

core/scss/_props.scss

@@ -3,16 +3,16 @@
 
 :root,
 :host {
-  /** Direction multiplier for physical transforms (1 = LTR, -1 = RTL) */
+  // Direction multiplier for physical transforms (1 = LTR, -1 = RTL)
   --dir: 1;
 
-  /** Fonts */
+  // Fonts
   --font-monospace: #{$font-family-monospace};
   --font-sans-serif: #{$font-family-sans-serif};
   --font-serif: #{$font-family-serif};
   --font-comic: #{$font-family-comic};
 
-  /** Gray colors */
+  // Gray colors
   --gray-50: #{$gray-50};
   --gray-100: #{$gray-100};
   --gray-200: #{$gray-200};
@@ -38,10 +38,10 @@
   --dark: #{$dark};
   --light: #{$light};
 
-  /** Brand colors */
+  // Brand colors
   --brand: #{$primary};
 
-  /** Theme colors */
+  // Theme colors
   @each $name, $color in map.merge($theme-colors, $social-colors) {
     --#{$name}: #{$color};
     --#{$name}-fg: #{if(sass(contrast-ratio($color) > $min-contrast-ratio): var(--light); else: var(--dark))};
@@ -50,20 +50,20 @@
     --#{$name}-200: color-mix(in oklab, var(--#{$name}) 20%, transparent);
   }
 
-  /** Gray colors */
+  // Gray colors
   @each $name, $color in $gray-colors {
     --#{$name}-fg: var(--#{$name});
   }
 
-  /** Spacers */
+  // Spacers
   @each $name, $value in $spacers {
     --spacer-#{$name}: #{$value};
   }
 
-  /** Icons */
+  // Icons
   --icon-size: #{$icon-size};
 
-  /** Font sizes */
+  // Font sizes
   @each $name, $value in $font-weights {
     --font-weight-#{$name}: #{$value};
   }
@@ -76,13 +76,13 @@
     --line-height-#{$name}: #{$value};
   }
 
-  /** Shadows */
+  // Shadows
   --shadow-color: #{$box-shadow-color};
   @each $name, $value in $box-shadows {
     --shadow#{if(sass($name): '-#{$name}'; else: '')}: #{$value};
   }
 
-  /** Border radiuses */
+  // Border radiuses
   --border-radius-scale: 1;
   @each $name, $value in $border-radiuses {
     @if $name {
@@ -92,7 +92,7 @@
     }
   }
 
-  /** Buttons and form controls: one scale, in the names Bootstrap 6 uses */
+  // Buttons and form controls: one scale, in the names Bootstrap 6 uses
   // scss-docs-start btn-input-css-vars
   --btn-input-fg: var(--body-color);
   --btn-input-bg: var(--bg-forms);
@@ -125,7 +125,7 @@
   --btn-input-xl-min-height: calc(var(--btn-input-xl-line-height) + var(--btn-input-xl-padding-y) * 2 + #{$input-btn-border-width} * 2);
   // scss-docs-end btn-input-css-vars
 
-  /** Checks, radios and switches: shared state colors, in the names Bootstrap 6 uses */
+  // Checks, radios and switches: shared state colors, in the names Bootstrap 6 uses
   // scss-docs-start control-state-css-vars
   --control-checked-bg: #{$form-check-input-checked-bg-color};
   --control-checked-border-color: #{$form-check-input-checked-border-color};
@@ -133,7 +133,7 @@
   --control-disabled-opacity: #{$form-check-input-disabled-opacity};
   // scss-docs-end control-state-css-vars
 
-  /** Backdrops */
+  // Backdrops
   --backdrop-opacity: #{$backdrop-opacity};
   --backdrop-bg: #{$backdrop-bg};
   @each $name, $value in $backdrops {

core/scss/layout/_navbar.scss

@@ -299,9 +299,7 @@
   }
 }
 
-/**
-Navbar
- */
+// Navbar
 .navbar {
   --navbar-bg: var(--bg-surface);
   --navbar-border-width: #{$navbar-border-width};
@@ -487,9 +485,7 @@ Navbar
   }
 }
 
-/**
-Navbar brand
- */
+// Navbar brand
 .navbar-brand {
   display: inline-flex;
   gap: $spacer-2;
@@ -509,9 +505,7 @@ Navbar brand
   opacity: 0.5;
 }
 
-/**
-Navbar toggler
- */
+// Navbar toggler
 .navbar-toggler {
   position: relative;
   display: flex;
@@ -572,17 +566,13 @@ Navbar toggler
   }
 }
 
-/**
-Navbar transparent
- */
+// Navbar transparent
 .navbar-transparent {
   --navbar-border-color: transparent !important;
   background: transparent !important;
 }
 
-/**
-Navbar nav
- */
+// Navbar nav
 .navbar-nav {
   --nav-link-hover-bg: #{$navbar-nav-link-hover-bg};
   --nav-link-icon-color: #{$nav-link-icon-color};
@@ -598,9 +588,7 @@ Navbar nav
   }
 }
 
-/**
-Navbar side
- */
+// Navbar side
 // The group at the end of a navbar: a row on the end side of a horizontal
 // navbar. In a vertical navbar the same class pins the group to the bottom
 // of the menu — see navbar-vertical-nav().
@@ -612,9 +600,7 @@ Navbar side
   margin: 0;
 }
 
-/**
-Navbar sticky
- */
+// Navbar sticky
 // Runtime route only (data-bs-navbar="sticky" on <html>); static markup wraps
 // the navbar in its own .sticky-top. Just the top bar sticks — on the two-row
 // navbar the menu row scrolls away, so the sticky strip stays one row high.
@@ -624,9 +610,7 @@ html[data-bs-navbar='sticky'] .page > .navbar:not(.navbar-vertical) {
   z-index: $zindex-sticky;
 }
 
-/**
-Navbar primary
- */
+// Navbar primary
 // Runtime route only (data-bs-navbar-theme="primary" on <html>): the primary
 // color as the navbar surface. The text palette comes from the dark color
 // mode, which _extends.scss applies to the same selector; static markup gets
@@ -642,9 +626,7 @@ html[data-bs-navbar-theme='primary'] .page > [class*='navbar-expand'] .navbar {
   --navbar-border-color: transparent;
 }
 
-/**
-Navbar vertical
- */
+// Navbar vertical
 @if $enable-navbar-vertical {
   // Folded sidebar: every geometry consumer (aside width, page paddings,
   // page-wrapper/navbar margins) reads --sidebar-width, so flipping this one
@@ -878,9 +860,7 @@ Navbar vertical
   }
 }
 
-/**
-Navbar floating
- */
+// Navbar floating
 // The navbar keeps a gap from the edges around it, like .offcanvas-floating,
 // with an outline on every side instead of the single border line.
 //

core/scss/mixins/_functions.scss

@@ -40,12 +40,10 @@
   @return oklch(from #{$color} calc(l #{$sign} #{math.abs($delta)}) c h);
 }
 
-/**
- * Converts a given value to a percentage string.
- *
- * @param {Number} $value - The value to be converted to a percentage.
- * @return {String} - The percentage representation of the value.
- */
+// Converts a given value to a percentage string.
+//
+// @param {Number} $value - The value to be converted to a percentage.
+// @return {String} - The percentage representation of the value.
 @function to-percentage($value) {
   @if meta.type-of($value) == number and math.is-unitless($value) {
     @return math.percentage($value);
@@ -53,17 +51,15 @@
   @return $value;
 }
 
-/**
- * Generates a transparent version of the given color.
- *
- * @param {Color} $color - The base color to be made transparent.
- * @param {Number} $alpha - The level of transparency, ranging from 0 (fully transparent) to 1 (fully opaque). Default is 1.
- * @return {Color} - The resulting color with the specified transparency.
- *
- * Mixes in `oklab` so tints against an opaque background (e.g. alert backgrounds
- * over `--bg-surface`) stay perceptually even; mixing with `transparent` gives
- * the same result in every color space.
- */
+// Generates a transparent version of the given color.
+//
+// @param {Color} $color - The base color to be made transparent.
+// @param {Number} $alpha - The level of transparency, ranging from 0 (fully transparent) to 1 (fully opaque). Default is 1.
+// @return {Color} - The resulting color with the specified transparency.
+//
+// Mixes in `oklab` so tints against an opaque background (e.g. alert backgrounds
+// over `--bg-surface`) stay perceptually even; mixing with `transparent` gives
+// the same result in every color space.
 @function color-transparent($color, $alpha: 1, $background: transparent) {
   @if $alpha == 1 or $alpha == 100% {
     @return $color;

core/scss/ui/_cards.scss

@@ -160,9 +160,7 @@
   }
 }
 
-/**
-Stacked card
- */
+// Stacked card
 .card-stacked {
   --card-stacked-offset: #{$card-stacked-offset};
   position: relative;
@@ -418,9 +416,7 @@ Stacked card
   overflow: auto;
 }
 
-/**
-Card optinos
- */
+// Card optinos
 .card-options {
   --card-options-top: #{$card-options-top};
   --card-options-inset: #{$card-options-inset};
@@ -437,9 +433,7 @@ Card optinos
   color: var(--secondary);
 }
 
-/**
-Card status
- */
+// Card status
 .card-status-top,
 .card-status-start,
 .card-status-bottom {
@@ -467,9 +461,7 @@ Card status
   mask-image: linear-gradient(to top, #000 var(--card-status-size), transparent var(--card-status-size));
 }
 
-/**
-Card table
- */
+// Card table
 .card-table {
   margin-bottom: 0 !important;
 
@@ -584,9 +576,7 @@ Card chart
   height: var(--card-avatar-height);
 }
 
-/**
-Card avatar
- */
+// Card avatar
 .card-avatar {
   --card-avatar-ring-width: #{$card-avatar-ring-width};
   margin-inline-start: auto;
@@ -709,17 +699,13 @@ Card list group
   }
 }
 
-/**
-Card note
-*/
+// Card note
 .card-note {
   --card-bg: #{mix-color-css(var(--yellow), var(--bg-surface), 12%)};
   --card-border-color: #{mix-color-css(var(--yellow), var(--bg-surface), 20%)};
 }
 
-/**
-Card gradient
-*/
+// Card gradient
 // Split out so scss/tests/_cards.test.scss can assert on it directly — a bare
 // top-level ruleset like .card-gradient can't be @include-d or otherwise
 // referenced in isolation by sass-true.

core/scss/ui/_charts.scss

@@ -29,9 +29,7 @@
   height: var(--chart-height-square);
 }
 
-/**
-Chart sparkline
- */
+// Chart sparkline
 .chart-sparkline {
   --chart-sparkline-width: #{$chart-sparkline-width};
   --chart-sparkline-height: #{$chart-sparkline-height};

core/scss/ui/_forms.scss

@@ -7,9 +7,7 @@ textarea {
   }
 }
 
-/**
-Form label
- */
+// Form label
 .col-form-label,
 .form-label {
   --form-label-required-gap: #{$form-label-required-gap};
@@ -32,18 +30,14 @@ Form label
   color: $form-secondary-color;
 }
 
-/**
-Form select
- */
+// Form select
 .form-select {
   &:-moz-focusring {
     color: var(--body-color);
   }
 }
 
-/**
-Form control
- */
+// Form control
 .form-control {
   &:-webkit-autofill {
     color: var(--body-color);
@@ -117,9 +111,7 @@ fieldset:empty {
   display: none;
 }
 
-/**
-Form help
- */
+// Form help
 .form-help {
   --form-help-size: #{$form-help-size};
   --form-help-font-size: #{$form-help-font-size};
@@ -150,9 +142,7 @@ Form help
   }
 }
 
-/**
-Input group
- */
+// Input group
 .input-group {
   box-shadow: $input-box-shadow;
   @include border-radius(var(--input-group-addon-border-radius));
@@ -235,17 +225,13 @@ Input group
   }
 }
 
-/**
-Upload files
- */
+// Upload files
 .form-file-button {
   margin-inline-start: 0;
   border-inline-start: 0;
 }
 
-/**
-Forms on mobile devices 
-  */
+// Forms on mobile devices
 .form-control,
 .form-select {
   --form-control-mobile-font-size: #{$form-control-mobile-font-size};

core/scss/ui/_legend.scss

@@ -1,6 +1,4 @@
-/**
-Legend
- */
+// Legend
 @use 'sass:map';
 
 @use '../config' as *;

core/scss/ui/_lists.scss

@@ -96,18 +96,14 @@
   }
 }
 
-/**
-Seprated list
-*/
+// Seprated list
 .list-separated {
   display: flex;
   flex-direction: column;
   gap: $spacer;
 }
 
-/**
-Inline list
- */
+// Inline list
 .list-inline {
   margin: 0;
 }

core/scss/ui/_loaders.scss

@@ -26,9 +26,7 @@
   }
 }
 
-/**
-Dimmer
-*/
+// Dimmer
 .dimmer {
   position: relative;
 

core/scss/ui/_markdown.scss

@@ -3,9 +3,7 @@
 $markdown-font-size: var(--font-size-h3) !default;
 $markdown-line-height: var(--line-height-lg) !default;
 
-/**
-Prose (formerly markdown)
- */
+// Prose (formerly markdown)
 .prose,
 .markdown {
   --markdown-heading-margin-top: #{$markdown-heading-margin-top};

core/scss/ui/_progress.scss

@@ -13,9 +13,7 @@
   }
 }
 
-/**
-Progress
- */
+// Progress
 .progress {
   position: relative;
   width: 100%;
@@ -52,9 +50,7 @@ Progress
   --progress-height: #{$progress-height-xl};
 }
 
-/**
-Progress bar
- */
+// Progress bar
 .progress-bar {
   height: 100%;
   @include transition(width $transition-time, background $transition-time);
@@ -86,9 +82,7 @@ Progress bar
   }
 }
 
-/**
-Progressbg
- */
+// Progressbg
 .progressbg {
   --progressbg-padding-y: #{$progressbg-padding-y};
   --progressbg-padding-x: #{$progressbg-padding-x};
@@ -124,9 +118,7 @@ Progressbg
   font-weight: var(--font-weight-medium);
 }
 
-/**
-Progress steps
- */
+// Progress steps
 .progress-steps {
   // scss-docs-start progress-steps-css-vars
   --progress-steps-gap: #{$progress-steps-gap};

core/scss/ui/_sparkline.scss

@@ -1,6 +1,4 @@
-/**
-Sparkline (inline SVG, rendered by js/src/sparkline.ts)
- */
+// Sparkline (inline SVG, rendered by js/src/sparkline.ts)
 @use 'sass:map';
 @use '../config' as *;
 

core/scss/ui/_tables.scss

@@ -112,9 +112,7 @@
   }
 }
 
-/**
-Table sort
- */
+// Table sort
 .table-sort {
   --table-sort-icon-size: #{$table-sort-icon-size};
   --table-sort-icon-margin-start: #{$table-sort-icon-margin-start};

core/scss/ui/_type.scss

@@ -184,9 +184,7 @@ img {
   margin-inline-start: 0;
 }
 
-/**
-Selection
- */
+// Selection
 ::selection,
 .text-selected {
   background-color: $selection-bg;
@@ -196,9 +194,7 @@ Selection
   display: inline-block;
 }
 
-/**
-Links
- */
+// Links
 [class^='link-'],
 [class*=' link-'] {
   &.disabled {
@@ -222,16 +218,12 @@ a:hover:has(.icon) {
   }
 }
 
-/**
-Subheader
- */
+// Subheader
 .subheader {
   @include subheader();
 }
 
-/**
-Mentions
- */
+// Mentions
 .mention {
   display: inline-block;
   padding: calc(2em / 12) calc(8em / 12);

core/scss/ui/forms/_form-custom.scss

@@ -1,6 +1,4 @@
-/**
-Bootstrap color input
- */
+// Bootstrap color input
 @use '../../config' as *;
 
 .form-control-color {
@@ -9,9 +7,7 @@ Bootstrap color input
   }
 }
 
-/**
-Remove the cancel buttons in Chrome and Safari on macOS.
- */
+// Remove the cancel buttons in Chrome and Safari on macOS.
 [type='search']::-webkit-search-cancel-button {
   appearance: none;
 }

core/scss/ui/forms/_form-icon.scss

@@ -1,6 +1,4 @@
-/**
-Icon input
- */
+// Icon input
 @use '../../config' as *;
 
 .input-icon {

core/scss/ui/forms/_form-imagecheck.scss

@@ -1,6 +1,4 @@
-/**
-Image check
- */
+// Image check
 @use '../../config' as *;
 
 .form-imagecheck {

core/scss/ui/forms/_form-selectgroup.scss

@@ -113,9 +113,7 @@ Select group
   @include focus-ring(true);
 }
 
-/**
-Alternate version of form select group
- */
+// Alternate version of form select group
 .form-selectgroup-boxes {
   .form-selectgroup-label {
     padding: $card-spacer-y $card-spacer-x;
@@ -138,9 +136,7 @@ Alternate version of form select group
   }
 }
 
-/**
-Select group
- */
+// Select group
 .form-selectgroup-pills {
   flex-wrap: wrap;
   align-items: start;

core/scss/ui/typo/_hr.scss

@@ -1,15 +1,11 @@
-/**
-Horizontal rules
- */
+// Horizontal rules
 @use '../../config' as *;
 
 // The `.hr` helper lives in `_extends.scss` — it extends the `hr` element
 // selector across all modules, which with the module system requires the
 // whole core to be upstream.
 
-/**
-Hr text
- */
+// Hr text
 .hr-text {
   --hr-text-gap: #{$hr-text-gap};
   display: flex;

core/scss/utils/_text.scss

@@ -1,8 +1,6 @@
 // stylelint-disable declaration-no-important
 
-/**
-Antialiasing
- */
+// Antialiasing
 @use '../config' as *;
 
 .antialiased {