gd-bs 6.5.0 → 6.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gd-bs",
-    "version": "6.5.0",
+    "version": "6.5.2",
     "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/components/form/control.ts

@@ -665,13 +665,18 @@ export class FormControl implements IFormControl {
 
     // Updates the control validation
     updateValidation(elControl: Element, validation: IFormControlValidationResult) {
+        // See if this is a checkbox/switch
+        let isCheckbox = elControl.querySelectorAll(".form-check").length > 0;
+
         // Get the form controls
-        let elFormControls = elControl.querySelectorAll(".form-control");
+        let elFormControls = isCheckbox ? [elControl] : elControl.querySelectorAll(".form-control");
         elFormControls = elFormControls.length == 0 ? elControl.querySelectorAll(".form-select") : elFormControls;
+
+        // Parse the form controls
         for (let i = 0; i < elFormControls.length; i++) {
             // Ensure the control exists
             let elFormControl = elFormControls[i] as HTMLElement;
-            if (elFormControl) {
+            if (!isCheckbox) {
                 // Clear the invalid/valid classes
                 elFormControl.classList.remove("is-invalid");
                 elFormControl.classList.remove("is-valid");

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 {

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;
+}