sdga-ui 1.0.26 → 1.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdga-ui",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "description": "DGA UI - Government-Style Bootstrap Theme",
   "keywords": [
     "sdga",

package/theme/components/_progress.scss

@@ -9,3 +9,7 @@ $progress-bar-color: $white;
 $progress-bar-bg: $primary;
 $progress-bar-animation-timing: 1s linear infinite;
 $progress-bar-transition: width 0.6s ease;
+
+.progress-bar.bg-warning {
+  color: $white;
+}

package/theme/components/_spinners.scss

@@ -1,11 +1,34 @@
 // Bootstrap 5.3 - Spinner Component Variables
 
+// Spinner diameter scale (rem)
+// xxs: 20px, xs: 24px, s: 28px, m: 32px, l: 36px, xl: 40px, xxl: 44px
+$spinner-diameters: (
+	"xxs": 1.25rem,
+	"xs": 1.5rem,
+	"s": 1.75rem,
+	"m": 2rem,
+	"l": 2.25rem,
+	"xl": 2.5rem,
+	"xxl": 2.75rem
+);
+
 $spinner-width: 2rem;
 $spinner-height: $spinner-width;
 $spinner-vertical-align: -0.125em;
-$spinner-border-width: 0.25em;
+$spinner-border-width: 0.15em;
 $spinner-animation-speed: 0.75s;
 
 $spinner-width-sm: 1rem;
 $spinner-height-sm: $spinner-width-sm;
-$spinner-border-width-sm: 0.2em;
+$spinner-border-width-sm: 0.1em;
+
+// Spinner size utilities
+@each $name, $diameter in $spinner-diameters {
+	.spinner-border.spinner-border-#{$name},
+	.spinner-grow.spinner-grow-#{$name} {
+		--dga-spinner-width: #{$diameter};
+		--dga-spinner-height: #{$diameter};
+		width: #{$diameter};
+		height: #{$diameter};
+	}
+}

package/theme/customizations/_badges.scss

@@ -24,7 +24,9 @@
   color: $white;
 }
 
-.badge-warning {
+.badge-warning,
+.badge.bg-warning,
+.text-bg-warning {
   background-color: $warning-600;
   color: $white;
 }

package/theme/customizations/_buttons.scss

@@ -19,9 +19,9 @@ $button-variants: (
     active-color: $white,
     active-bg: $neutral-600,
     active-border-color: $neutral-600,
-    disabled-color: $neutral-400,
-    disabled-bg: $neutral-200,
-    disabled-border-color: $neutral-200
+    disabled-color: $gray-400,
+    disabled-bg: $gray-200,
+    disabled-border-color: $gray-200
   ),
   "primary": (
     color: $white,
@@ -33,9 +33,9 @@ $button-variants: (
     active-color: $white,
     active-bg: $primary-800,
     active-border-color: $primary-800,
-    disabled-color: $white,
-    disabled-bg: $primary-200,
-    disabled-border-color: $primary-200
+    disabled-color: $gray-400,
+    disabled-bg: $gray-200,
+    disabled-border-color: $gray-200
   ),
   "secondary": (
     color: $black,
@@ -47,9 +47,9 @@ $button-variants: (
     active-color: $black,
     active-bg: $secondary-200,
     active-border-color: $secondary-400,
-    disabled-color: $secondary-400,
-    disabled-bg: $secondary-200,
-    disabled-border-color: $secondary-300
+    disabled-color: $gray-400,
+    disabled-bg: $gray-200,
+    disabled-border-color: $gray-200
   ),
   "success": (
     color: $white,
@@ -79,14 +79,98 @@ $button-variants: (
     disabled-bg: $danger-100,
     disabled-border-color: $danger-100
   ),
+  "outline-danger": (
+    color: $danger-700,
+    bg: transparent,
+    border-color: $danger-300,
+    hover-color: $danger-700,
+    hover-bg: $danger-50,
+    hover-border-color: $danger-300,
+    active-color: $danger-700,
+    active-bg: $danger-100,
+    active-border-color: $danger-400,
+    disabled-color: $gray-400,
+    disabled-bg: $gray-200,
+    disabled-border-color: $gray-200
+  ),
+  "outline-danger-secondary": (
+    color: $danger-700,
+    bg: transparent,
+    border-color: $danger-200,
+    hover-color: $danger-700,
+    hover-bg: $danger-50,
+    hover-border-color: $danger-200,
+    active-color: $danger-700,
+    active-bg: $danger-100,
+    active-border-color: $danger-300,
+    disabled-color: $gray-400,
+    disabled-bg: $gray-200,
+    disabled-border-color: $gray-200
+  ),
+  "danger-transparent": (
+    color: $danger-600,
+    bg: transparent,
+    border-color: transparent,
+    hover-color: $danger-700,
+    hover-bg: transparent,
+    hover-border-color: transparent,
+    active-color: $danger-800,
+    active-bg: transparent,
+    active-border-color: transparent,
+    disabled-color: $gray-400,
+    disabled-bg: transparent,
+    disabled-border-color: transparent
+  ),
+  "danger-subtle": (
+    color: $danger-700,
+    bg: transparent,
+    border-color: transparent,
+    hover-color: $danger-700,
+    hover-bg: $danger-50,
+    hover-border-color: transparent,
+    active-color: $danger-700,
+    active-bg: $danger-100,
+    active-border-color: transparent,
+    disabled-color: $gray-400,
+    disabled-bg: transparent,
+    disabled-border-color: transparent
+  ),
+  "danger-secondary": (
+    color: $danger-700,
+    bg: $danger-50,
+    border-color: transparent,
+    hover-color: $danger-700,
+    hover-bg: $danger-100,
+    hover-border-color: transparent,
+    active-color: $danger-700,
+    active-bg: $danger-200,
+    active-border-color: transparent,
+    disabled-color: $gray-400,
+    disabled-bg: $gray-200,
+    disabled-border-color: $gray-200
+  ),
+  "danger-primary": (
+    color: $white,
+    bg: $danger-600,
+    border-color: $danger-600,
+    hover-color: $white,
+    hover-bg: $danger-700,
+    hover-border-color: $danger-700,
+    active-color: $white,
+    active-bg: $danger-800,
+    active-border-color: $danger-800,
+    disabled-color: $neutral-500,
+    disabled-bg: $danger-100,
+    disabled-border-color: $danger-100
+  ),
   "warning": (
-    color: $neutral-950,
+    color: $white,
     bg: $warning-400,
     border-color: $warning-400,
-    hover-color: $neutral-950,
+    hover-color: $white,
     hover-bg: $warning-500,
     hover-border-color: $warning-500,
-    active-color: $neutral-950,
+    active-color: $white,
     active-bg: $warning-600,
     active-border-color: $warning-600,
     disabled-color: $neutral-500,
@@ -156,8 +240,8 @@ $button-variants: (
     hover-bg: transparent,
     hover-border-color: transparent,
     active-color: $black,
-    active-bg: transparent,
-    active-border-color: transparent,
+    active-bg: $secondary-200,
+    active-border-color: $secondary-300,
     disabled-color: $neutral-400,
     disabled-bg: transparent,
     disabled-border-color: transparent
@@ -477,6 +561,32 @@ $on-primary-button-variants: (
   }
 }
 
+// RTL support for horizontal button groups:
+// keep natural RTL ordering and align edge radii/separators correctly.
+[dir="rtl"] .btn-group {
+  direction: rtl;
+
+  > :not(.btn-check) + .btn,
+  > .btn-group:not(:first-child) {
+    margin-right: calc(-1 * var(--#{$prefix}border-width));
+    margin-left: 0;
+  }
+
+  > .btn:first-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: var(--#{$prefix}border-radius);
+    border-bottom-right-radius: var(--#{$prefix}border-radius);
+  }
+
+  > .btn:last-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: var(--#{$prefix}border-radius);
+    border-bottom-left-radius: var(--#{$prefix}border-radius);
+  }
+}
+
 // ============================================
 // Dropdown
 // ============================================

package/theme/customizations/_cards.scss

@@ -7,6 +7,184 @@
 
 
 
+// ============================================
+// EXPANDABLE CARD
+// ============================================
+
+.card-expandable {
+  cursor: pointer;
+  border: 1px solid $gray-200 !important;
+  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+
+  &:hover:not(.disabled),
+  &.card-expandable-hover {
+    background-color: $gray-50;
+  }
+
+  &:focus-visible,
+  &.card-expandable-focused {
+    outline: none;
+    border-color: $gray-900 !important;
+    box-shadow: 0 0 0 2px $gray-900 !important;
+  }
+
+  .form-check-input:focus {
+    box-shadow: none;
+    border-color: $gray-300;
+  }
+
+  &.disabled {
+    background-color: $gray-100;
+    cursor: not-allowed;
+    pointer-events: none;
+
+    .dga-featured-icon {
+      background-color: $gray-200;
+
+      svg, i {
+        fill: $gray-400;
+        color: $gray-400;
+        stroke: $gray-400;
+      }
+    }
+
+    .card-subtitle,
+    .card-text {
+      color: $gray-400 !important;
+    }
+
+    .card-expanded-icon {
+      color: $gray-400;
+    }
+
+    .form-check-input {
+      border-color: $gray-300;
+      background-color: $gray-200;
+    }
+  }
+}
+
+// ============================================
+// SELECT CARD (checkbox selection)
+// ============================================
+
+.card-select {
+  cursor: pointer;
+  border: 1px solid $gray-200 !important;
+  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+
+  .form-check-input:focus {
+    box-shadow: none;
+    border-color: $gray-300;
+  }
+
+  &:hover:not(.disabled),
+  &.card-select-hover {
+    background-color: $gray-50;
+  }
+
+  &:focus-visible,
+  &.card-select-focused {
+    outline: none;
+    border-color: $gray-900 !important;
+    box-shadow: 0 0 0 2px $gray-900 !important;
+  }
+
+  &.disabled {
+    background-color: $gray-100;
+    cursor: not-allowed;
+    pointer-events: none;
+
+    .dga-featured-icon {
+      background-color: $gray-200;
+
+      svg, i {
+        fill: $gray-400;
+        color: $gray-400;
+        stroke: $gray-400;
+      }
+    }
+
+    .card-subtitle,
+    .card-text {
+      color: $gray-400 !important;
+    }
+
+    .form-check-input {
+      border-color: $gray-300;
+      background-color: $gray-200;
+    }
+  }
+}
+
+// ============================================
+// SELECTABLE CARD
+// ============================================
+
+.card-selectable {
+  cursor: pointer;
+  border: 1px solid $gray-200 !important;
+  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+
+  .card-selectable-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: $radius-full;
+    background-color: $primary-50;
+    color: $primary;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.125rem;
+    flex-shrink: 0;
+  }
+
+  .card-title {
+    margin-bottom: 0.25rem;
+  }
+
+  .form-check-input:focus {
+    box-shadow: none;
+    border-color: $gray-300;
+  }
+
+  &:hover:not(.disabled),
+  &.card-selectable-hover {
+    background-color: $gray-50;
+  }
+
+  &:focus-visible,
+  &.card-selectable-focused {
+    outline: none;
+    border-color: $gray-900 !important;
+    box-shadow: 0 0 0 2px $gray-900 !important;
+  }
+
+  &.disabled {
+    background-color: $gray-100;
+    cursor: not-allowed;
+    pointer-events: none;
+
+    .card-selectable-icon {
+      background-color: $gray-200;
+      color: $gray-400;
+    }
+
+    .card-title {
+      color: $gray-400;
+    }
+
+    .card-text {
+      color: $gray-400 !important;
+    }
+
+    .form-check-input {
+      border-color: $gray-300;
+      background-color: $gray-200;
+    }
+  }
+}
+
 // ============================================
 // CARD BASE STYLES
 // ============================================

package/theme/customizations/_custom-styles.scss

@@ -1,3 +1,8 @@
 [dir="rtl"] .mirror-rtl {
     transform: scaleX(-1);
 }
+
+// Bootstrap auto-contrast picks dark text on warning backgrounds — override to white.
+.bg-warning {
+  color: $white;
+}

package/theme/customizations/_pagination.scss

@@ -0,0 +1,121 @@
+// Pagination Customizations - SDGA Custom Enhancements
+
+// Keep page number controls visually square by enforcing fixed heights
+// and matching minimum widths across all pagination sizes.
+.pagination {
+  gap: 0.5rem;
+
+  .page-item:not(:first-child) .page-link {
+    margin-left: 0;
+  }
+
+  .page-link {
+    align-items: center;
+    background-color: transparent;
+    border: 0;
+    border-radius: $radius-md;
+    color: $black;
+    display: inline-flex;
+    font-size: 0.875rem;
+    height: 32px;
+    justify-content: center;
+    line-height: 1;
+    min-width: 32px;
+    padding-inline: 0.5rem;
+    position: relative;
+    transition: background-color 0.2s ease, color 0.2s ease, outline-color 0.2s ease;
+
+    &:hover {
+      background-color: $neutral-100;
+      color: $black;
+      z-index: 0;
+    }
+
+    &:focus,
+    &:focus-visible {
+      background-color: transparent;
+      box-shadow: none;
+      color: $black;
+      outline: 2px solid $black;
+      outline-offset: -2px;
+      z-index: 1;
+    }
+
+    // Pressed style aligns with button/dropdown pressed behavior.
+    &:active {
+      background-color: $neutral-200 !important;
+      box-shadow: none !important;
+      color: $black;
+      outline: 0 !important;
+    }
+  }
+
+  .page-item.active .page-link,
+  .page-link[aria-current='page'] {
+    background-color: transparent;
+    border: 0;
+    color: $black;
+    font-weight: 500;
+
+    &::after {
+      background-color: $primary-600;
+      border-radius: 999px;
+      bottom: -2px;
+      content: '';
+      height: 4px;
+      left: 50%;
+      position: absolute;
+      transform: translateX(-50%);
+      width: 65%;
+    }
+
+    &:hover {
+      background-color: transparent;
+      color: $black;
+    }
+
+    &:focus,
+    &:focus-visible {
+      outline: 2px solid $black;
+      outline-offset: -2px;
+    }
+
+    &:active {
+      background-color: $primary-50 !important;
+      color: $primary-700;
+      outline: 0 !important;
+
+      &::after {
+        background-color: $primary-700;
+      }
+    }
+  }
+
+  .page-item.disabled .page-link,
+  .page-link.disabled {
+    background-color: transparent;
+    color: $neutral-400;
+    opacity: 1;
+  }
+
+  .page-link > .bi {
+    font-size: 1rem;
+    line-height: 1;
+  }
+
+  &.pagination-sm {
+    .page-link {
+      height: 24px;
+      min-width: 24px;
+      padding-inline: 0.375rem;
+    }
+  }
+
+  &.pagination-lg {
+    .page-link {
+      height: 40px;
+      min-width: 40px;
+      padding-inline: 0.75rem;
+    }
+  }
+}

package/theme/customizations/_spinners.scss

@@ -0,0 +1,39 @@
+// Spinner customizations
+// Apply a full-track ring spinner with a 25% colored arc.
+
+$spinner-track-color: $neutral-200;
+$spinner-arc-angle: 90deg;
+
+.spinner-border {
+  border: 0;
+  border-radius: 50%;
+  background: conic-gradient(
+    from -90deg,
+    currentColor 0deg $spinner-arc-angle,
+    $spinner-track-color $spinner-arc-angle 360deg
+  );
+  -webkit-mask: radial-gradient(
+    farthest-side,
+    transparent calc(100% - #{$spinner-border-width}),
+    $black calc(100% - #{$spinner-border-width})
+  );
+  mask: radial-gradient(
+    farthest-side,
+    transparent calc(100% - #{$spinner-border-width}),
+    $black calc(100% - #{$spinner-border-width})
+  );
+  animation: $spinner-animation-speed linear infinite spinner-border;
+}
+
+.spinner-border-sm {
+  -webkit-mask: radial-gradient(
+    farthest-side,
+    transparent calc(100% - #{$spinner-border-width-sm}),
+    $black calc(100% - #{$spinner-border-width-sm})
+  );
+  mask: radial-gradient(
+    farthest-side,
+    transparent calc(100% - #{$spinner-border-width-sm}),
+    $black calc(100% - #{$spinner-border-width-sm})
+  );
+}

package/theme/dga-ui.scss

@@ -30,6 +30,8 @@
 @import './customizations/navbar';
 @import './customizations/navs';
 @import './customizations/tabs';
+@import './customizations/pagination';
 @import './customizations/progress-indicator';
 @import './customizations/breadcrumb';
+@import './customizations/spinners';
 @import './customizations/custom-styles';