gd-bs 6.4.9 → 6.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gd-bs",
-    "version": "6.4.9",
+    "version": "6.5.1",
     "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
     "main": "build/index.js",
     "typings": "src/index.d.ts",

package/src/components/dropdown/index.ts

@@ -209,7 +209,7 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
         let toggle = this.el.querySelector(".dropdown-toggle") as HTMLElement;
         if (toggle && this._elMenu) {
             // Set the type, based on the current dropdown type
-            let popoverType = PopoverTypes.Light;
+            let popoverType = PopoverTypes.LightBorder;
             switch (this.props.type) {
                 case DropdownTypes.Danger:
                 case DropdownTypes.OutlineDanger:
@@ -606,4 +606,4 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
         this._popover ? this._popover.toggle() : null;
     }
 }
-export const Dropdown = (props: IDropdownProps, template?: string): IDropdown => { return new _Dropdown(props, template); }
+export const Dropdown = (props: IDropdownProps, template?: string): IDropdown => { return new _Dropdown(props, template); }

package/src/styles/_custom.scss

@@ -238,6 +238,9 @@
     .carousel-indicators [data-bs-target] {
         background-color: var(--sp-neutral-dark, #201f1e) !important;
     }
+    .dropdown-divider {
+        border-color: var(--sp-neutral-quaternary, #d2d0ce);
+    }
     /* Color match dropdown hover */
     .dropdown-item:hover, .dropdown-item:focus {
         background-color: var(--sp-neutral-quaternary, #d2d0ce);
@@ -248,7 +251,10 @@
     }
     /* Dropdown Menu - Using the popover component for the menu, so we don't need to hide it by default */
     .dropdown-menu {
-        display: inherit;
+        --bs-dropdown-header-color: var(--sp-info-icon, #605e5c);
+        --bs-dropdown-link-active-color: var(--sp-white, #ffffff);
+        --bs-dropdown-link-active-bg: var(--sp-theme-primary, #0078d4);
+        display: contents;
     }
     /* Show checkboxes & toggles as buttons */
     .form-check .form-check-input, .form-select:hover {
@@ -286,17 +292,17 @@
         color: var(--sp-neutral-tertiary, #a19f9d);
     }
     /* Fix validation styling */
-    .form-control:invalid, .form-control.is-invalid, .form-select:invalid, .form-select.is-invalid {
+    .form-control.is-invalid, .form-select.is-invalid {
         --bs-control-invalid-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23a80000'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23a80000' stroke='none'/%3e%3c/svg%3e");
     }
-    .form-control:invalid, .form-control.is-invalid {
+    .form-control.is-invalid {
         background-image: var(--bs-control-invalid-image);
         border-color: var(--sp-error-icon, #a80000) !important;
     }
-    .form-control:valid, .form-control.is-valid, .form-select:valid, .form-select.is-valid {
+    .form-control.is-valid, .form-select.is-valid {
         --bs-control-valid-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23107c10' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
     }
-    .form-control:valid, .form-control.is-valid {
+    .form-control.is-valid {
         background-image: var(--bs-control-valid-image);
         border-color: var(--sp-success-icon, #107c10) !important;
     }
@@ -315,12 +321,12 @@
         border-color: var(--sp-theme-secondary, #2b88d8);
         box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 65%);
     }
-    .form-select:invalid:not([multiple]):not([size]), .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
+    .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
         --bs-select-invalid-image: var(--bs-form-select-bg-img),var(--bs-control-invalid-image);
         background-image: var(--bs-select-invalid-image);
         border-color: var(--sp-error-icon, #a80000) !important;
     }
-    .form-select:valid:not([multiple]):not([size]), .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
+    .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
         --bs-select-valid-image: var(--bs-form-select-bg-img),var(--bs-control-valid-image);
         background-image: var(--bs-select-valid-image);
         border-color: var(--sp-success-icon, #107c10) !important;

package/src/styles/_root.scss

@@ -122,6 +122,7 @@
     --bs-highlight-color: var(--sp-neutral-dark);
     --bs-highlight-bg: var(--sp-neutral-quaternary-alt);
     --bs-border-color: var(--sp-neutral-quaternary);
+    --bs-border-color-translucent: color-mix(in srgb, var(--sp-black, #000000), transparent 82%);
     --bs-focus-ring-color: color-mix(in srgb, var(--sp-theme-primary), transparent 75%);
     --bs-form-valid-color: var(--sp-success-icon);
     --bs-form-valid-border-color: var(--sp-success-icon);

package/src/styles/_tippy.scss

@@ -147,6 +147,9 @@
 .tippy-box[data-theme~='light-border'][data-placement^='right']>.tippy-arrow::before {
     border-right-color: var(--sp-white, #ffffff) !important;
 }
+.tippy-box[data-theme~='light-border'][data-placement^='bottom']>.tippy-arrow::after {
+    border-bottom-color: var(--sp-neutral-quaternary, #d2d0ce) !important;
+}
 .tippy-box[data-theme~='light-border'][data-placement^='top']>.tippy-arrow::after {
     border-top-color: var(--sp-neutral-quaternary, #d2d0ce) !important;
 }
@@ -186,3 +189,9 @@
 .tippy-box[data-theme~='sharepoint'][data-placement^='right']>.tippy-arrow::before {
     border-right-color: var(--sp-theme-dark, #005a9e);
 }
+
+/* Add some padding if the Tippy content is a dropdown */
+.tippy-content:has(>.dropdown-menu) {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+}