@tabler/core 1.5.1 → 1.6.0

package/scss/ui/_close.scss

@@ -1,11 +1,11 @@
 @use '../config' as *;
 
 .btn-close {
+  @include focus-ring-transition();
   --btn-close-color: currentColor;
   --btn-close-bg: #{escape-svg($btn-close-bg)};
   --btn-close-opacity: #{$btn-close-opacity};
   --btn-close-hover-opacity: #{$btn-close-hover-opacity};
-  --btn-close-focus-shadow: #{$btn-close-focus-shadow};
   --btn-close-focus-opacity: #{$btn-close-focus-opacity};
   --btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
   --btn-close-size: #{$btn-close-width};
@@ -43,10 +43,13 @@
 
   &:focus {
     outline: 0;
-    box-shadow: var(--btn-close-focus-shadow);
     opacity: var(--btn-close-focus-opacity);
   }
 
+  &:focus-visible {
+    @include focus-ring(true);
+  }
+
   &:disabled,
   &.disabled {
     pointer-events: none;

package/scss/ui/_datagrid.scss

@@ -5,9 +5,11 @@
 @use '../config' as *;
 
 .datagrid {
+  // scss-docs-start datagrid-css-vars
   --datagrid-padding: #{$datagrid-padding};
   --datagrid-item-width: #{$datagrid-item-width};
   --datagrid-title-margin-bottom: #{$datagrid-title-margin-bottom};
+  // scss-docs-end datagrid-css-vars
 
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(var(--datagrid-item-width), 1fr));

package/scss/ui/_datepicker.scss

@@ -0,0 +1,425 @@
+// Datepicker
+//
+// Styles the `data-vc-*` markup that Vanilla Calendar Pro renders, the same way
+// Bootstrap 6 does: the calendar grid is one set of tokens (`--calendar-*`),
+// the popup surface the datepicker adds around it is another (`--datepicker-*`).
+// An inline calendar renders unadorned and takes the surface of its container.
+
+@use '../config' as *;
+
+// stylelint-disable selector-max-attribute, selector-no-qualifying-type -- the plugin marks everything with data attributes
+
+//
+// Calendar grid
+//
+
+[data-vc='calendar'] {
+  --calendar-padding: #{$datepicker-calendar-padding};
+  --calendar-color: var(--body-color);
+  --calendar-font-size: #{$datepicker-calendar-font-size};
+  --calendar-header-font-weight: #{$datepicker-calendar-header-font-weight};
+  --calendar-weekday-color: var(--secondary);
+  --calendar-day-hover-bg: var(--hover-bg);
+  --calendar-day-selected-bg: var(--primary);
+  --calendar-day-selected-color: var(--primary-fg);
+  --calendar-day-today-bg: #{color-transparent(var(--body-color), 6%)};
+  --calendar-day-today-color: var(--primary);
+  --calendar-day-disabled-color: var(--disabled-color);
+  --calendar-day-size: #{$datepicker-calendar-day-size};
+  --calendar-day-font-size: #{$datepicker-calendar-day-font-size};
+  --calendar-border-radius: var(--border-radius);
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  padding: var(--calendar-padding);
+  font-family: inherit;
+  font-size: var(--calendar-font-size);
+  color: var(--calendar-color);
+
+  button {
+    font-family: inherit;
+    @include focus-ring-transition();
+  }
+
+  button:focus-visible {
+    position: relative;
+    z-index: 1;
+    @include focus-ring(true);
+  }
+}
+
+// Month navigation
+[data-vc-arrow] {
+  position: relative;
+  display: block;
+  width: 2rem;
+  height: 2rem;
+  color: var(--calendar-color);
+  pointer-events: auto;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  @include border-radius(var(--calendar-border-radius));
+
+  &::before {
+    position: absolute;
+    inset: 0.25rem;
+    content: '';
+    background-color: currentColor;
+    @include mask-icon(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 16c-.3 0-.5-.1-.7-.3l-6-6c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l5.3 5.3 5.3-5.3c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-6 6c-.2.2-.4.3-.7.3'/></svg>"), $size: 1rem);
+  }
+
+  &:hover {
+    background-color: var(--calendar-day-hover-bg);
+  }
+}
+
+[data-vc-arrow='prev']::before {
+  transform: rotate(90deg);
+}
+
+[data-vc-arrow='next']::before {
+  transform: rotate(-90deg);
+}
+
+// The controls overlay the header, so they repeat the calendar's own inset to
+// keep the arrows aligned with the content below.
+[data-vc='controls'] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-block-start: var(--calendar-padding);
+  padding-inline: var(--calendar-padding);
+  pointer-events: none;
+}
+
+[data-vc='grid'] {
+  display: flex;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  gap: 1.75rem;
+}
+
+[data-vc='column'] {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  min-width: 240px;
+}
+
+// Header: month and year
+[data-vc='header'] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+[data-vc-header='content'] {
+  display: inline-flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+  white-space: pre-wrap;
+}
+
+[data-vc='month'],
+[data-vc='year'] {
+  padding: 0.25rem 0.5rem;
+  margin-inline: -0.125rem;
+  font-size: var(--font-size-base, 1rem);
+  font-weight: var(--calendar-header-font-weight);
+  color: var(--calendar-color);
+  background-color: transparent;
+  border: 0;
+  @include border-radius(var(--calendar-border-radius));
+
+  &:disabled {
+    color: var(--calendar-day-disabled-color);
+    pointer-events: none;
+  }
+
+  &:hover:not(:disabled) {
+    background-color: var(--calendar-day-hover-bg);
+  }
+}
+
+[data-vc='content'] {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+}
+
+// Month and year views. The plugin wraps each set in role="row" and
+// role="gridcell" elements, so the column grid goes on the row.
+[data-vc='months'],
+[data-vc='years'] {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  row-gap: 1rem;
+}
+
+[data-vc-months='row'],
+[data-vc-years='row'] {
+  display: grid;
+  grid-template-columns: repeat(var(--calendar-columns, 4), minmax(0, 1fr));
+  column-gap: 0.25rem;
+  align-items: center;
+}
+
+[data-vc='years'] {
+  --calendar-columns: 5;
+}
+
+[data-vc-months='cell'],
+[data-vc-years='cell'] {
+  display: flex;
+}
+
+[data-vc-months-month],
+[data-vc-years-year] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 2.5rem;
+  padding: 0.25rem;
+  font-size: var(--calendar-day-font-size);
+  font-weight: var(--calendar-header-font-weight);
+  line-height: 1rem;
+  color: var(--calendar-weekday-color);
+  text-align: center;
+  word-break: break-all;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  @include border-radius(var(--calendar-border-radius));
+
+  &:disabled {
+    color: var(--calendar-day-disabled-color);
+    pointer-events: none;
+  }
+
+  &:hover:not(:disabled) {
+    background-color: var(--calendar-day-hover-bg);
+  }
+
+  &[data-vc-months-month-selected],
+  &[data-vc-years-year-selected] {
+    color: var(--calendar-day-selected-color);
+    background-color: var(--calendar-day-selected-bg);
+
+    &:hover {
+      color: var(--calendar-day-selected-color);
+      background-color: var(--calendar-day-selected-bg);
+    }
+  }
+}
+
+// Weekday header
+[data-vc='week'] {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  justify-items: center;
+  margin-bottom: 0.5rem;
+}
+
+[data-vc-week-day] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: var(--calendar-day-size);
+  padding: 0;
+  margin: 0;
+  font-size: var(--calendar-day-font-size);
+  font-weight: var(--calendar-header-font-weight);
+  line-height: 1rem;
+  color: var(--calendar-weekday-color);
+  background-color: transparent;
+  border: 0;
+}
+
+button[data-vc-week-day] {
+  cursor: pointer;
+}
+
+// Dates grid
+[data-vc='dates'] {
+  pointer-events: none;
+}
+
+[data-vc-dates='row'] {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  align-items: center;
+  justify-items: center;
+  width: 100%;
+}
+
+[data-vc-date] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  pointer-events: auto;
+
+  &:not(:has([data-vc-date-btn])),
+  &[data-vc-date-disabled],
+  &[data-vc-date-disabled] [data-vc-date-btn] {
+    pointer-events: none;
+  }
+}
+
+// A day paints its background from two variables: the colour a state picks
+// and the opacity it gets. States change the variables, never `opacity`, so
+// the date stays readable on a faded background.
+[data-vc-date-btn] {
+  --calendar-day-bg: transparent;
+  --calendar-day-bg-opacity: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: var(--calendar-day-size);
+  height: 100%;
+  min-height: var(--calendar-day-size);
+  padding: 0;
+  font-size: var(--calendar-day-font-size);
+  font-weight: $font-weight-normal;
+  line-height: 1rem;
+  color: var(--calendar-color);
+  cursor: pointer;
+  background-color: color-transparent(var(--calendar-day-bg), var(--calendar-day-bg-opacity));
+  border: 0;
+  border-radius: var(--calendar-border-radius);
+  @include focus-ring-transition(color $transition-time, background-color $transition-time);
+
+  &:hover {
+    --calendar-day-bg: var(--calendar-day-hover-bg);
+  }
+}
+
+// Today
+[data-vc-date-today] [data-vc-date-btn] {
+  font-weight: $font-weight-bold;
+  --calendar-day-bg: var(--calendar-day-today-bg);
+  color: var(--calendar-day-today-color);
+}
+
+// Days of the previous and next month
+[data-vc-date-month='next'] [data-vc-date-btn],
+[data-vc-date-month='prev'] [data-vc-date-btn] {
+  --calendar-day-bg-opacity: 50%;
+  color: var(--calendar-weekday-color);
+}
+
+[data-vc-date-disabled] [data-vc-date-btn] {
+  color: var(--calendar-day-disabled-color);
+}
+
+// Range selection: the hovered and selected runs join into one bar, so only the
+// outer corners keep their radius. Logical corners follow the writing direction.
+[data-vc-date-hover] [data-vc-date-btn] {
+  --calendar-day-bg: var(--calendar-day-hover-bg);
+  border-radius: 0;
+}
+
+[data-vc-date-hover='first'] [data-vc-date-btn] {
+  border-start-start-radius: var(--calendar-border-radius);
+  border-end-start-radius: var(--calendar-border-radius);
+}
+
+[data-vc-date-hover='last'] [data-vc-date-btn] {
+  border-start-end-radius: var(--calendar-border-radius);
+  border-end-end-radius: var(--calendar-border-radius);
+}
+
+[data-vc-date-hover='first-and-last'] [data-vc-date-btn] {
+  border-radius: var(--calendar-border-radius);
+}
+
+[data-vc-date-selected] [data-vc-date-btn] {
+  --calendar-day-bg: var(--calendar-day-selected-bg);
+  color: var(--calendar-day-selected-color);
+}
+
+// Inside a range only the two ends are solid; the days between keep their own
+// text colour on a faint tint of the selected colour.
+[data-vc-date-selected='middle'] [data-vc-date-btn] {
+  --calendar-day-bg-opacity: #{$datepicker-calendar-range-bg-opacity};
+  color: var(--calendar-color);
+  border-radius: 0;
+}
+
+[data-vc-date-selected='first'] [data-vc-date-btn] {
+  border-start-start-radius: var(--calendar-border-radius);
+  border-start-end-radius: 0;
+  border-end-start-radius: var(--calendar-border-radius);
+  border-end-end-radius: 0;
+}
+
+[data-vc-date-selected='last'] [data-vc-date-btn] {
+  border-start-start-radius: 0;
+  border-start-end-radius: var(--calendar-border-radius);
+  border-end-start-radius: 0;
+  border-end-end-radius: var(--calendar-border-radius);
+}
+
+[data-vc-date-selected='first-and-last'] [data-vc-date-btn] {
+  border-radius: var(--calendar-border-radius);
+}
+
+//
+// Popup surface
+//
+// The plugin adds `[data-vc-input]` only when it owns a popup, so inline
+// calendars keep the bare grid styling above.
+
+[data-vc='calendar'][data-vc-input] {
+  --datepicker-padding: #{$datepicker-padding};
+  --datepicker-bg: #{$datepicker-bg};
+  --datepicker-border-radius: #{$datepicker-border-radius};
+  --datepicker-box-shadow: #{$datepicker-box-shadow};
+  --datepicker-min-width: #{$datepicker-min-width};
+  --datepicker-zindex: #{$zindex-dropdown};
+  --calendar-padding: var(--datepicker-padding);
+  position: absolute;
+  z-index: var(--datepicker-zindex);
+  min-width: var(--datepicker-min-width);
+  // Same surface as `.dropdown-menu`: the edge is the 1px ring inside the
+  // dropdown shadow, so the popup has no border of its own.
+  background-color: var(--datepicker-bg);
+  box-shadow: var(--datepicker-box-shadow);
+  @include border-radius(var(--datepicker-border-radius));
+
+  // The plugin creates the popup at 0/0 with this attribute, positions it on
+  // show, and puts the attribute back on hide. The selector repeats the popup
+  // one so it wins on specificity; otherwise the popup flashes in the corner
+  // and never disappears.
+  &[data-vc-calendar-hidden] {
+    pointer-events: none;
+    opacity: 0;
+  }
+}
+
+[data-vc-position='bottom'] {
+  margin-block-start: 0.25rem;
+}
+
+[data-vc-position='top'] {
+  margin-block-end: -0.25rem;
+}
+
+// stylelint-enable selector-max-attribute, selector-no-qualifying-type

package/scss/ui/_dropdowns.scss

@@ -62,6 +62,7 @@
   height: auto;
   max-height: $dropdown-scrollable-height;
   overflow-x: hidden;
+  overscroll-behavior: contain;
 }
 
 .dropdown-menu-column {
@@ -74,7 +75,7 @@
 
 .dropdown-menu-columns {
   display: flex;
-  flex: 0 var(--dropdown-menu-columns-gap);
+  gap: var(--dropdown-menu-columns-gap);
 }
 
 .dropdown-menu-arrow {
@@ -92,6 +93,9 @@
     // The menu draws its edge with the 1px ring in --dropdown-box-shadow and has
     // no border, so `inherit` would give the arrow the text color.
     border: 1px solid var(--dropdown-border-color);
+    // clip-path + border + rotate renders garbled edges on Firefox; only the
+    // top/left border survives the clip anyway, so drop the rest.
+    border-width: 1px 0 0 1px;
 
     /* rtl:ignore */
     transform: rotate(45deg);

package/scss/ui/_empty.scss

@@ -1,6 +1,7 @@
 @use '../config' as *;
 
 .empty {
+  // scss-docs-start empty-css-vars
   --empty-padding: #{$empty-padding};
   --empty-padding-md: #{$empty-padding-md};
   --empty-icon-size: #{$empty-icon-size};
@@ -10,6 +11,7 @@
   --empty-header-font-size: #{$empty-header-font-size};
   --empty-title-margin-bottom: #{$empty-title-margin-bottom};
   --empty-action-margin-top: #{$empty-action-margin-top};
+  // scss-docs-end empty-css-vars
 
   display: flex;
   flex-direction: column;

package/scss/ui/_forms.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../config' as *;
 
 textarea {
@@ -31,37 +32,6 @@ Form label
   color: $form-secondary-color;
 }
 
-/**
-Form hint
- */
-.form-hint {
-  --form-hint-margin-top: #{$form-hint-margin-top};
-  --form-hint-label-offset: #{$form-hint-label-offset};
-  --form-hint-control-margin-top: #{$form-hint-control-margin-top};
-
-  display: block;
-  color: $form-secondary-color;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  + .form-control {
-    margin-top: var(--form-hint-margin-top);
-  }
-
-  .form-label + & {
-    margin-top: var(--form-hint-label-offset);
-  }
-
-  .input-group + &,
-  .form-control + &,
-  .form-select + & {
-    margin-top: var(--form-hint-control-margin-top);
-    color: $form-secondary-color;
-  }
-}
-
 /**
 Form select
  */
@@ -99,17 +69,17 @@ Form control
 
 .form-control-dark {
   color: $white;
-  background-color: rgba($black, 0.1);
+  background-color: color-transparent(var(--black), 0.1);
   border-color: transparent;
 
   &:focus {
-    background-color: rgba($black, 0.1);
-    border-color: rgba($white, 0.24);
+    background-color: color-transparent(var(--black), 0.1);
+    border-color: color-transparent(var(--white), 0.24);
     box-shadow: none;
   }
 
   &::placeholder {
-    color: rgba($white, 0.6);
+    color: color-transparent(var(--white), 0.6);
   }
 }
 
@@ -159,6 +129,8 @@ Form help
   justify-content: center;
   width: var(--form-help-size);
   height: var(--form-help-size);
+  // `.form-help` is often a `<button>`: drop the user agent's padding and border
+  padding: 0;
   font-size: var(--form-help-font-size);
   font-weight: var(--font-weight-semibold);
   color: $form-secondary-color;
@@ -167,6 +139,7 @@ Form help
   cursor: pointer;
   user-select: none;
   background: var(--gray-100);
+  border: 0;
   @include border-radius(var(--border-radius-pill));
   @include transition(background-color $transition-time, color $transition-time);
 
@@ -196,8 +169,10 @@ Input group
 }
 
 .input-group-flat {
+  @include focus-ring-transition();
   &:focus-within {
-    box-shadow: $input-focus-box-shadow;
+    --focus-ring-offset: -1px;
+    @include focus-ring(true);
     @include border-radius($input-border-radius);
 
     .form-control,
@@ -209,6 +184,7 @@ Input group
   .form-control {
     &:focus {
       border-color: $input-border-color;
+      outline: 0;
       box-shadow: none;
     }
 
@@ -236,6 +212,27 @@ Input group
       border-inline-start: 0;
     }
   }
+
+  @each $state, $data in $form-validation-states {
+    $border-color: map.get($data, 'border-color');
+    $focus-ring-color: map.get($data, 'focus-ring-color');
+
+    &:has(.form-control.is-#{$state}),
+    .was-validated &:has(.form-control:#{$state}) {
+      .input-group-text {
+        border-color: $border-color;
+      }
+
+      &:focus-within {
+        outline-color: $focus-ring-color;
+
+        .form-control,
+        .input-group-text {
+          border-color: $border-color !important;
+        }
+      }
+    }
+  }
 }
 
 /**
@@ -246,17 +243,6 @@ Upload files
   border-inline-start: 0;
 }
 
-/**
-Floating inputs
- */
-// Fix for the bug in twbs/bootstrap v5.3.3. Issue #39080. Should be fixed in v5.3.4
-label[for='floating-input'] {
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 /**
 Forms on mobile devices 
   */

package/scss/ui/_icons.scss

@@ -4,7 +4,9 @@
 @use '../config' as *;
 
 .icon {
+  // scss-docs-start icon-css-vars
   --icon-size: #{$font-size-base * $line-height-base};
+  // scss-docs-end icon-css-vars
   display: inline-block;
   width: var(--icon-size);
   height: var(--icon-size);