@updevs/components 1.0.0-alpha.5 → 1.0.0-alpha.51

package/assets/styles/ui/_alerts.scss

@@ -1,59 +1,101 @@
 .alert {
-    --#{$prefix}alert-color: #{var(--#{$prefix}secondary)};
-    --upd-alert-bg: #{var(--#{$prefix}surface)};
-    border: $alert-border-width var(--#{$prefix}border-style) $alert-border-color;
-    border-left: .25rem var(--#{$prefix}border-style) var(--#{$prefix}alert-color);
-    box-shadow: $alert-shadow;
-
-    > :last-child {
-        margin-bottom: 0;
-    }
+    // scss-docs-start alert-variables
+    --#{$prefix}alert-color: var(--#{$prefix}body-color);
+    --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), .1)};
+    --#{$prefix}alert-padding-x: #{$alert-padding-x};
+    --#{$prefix}alert-padding-y: #{$alert-padding-y};
+    --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
+    --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-color), .2)};
+    --#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color);
+    --#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
+    --#{$prefix}alert-link-color: inherit;
+    --#{$prefix}alert-heading-font-weight: var(--#{$prefix}font-weight-medium);
+    // scss-docs-end
+
+    position: relative;
+    padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
+    margin-bottom: var(--#{$prefix}alert-margin-bottom);
+    background-color: color-mix(in srgb, var(--#{$prefix}alert-bg), var(--#{$prefix}bg-surface));
+    border-radius: var(--#{$prefix}alert-border-radius);
+    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color);
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
 }
 
-.alert-important {
-    border-color: transparent;
-    background: var(--#{$prefix}alert-color);
-    color: #fff;
+.alert-heading {
+    color: inherit;
+    margin-bottom: .25rem; // todo: use variable
+    font-weight: var(--#{$prefix}alert-heading-font-weight);
+}
 
-    .alert-icon,
-    .alert-link,
-    .alert-title {
-        color: inherit;
-    }
+.alert-description {
+    color: var(--#{$prefix}secondary);
+}
 
-    .alert-link:hover {
-        color: inherit;
-    }
+.alert-icon {
+    color: var(--#{$prefix}alert-color);
+    width: 1.25rem !important; // todo: use variable
+    height: 1.25rem !important;
+}
 
-    .btn-close {
-        filter: var(--#{$prefix}btn-close-white-filter);
+.alert-action {
+    color: var(--#{$prefix}alert-color);
+    text-decoration: underline;
+
+    &:hover {
+        text-decoration: none;
     }
 }
 
-.alert-link, {
+.alert-list {
+    margin: 0;
+}
+
+.alert-link {
+    font-weight: $alert-link-font-weight;
+    color: var(--#{$prefix}alert-link-color);
+
     &,
     &:hover {
         color: var(--#{$prefix}alert-color);
     }
 }
 
-@each $name, $color in $theme-colors {
-    .alert-#{$name} {
-        --#{$prefix}alert-color: var(--#{$prefix}#{$name});
+
+.alert-dismissible {
+    padding-right: 3rem; //todo: use variable
+
+    .btn-close {
+        position: absolute;
+        top: calc(var(--#{$prefix}alert-padding-x) / 2 - 1px);
+        right: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px);
+        z-index: 1;
+        padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x);
     }
 }
 
-.alert-icon {
-    color: var(--#{$prefix}alert-color);
-    width: 1.5rem !important;
-    height: 1.5rem !important;
-    margin: -.125rem $alert-padding-x -.125rem 0;
+.alert-important {
+    border-color: var(--#{$prefix}alert-color);
+    background-color: var(--#{$prefix}alert-color);
+    color: var(--#{$prefix}white);
+
+    .alert-description {
+        color: inherit;
+    }
+
+    .alert-icon {
+        color: inherit;
+    }
 }
 
-.alert-title {
-    font-size: $h4-font-size;
-    line-height: $h4-line-height;
-    font-weight: var(--#{$prefix}font-weight-bold);
-    margin-bottom: .25rem;
-    color: var(--#{$prefix}alert-color);
+.alert-minor {
+    background: transparent;
+    border-color: var(--tblr-border-color);
+}
+
+@each $name, $color in $theme-colors {
+    .alert-#{$name} {
+        --#{$prefix}alert-color: var(--#{$prefix}#{$name});
+    }
 }

package/assets/styles/ui/_avatars.scss

@@ -1,10 +1,12 @@
 .avatar {
-    --#{$prefix}avatar-size: #{$avatar-size};
+    --#{$prefix}avatar-size: var(--#{$prefix}avatar-list-size, #{$avatar-size});
     --#{$prefix}avatar-status-size: #{$avatar-status-size};
     --#{$prefix}avatar-bg: #{$avatar-bg};
-    --#{$prefix}avatar-box-shadow: #{$avatar-box-shadow};
+    --#{$prefix}avatar-box-shadow-color: var(--#{$prefix}border-color-translucent);
+    --#{$prefix}avatar-box-shadow: inset 0 0 0 1px var(--#{$prefix}avatar-box-shadow-color);
     --#{$prefix}avatar-font-size: #{$avatar-font-size};
     --#{$prefix}avatar-icon-size: #{$avatar-icon-size};
+    --#{$prefix}avatar-brand-size: #{$avatar-brand-size};
     position: relative;
     width: var(--#{$prefix}avatar-size);
     height: var(--#{$prefix}avatar-size);
@@ -22,6 +24,7 @@
     background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
     border-radius: $avatar-border-radius;
     box-shadow: var(--#{$prefix}avatar-box-shadow);
+    transition: color $transition-time, background-color $transition-time, box-shadow $transition-time;
 
     .icon {
         width: var(--#{$prefix}avatar-icon-size);
@@ -38,6 +41,11 @@
 
     @at-root a#{&} {
         cursor: pointer;
+
+        &:hover {
+            color: var(--#{$prefix}primary);
+            --#{$prefix}avatar-box-shadow-color: var(--#{$prefix}primary);
+        }
     }
 }
 
@@ -51,11 +59,12 @@
         --#{$prefix}avatar-status-size: #{map-get($size, status-size)};
         --#{$prefix}avatar-font-size: #{map-get($size, font-size)};
         --#{$prefix}avatar-icon-size: #{map-get($size, icon-size)};
-    }
+        --#{$prefix}avatar-brand-size: #{map-get($size, brand-size)};
 
-    .avatar-#{$avatar-size} .badge:empty {
-        width: map-get($size, status-size);
-        height: map-get($size, status-size);
+        .badge:empty {
+            width: map-get($size, status-size);
+            height: map-get($size, status-size);
+        }
     }
 }
 
@@ -63,6 +72,7 @@
 // Avatar list
 //
 .avatar-list {
+    --#{$prefix}avatar-list-size: #{$avatar-size};
     @include elements-list;
 
     a.avatar {
@@ -78,7 +88,13 @@
 
     .avatar {
         margin-right: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
-        box-shadow: var(--#{$prefix}avatar-box-shadow), 0 0 0 2px var(--#{$prefix}card-cap-bg, var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)));
+        box-shadow: var(--#{$prefix}avatar-box-shadow), 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+    }
+}
+
+@each $avatar-size, $size in $avatar-sizes {
+    .avatar-list-#{$avatar-size} {
+        --#{$prefix}avatar-list-size: #{map-get($size, size)};
     }
 }
 
@@ -86,10 +102,9 @@
 // Avatar upload
 //
 .avatar-upload {
-    width: 4rem;
-    height: 4rem;
     border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
     background: $form-check-input-bg;
+    box-shadow: none;
     flex-direction: column;
     @include transition(color $transition-time, background-color $transition-time);
 
@@ -116,3 +131,15 @@
     margin-top: calc(-.5 * var(--#{$prefix}avatar-size));
     box-shadow: 0 0 0 .25rem var(--#{$prefix}card-bg, var(--#{$prefix}body-bg));
 }
+
+.avatar-brand {
+    width: var(--#{$prefix}avatar-brand-size);
+    height: var(--#{$prefix}avatar-brand-size);
+    position: absolute;
+    right: -2px;
+    bottom: -2px;
+    z-index: 1000;
+    background: var(--#{$prefix}bg-surface);
+    border-radius: var(--#{$prefix}border-radius);
+    border: 1px solid var(--#{$prefix}border-color);
+}

package/assets/styles/ui/_badges.scss

@@ -1,36 +1,46 @@
 .badge {
+    --#{$prefix}badge-padding-x: #{$badge-padding-x};
+    --#{$prefix}badge-padding-y: #{$badge-padding-y};
+    --#{$prefix}badge-font-size: #{$badge-font-size};
+    --#{$prefix}badge-font-weight: #{$badge-font-weight};
+    --#{$prefix}badge-color: #{$badge-color};
+    --#{$prefix}badge-border-radius: #{$badge-border-radius};
+    --#{$prefix}badge-icon-size: 1em;
+    --#{$prefix}badge-line-height: 1;
+    display: inline-flex;
+    padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
+    font-weight: var(--#{$prefix}badge-font-weight);
+    font-size: var(--#{$prefix}badge-font-size);
+    color: var(--#{$prefix}badge-color);
+    text-align: center;
+    white-space: nowrap;
     justify-content: center;
     align-items: center;
+    gap: .25rem;
     background: $badge-bg-color;
     overflow: hidden;
     user-select: none;
     border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
-    min-width: ($badge-padding-y * 2 ) + (divide($badge-font-size, 100%) * 1em);
-    font-weight: $headings-font-weight;
-    letter-spacing: .04em;
+    border-radius: var(--#{$prefix}badge-border-radius);
+    min-width: calc(1em + var(--#{$prefix}badge-padding-y) * 2 + 2px);
+    letter-spacing: 0.04em;
     vertical-align: bottom;
+    line-height: var(--#{$prefix}badge-line-height);
 
     @at-root a#{&} {
-        color: $card-bg;
-    }
-
-    .avatar {
-        box-sizing: content-box;
-        width: 1.25rem;
-        height: 1.25rem;
-        margin: 0 .5rem 0 -.5rem;
+        background: var(--#{$prefix}bg-surface-secondary);
     }
 
     .icon {
         width: 1em;
         height: 1em;
-        font-size: 1rem;
+        font-size: var(--#{$prefix}badge-icon-size);
         stroke-width: 2;
     }
 }
 
 .badge:empty,
-.badge-empty {
+.badge-dot {
     display: inline-block;
     width: $badge-empty-size;
     height: $badge-empty-size;
@@ -77,3 +87,27 @@
 .badge-blink {
     animation: blink 2s infinite;
 }
+
+//
+// Badge sizes
+//
+.badge-sm {
+    --#{$prefix}badge-font-size: #{$badge-font-size-sm};
+    --#{$prefix}badge-icon-size: 1em;
+    --#{$prefix}badge-padding-y: 2px;
+    --#{$prefix}badge-padding-x: 0.25rem;
+}
+
+.badge-lg {
+    --#{$prefix}badge-font-size: #{$badge-font-size-lg};
+    --#{$prefix}badge-icon-size: 1em;
+    --#{$prefix}badge-padding-y: 0.25rem;
+    --#{$prefix}badge-padding-x: 0.5rem;
+}
+
+//
+// Badge with only icon
+//
+.badge-icononly {
+    --#{$prefix}badge-padding-x: 0;
+}

package/assets/styles/ui/_button-group.scss

@@ -13,4 +13,4 @@
     > .btn:focus {
         z-index: 1;
     }
-}
+}

package/assets/styles/ui/_buttons.scss

@@ -1,14 +1,16 @@
+@use "sass:color";
+
 //
 // Button
 //
 .btn {
-    --#{$prefix}btn-icon-size: #{$icon-size};
+    --#{$prefix}btn-icon-size: #{$input-btn-icon-size};
     --#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
     --#{$prefix}btn-color: var(--#{$prefix}body-color);
     --#{$prefix}btn-border-color: #{$btn-border-color};
     --#{$prefix}btn-hover-bg: var(--#{$prefix}btn-bg);
-    --#{$prefix}btn-hover-border-color: var(--#{$prefix}border-color-active);
-    --#{$prefix}btn-box-shadow: var(--#{$prefix}box-shadow-input);
+    --#{$prefix}btn-hover-border-color: var(--#{$prefix}border-active-color);
+    --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-input);
     --#{$prefix}btn-active-color: #{$active-color};
     --#{$prefix}btn-active-bg: #{$active-bg};
     --#{$prefix}btn-active-border-color: #{$active-border-color};
@@ -18,11 +20,13 @@
     justify-content: center;
     white-space: nowrap;
     box-shadow: var(--#{$prefix}btn-box-shadow);
+    position: relative;
 
     .icon {
         width: var(--#{$prefix}btn-icon-size);
         height: var(--#{$prefix}btn-icon-size);
         min-width: var(--#{$prefix}btn-icon-size);
+        font-size: var(--#{$prefix}btn-icon-size);
         margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
         vertical-align: bottom;
         color: inherit;
@@ -50,7 +54,7 @@
 }
 
 .btn-link {
-    color: $link-color;
+    color: #{color.adjust($primary, $lightness: 5%)};
     background-color: transparent;
     border-color: transparent;
     box-shadow: none;
@@ -68,27 +72,27 @@
 //
 // Button color variations
 //
-@each $color, $value in $theme-colors {
+@each $color, $value in map-merge($theme-colors, $social-colors) {
     .btn-#{$color} {
         @if $color == 'dark' {
             --#{$prefix}btn-border-color: var(--#{$prefix}dark-mode-border-color);
-            --#{$prefix}btn-hover-border-color: var(--#{$prefix}dark-mode-border-color-active);
-            --#{$prefix}btn-active-border-color: var(--#{$prefix}dark-mode-border-color-active);
+            --#{$prefix}btn-hover-border-color: var(--#{$prefix}dark-mode-border-active-color);
+            --#{$prefix}btn-active-border-color: var(--#{$prefix}dark-mode-border-active-color);
         } @else {
             --#{$prefix}btn-border-color: transparent;
             --#{$prefix}btn-hover-border-color: transparent;
             --#{$prefix}btn-active-border-color: transparent;
         }
 
-        --#{$prefix}btn-color: var(--#{$prefix}#{$color}-fg);
+        --#{$prefix}btn-color: var(--#{$prefix}#{$color}-fg, #{$white});
         --#{$prefix}btn-bg: var(--#{$prefix}#{$color});
         --#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
-        --#{$prefix}btn-hover-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
+        --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color}-darken);
         --#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
-        --#{$prefix}btn-active-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
+        --#{$prefix}btn-active-bg: var(--#{$prefix}#{$color}-darken);
         --#{$prefix}btn-disabled-bg: var(--#{$prefix}#{$color});
         --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color}-fg);
-        --#{$prefix}btn-box-shadow: var(--#{$prefix}box-shadow-input);
+        --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-input);
     }
 
     .btn-outline-#{$color} {
@@ -103,21 +107,19 @@
         --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color});
         --#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color});
     }
-}
 
-@each $name, $color in $theme-colors {
-    .btn-ghost-#{$name} {
-        --#{$prefix}btn-color: var(--#{$prefix}#{$name});
+    .btn-ghost-#{$color} {
+        --#{$prefix}btn-color: var(--#{$prefix}#{$color});
         --#{$prefix}btn-bg: transparent;
         --#{$prefix}btn-border-color: transparent;
-        --#{$prefix}btn-hover-color: var(--#{$prefix}#{$name}-fg);
-        --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$name});
-        --#{$prefix}btn-hover-border-color: var(--#{$prefix}#{$name});
-        --#{$prefix}btn-active-color: var(--#{$prefix}#{$name}-fg);
-        --#{$prefix}btn-active-bg: var(--#{$prefix}#{$name});
+        --#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
+        --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color});
+        --#{$prefix}btn-hover-border-color: var(--#{$prefix}#{$color});
+        --#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
+        --#{$prefix}btn-active-bg: var(--#{$prefix}#{$color});
         --#{$prefix}btn-active-border-color: transparent;
         --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
-        --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$name});
+        --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color});
         --#{$prefix}btn-disabled-bg: transparent;
         --#{$prefix}btn-disabled-border-color: transparent;
         --#{$prefix}gradient: none;
@@ -129,13 +131,13 @@
 // Button sizes
 //
 .btn-sm, .btn-group-sm > .btn {
-    --#{$prefix}btn-line-height: 1.5;
-    --#{$prefix}btn-icon-size: .75rem;
+    --#{$prefix}btn-line-height: #{$input-btn-line-height-sm};
+    --#{$prefix}btn-icon-size: #{$input-btn-icon-size-sm};
 }
 
 .btn-lg, .btn-group-lg > .btn {
-    --#{$prefix}btn-line-height: 1.5;
-    --#{$prefix}btn-icon-size: 2rem;
+    --#{$prefix}btn-line-height: #{$input-btn-line-height-lg};
+    --#{$prefix}btn-icon-size: #{$input-btn-icon-size-lg};
 }
 
 //
@@ -182,9 +184,9 @@
 .btn-floating {
     position: fixed;
     z-index: $zindex-fixed;
-    bottom: 1.5rem;
-    right: 1.5rem;
-    border-radius: $border-radius-pill;
+    bottom: 1rem;
+    left: 1rem;
+    box-shadow: var(--#{$prefix}shadow-dropdown);
 }
 
 //
@@ -221,6 +223,7 @@
 // Action button
 //
 .btn-action {
+    --#{$prefix}border-color: transparent;
     padding: 0;
     border: 0;
     color: var(--#{$prefix}secondary);
@@ -231,6 +234,7 @@
     justify-content: center;
     border-radius: var(--#{$prefix}border-radius);
     background: transparent;
+    box-shadow: none;
 
     &:after {
         content: none;
@@ -250,16 +254,8 @@
     &.show {
         color: var(--#{$prefix}primary);
     }
-
-    .icon {
-        margin: 0;
-        width: 1.25rem;
-        height: 1.25rem;
-        font-size: 1.25rem;
-        stroke-width: 1;
-    }
 }
 
 .btn-actions {
     display: flex;
-}
+}

package/assets/styles/ui/_calendars.scss

@@ -28,8 +28,8 @@
 }
 
 .calendar-date {
-    flex: 0 0 divide(100%, 7);
-    max-width: divide(100%, 7);
+    flex: 0 0 calc(100% / 7);
+    max-width: calc(100% / 7);
     padding: .2rem;
     text-align: center;
     border: 0;

package/assets/styles/ui/_cards.scss

@@ -205,6 +205,7 @@ Stacked card
     flex: 1;
     margin: calc(var(--#{$prefix}card-cap-padding-y) * -1) calc(var(--#{$prefix}card-cap-padding-x) * -1) calc(var(--#{$prefix}card-cap-padding-y) * -1);
     padding: calc(var(--#{$prefix}card-cap-padding-y) * .5) calc(var(--#{$prefix}card-cap-padding-x) * .5) 0;
+    border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
 }
 
 .card-header-pills {
@@ -584,3 +585,11 @@ Card list group
         border-top-left-radius: 0;
     }
 }
+
+/**
+Card note
+*/
+.card-note {
+    --#{$prefix}card-bg: #fff7dd;
+    --#{$prefix}card-border-color: #fff1c9;
+}

package/assets/styles/ui/_carousel.scss

@@ -65,4 +65,4 @@
     bottom: 0;
     height: 90%;
     background: linear-gradient(0deg, rgba($dark, .9), rgba($dark, 0));
-}
+}

package/assets/styles/ui/_charts.scss

@@ -58,4 +58,4 @@ Chart sparkline
         height: 1rem;
         font-size: 1rem;
     }
-}
+}

package/assets/styles/ui/_chat.scss

@@ -0,0 +1,38 @@
+.chat {
+}
+
+.chat-bubbles {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.chat-bubble {
+    background: var(--#{$prefix}bg-surface-secondary);
+    border-radius: var(--#{$prefix}border-radius-lg);
+    padding: 1rem;
+    position: relative;
+}
+
+.chat-bubble-me {
+    background-color: var(--#{$prefix}primary-lt);
+    box-shadow: none;
+}
+
+.chat-bubble-title {
+    margin-bottom: 0.25rem;
+}
+
+.chat-bubble-author {
+    font-weight: 600;
+}
+
+.chat-bubble-date {
+    color: var(--#{$prefix}secondary);
+}
+
+.chat-bubble-body {
+    > *:last-child {
+        margin-bottom: 0;
+    }
+}

package/assets/styles/ui/_close.scss

@@ -1,7 +1,60 @@
 .btn-close {
+    --#{$prefix}btn-close-color: currentColor;
+    --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
+    --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
+    --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
+    --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
+    --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
+    --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
+    --#{$prefix}btn-close-size: #{$btn-close-width};
+
+    width: var(--#{$prefix}btn-close-size);
+    height: var(--#{$prefix}btn-close-size);
+    padding: $btn-close-padding-y $btn-close-padding-x;
+    color: var(--#{$prefix}btn-close-color);
+    mask: var(--#{$prefix}btn-close-bg) no-repeat center/calc(var(--#{$prefix}btn-close-size) * .75);
+    background-color: var(--#{$prefix}btn-close-color);
+    border: 0;
+    border-radius: var(--tblr-border-radius);
+    opacity: var(--#{$prefix}btn-close-opacity);
     cursor: pointer;
+    display: block;
+
+    &:hover {
+        color: var(--#{$prefix}btn-close-color);
+        text-decoration: none;
+        opacity: var(--#{$prefix}btn-close-hover-opacity);
+    }
 
     &:focus {
-        outline: none;
+        outline: 0;
+        box-shadow: var(--#{$prefix}btn-close-focus-shadow);
+        opacity: var(--#{$prefix}btn-close-focus-opacity);
+    }
+
+    &:disabled,
+    &.disabled {
+        pointer-events: none;
+        user-select: none;
+        opacity: var(--#{$prefix}btn-close-disabled-opacity);
     }
 }
+
+// @mixin btn-close-white() {
+//   --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
+// }
+
+// .btn-close-white {
+//   @include btn-close-white();
+// }
+
+// :root,
+// [data-bs-theme="light"] {
+//   --#{$prefix}btn-close-filter: #{$btn-close-filter};
+// }
+
+// @if $enable-dark-mode {
+//   @include color-mode(dark, true) {
+//     @include btn-close-white();
+//   }
+// }

package/assets/styles/ui/_datagrid.scss

@@ -14,4 +14,4 @@
 .datagrid-title {
     @include subheader;
     margin-bottom: .25rem;
-}
+}

package/assets/styles/ui/_dropdowns.scss

@@ -1,5 +1,6 @@
 .dropdown-menu {
     user-select: none;
+    background-clip: border-box;
 
     &.card {
         padding: 0;
@@ -18,6 +19,7 @@
     align-items: center;
     margin: 0;
     line-height: $line-height-base;
+    gap: .5rem;
 }
 
 .dropdown-item-icon {
@@ -107,6 +109,7 @@
 
 .dropdown-menu-card {
     padding: 0;
+    min-width: 20rem;
 
     > .card {
         margin: 0;