@agorapulse/ui-theme 20.1.20 → 20.1.22

package/assets/style/css-ui/_accordion.scss

@@ -0,0 +1,54 @@
+.ap-accordion {
+    background-color: var(--ref-color-white);
+    border: 1px solid var(--ref-color-grey-10);
+    border-radius: var(--ref-border-radius-md);
+    display: flex;
+    flex-direction: column;
+}
+
+.ap-accordion-header {
+    border-bottom: 1px solid var(--ref-color-grey-10);
+    display: flex;
+    align-items: center;
+    gap: var(--ref-spacing-xxs);
+    padding: 6px var(--ref-spacing-xs) 6px var(--ref-spacing-sm);
+
+    > i {
+        flex-shrink: 0;
+    }
+}
+
+.ap-accordion-title {
+    flex: 1;
+    min-width: 0;
+    font-size: var(--ref-font-size-sm);
+    font-weight: var(--ref-font-weight-bold);
+    line-height: var(--ref-font-line-height-md);
+    color: var(--ref-color-grey-100);
+}
+
+.ap-accordion-toggle {
+    flex-shrink: 0;
+    transition: transform var(--ref-animation-short);
+}
+
+.ap-accordion-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ref-spacing-sm);
+    padding: var(--ref-spacing-sm);
+}
+
+.ap-accordion.collapsed {
+    .ap-accordion-header {
+        border-bottom: none;
+    }
+
+    .ap-accordion-toggle {
+        transform: rotate(180deg);
+    }
+
+    .ap-accordion-content {
+        display: none;
+    }
+}

package/assets/style/css-ui/_avatar-group.scss

@@ -0,0 +1,61 @@
+// Agorapulse Avatar Group Styles
+@use 'mixins' as m;
+
+// Avatar group container — uses row-reverse for correct z-stacking (first avatar on top)
+// DOM order is reversed from visual order
+.ap-avatar-group {
+    display: inline-flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    padding-left: 2px; // compensate overlap offset
+
+    .ap-avatar,
+    .ap-avatar-group-overflow {
+        margin-inline-start: -2px;
+        cursor: default;
+    }
+
+    // Size variants set overflow counter dimensions
+    &.size-16 .ap-avatar-group-overflow {
+        width: 16px;
+        height: 16px;
+        font-size: 8px;
+    }
+
+    &.size-32 .ap-avatar-group-overflow {
+        width: 32px;
+        height: 32px;
+        font-size: 12px;
+    }
+}
+
+// Overflow counter badge
+.ap-avatar-group-overflow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--ref-color-grey-10);
+    border-radius: 24px;
+    transition: background-color var(--ref-animation-short);
+    width: 24px;
+    height: 24px;
+    font-family: var(--ref-font-family);
+    font-weight: 700;
+    font-size: 10px;
+    color: var(--ref-color-grey-80);
+    line-height: 1em;
+
+    &:hover {
+        background-color: var(--ref-color-grey-20);
+    }
+
+    &:active {
+        background-color: var(--ref-color-grey-40);
+    }
+
+    &:focus-visible {
+        background-color: var(--ref-color-grey-20);
+        outline: 3px solid var(--ref-color-electric-blue-100);
+        outline-offset: 1px;
+    }
+}

package/assets/style/css-ui/_avatar.scss

@@ -111,7 +111,6 @@
     &.big {
         background: none;
         box-shadow: none;
-        overflow: hidden;
 
         > i {
             color: unset;
@@ -163,74 +162,30 @@
         border-radius: 0;
     }
 
+    &:has(.ap-icon-youtube-official, .ap-icon-youtube) {
+        box-shadow: none;
+        border-radius: 0;
+    }
+
     > i {
         font-size: var(--ap-avatar-network-size);
         width: var(--ap-avatar-network-size);
         height: var(--ap-avatar-network-size);
 
         // Monochrome icon fallback colors (when using ap-icon-{network} instead of -official)
-        &.ap-icon-facebook { color: var(--ref-color-facebook-100); }
-        &.ap-icon-instagram { color: var(--ref-color-instagram-100); }
-        &.ap-icon-linkedin { color: var(--ref-color-linkedin-100); }
-        &.ap-icon-youtube { color: var(--ref-color-youtube-100); }
-    }
-}
-
-// Avatar group container — uses row-reverse for correct z-stacking (first avatar on top)
-// DOM order is reversed from visual order
-.ap-avatar-group {
-    display: inline-flex;
-    flex-direction: row-reverse;
-    align-items: center;
-    padding-left: 2px; // compensate overlap offset
-
-    .ap-avatar,
-    .ap-avatar-group-overflow {
-        margin-inline-start: -2px;
-        cursor: default;
-    }
-
-    // Size variants set overflow counter dimensions
-    &.size-16 .ap-avatar-group-overflow {
-        width: 16px;
-        height: 16px;
-        font-size: 8px;
-    }
-
-    &.size-32 .ap-avatar-group-overflow {
-        width: 32px;
-        height: 32px;
-        font-size: 12px;
+        &.ap-icon-facebook {
+            color: var(--ref-color-facebook-100);
+        }
+        &.ap-icon-instagram {
+            color: var(--ref-color-instagram-100);
+        }
+        &.ap-icon-linkedin {
+            color: var(--ref-color-linkedin-100);
+        }
+        &.ap-icon-youtube {
+            color: var(--ref-color-youtube-100);
+        }
     }
 }
 
-// Overflow counter badge
-.ap-avatar-group-overflow {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--ref-color-grey-10);
-    border-radius: 24px;
-    transition: background-color var(--ref-animation-short);
-    width: 24px;
-    height: 24px;
-    font-family: var(--ref-font-family);
-    font-weight: 700;
-    font-size: 10px;
-    color: var(--ref-color-grey-80);
-    line-height: 1em;
-
-    &:hover {
-        background-color: var(--ref-color-grey-20);
-    }
-
-    &:active {
-        background-color: var(--ref-color-grey-40);
-    }
-
-    &:focus-visible {
-        background-color: var(--ref-color-grey-20);
-        outline: 3px solid var(--ref-color-electric-blue-100);
-        outline-offset: 1px;
-    }
-}
+// Avatar group styles are in _avatar-group.scss

package/assets/style/css-ui/_button.scss

@@ -29,7 +29,6 @@
     min-height: var(--comp-button-height);
     white-space: nowrap;
     text-overflow: ellipsis;
-    width: 100%;
 
     &:not(:disabled):not(.loading):hover {
         cursor: pointer;
@@ -47,10 +46,6 @@
         @include m.focus-ring;
     }
 
-    &.inverse {
-        flex-direction: row-reverse;
-    }
-
     // Primary variants
     &.primary {
         color: var(--ref-color-white);
@@ -102,7 +97,14 @@
 
         &.grey {
             border: 1px solid var(--ref-color-grey-20);
-            @include btn.btn-stroked-color('grey', $text-color-shade: 80, $border-color-shade: 20, $hover-border-shade: 40, $active-border-shade: 60, $focus-border-shade: 20);
+            @include btn.btn-stroked-color(
+                'grey',
+                $text-color-shade: 80,
+                $border-color-shade: 20,
+                $hover-border-shade: 40,
+                $active-border-shade: 60,
+                $focus-border-shade: 20
+            );
         }
 
         &.blue {
@@ -141,7 +143,7 @@
             pointer-events: none;
         }
 
-        > * {
+        > *:not(.ap-loading-bar) {
             position: relative;
             z-index: 1;
         }
@@ -243,8 +245,9 @@
     animation: slide 1.5s ease-in-out infinite;
 }
 
-// Locked icon
-.ap-locked-symbol {
+// Locked icon — lives inside .ap-button.locked or .ap-icon-button.locked, no wrapper needed
+.ap-button.locked > .ap-locked-symbol,
+.ap-icon-button.locked > .ap-locked-symbol {
     position: absolute;
     top: -6px;
     right: -6px;
@@ -254,6 +257,7 @@
     padding: 1px;
     border-radius: 100%;
     background: var(--ref-color-white);
+    pointer-events: none;
 
     > i {
         color: var(--ref-color-purple-100);

package/assets/style/css-ui/_card.scss

@@ -0,0 +1,17 @@
+.ap-card {
+    background-color: var(--ref-color-white);
+    border: 1px solid var(--ref-color-grey-10);
+    border-radius: var(--ref-border-radius-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--ref-spacing-sm);
+    padding: var(--ref-spacing-sm);
+}
+
+.ap-card-title {
+    font-size: var(--ref-font-size-md);
+    font-weight: var(--ref-font-weight-bold);
+    line-height: var(--ref-font-line-height-lg);
+    color: var(--ref-color-grey-100);
+    margin: 0;
+}

package/assets/style/css-ui/_checkbox.scss

@@ -12,16 +12,35 @@
         @include m.sr-only;
     }
 
-    // Label positioning
-    &.label-left {
-        flex-direction: row-reverse;
-    }
-
     &.full-width {
         justify-content: space-between;
         width: 100%;
     }
 
+    // No-label variant: larger hit area with background feedback
+    &:not(:has(> span:not(:empty))) {
+        padding: 10px;
+        border-radius: var(--ref-border-radius-md);
+        transition: background-color 0.15s;
+
+        // Hover: grey background
+        &:hover:not(:has(input:disabled)) {
+            background: var(--ref-color-grey-05);
+        }
+
+        // Checked hover: blue background
+        &:hover:not(:has(input:disabled)):has(input:checked),
+        &:hover:not(:has(input:disabled)).indeterminate {
+            background: var(--ref-color-electric-blue-10);
+        }
+
+        // Checked active: darker blue background
+        &:active:not(:has(input:disabled)):has(input:checked),
+        &:active:not(:has(input:disabled)).indeterminate {
+            background: var(--ref-color-electric-blue-20);
+        }
+    }
+
     // Disabled container
     &:has(input:disabled) {
         cursor: default;
@@ -38,7 +57,9 @@
         background: var(--ref-color-white);
         box-sizing: border-box;
         flex-shrink: 0;
-        transition: background-color 0.15s, border-color 0.15s;
+        transition:
+            background-color 0.15s,
+            border-color 0.15s;
 
         // Checkmark via CSS (no inline SVG needed)
         &::after {
@@ -46,7 +67,7 @@
             display: none;
             width: 10px;
             height: 10px;
-            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1 5L4 8L9 2' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M14.238 3.337a.92.92 0 0 1 .025 1.301l-7.7 8a.92.92 0 0 1-1.326 0l-3.5-3.636a.92.92 0 1 1 1.326-1.276L5.9 10.674l7.037-7.312a.92.92 0 0 1 1.301-.025' clip-rule='evenodd' fill='white'/%3E%3C/svg%3E");
             mask-size: contain;
             mask-repeat: no-repeat;
             background-color: var(--ref-color-white);
@@ -129,9 +150,11 @@
         border-color: var(--ref-color-grey-20);
     }
 
-    // Focus ring (keyboard only)
-    &:has(input:focus-visible) > i {
-        @include m.focus-ring-3px;
+    // Focus ring (any focus on hover-capable devices, matching original component)
+    @media (hover: hover) {
+        &:has(input:focus:not(:disabled)) > i {
+            @include m.focus-ring-3px;
+        }
     }
 
     // Error state

package/assets/style/css-ui/_datepicker.scss

@@ -239,7 +239,9 @@
         color: var(--ref-color-grey-80);
         text-align: left;
         cursor: pointer;
-        transition: background-color 0.15s ease, color 0.15s ease;
+        transition:
+            background-color 0.15s ease,
+            color 0.15s ease;
 
         &:hover:not(.active):not(:disabled) {
             color: var(--ref-color-electric-blue-100);

package/assets/style/css-ui/_dialog.scss

@@ -0,0 +1,74 @@
+.ap-dialog {
+    background-color: var(--ref-color-white);
+    border-radius: var(--ref-border-radius-md);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+}
+
+.ap-dialog-header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ref-spacing-xxxs);
+    padding: var(--ref-spacing-lg) var(--ref-spacing-lg) 0;
+    padding-right: 64px;
+}
+
+.ap-dialog-title {
+    font-size: var(--ref-font-size-xxl);
+    font-weight: var(--ref-font-weight-bold);
+    line-height: var(--ref-font-line-height-xl);
+    color: var(--ref-color-grey-100);
+    margin: 0;
+}
+
+.ap-dialog-subtitle {
+    font-size: var(--ref-font-size-md);
+    line-height: var(--ref-font-line-height-lg);
+    color: var(--ref-color-grey-80);
+}
+
+.ap-dialog-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ref-spacing-md);
+    padding: var(--ref-spacing-md) var(--ref-spacing-lg);
+}
+
+.ap-dialog-footer {
+    border-top: 1px solid var(--ref-color-grey-10);
+    display: flex;
+    align-items: center;
+    gap: var(--ref-spacing-sm);
+    padding: var(--ref-spacing-sm) var(--ref-spacing-lg);
+}
+
+.ap-dialog-footer-left {
+    display: flex;
+    align-items: center;
+    gap: var(--ref-spacing-sm);
+}
+
+.ap-dialog-footer-right {
+    display: flex;
+    align-items: center;
+    gap: var(--ref-spacing-sm);
+    flex: 1;
+    justify-content: flex-end;
+}
+
+.ap-dialog-close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    padding: 10px;
+    border-radius: var(--ref-border-radius-md);
+    cursor: pointer;
+    background: none;
+    border: none;
+    color: var(--ref-color-grey-100);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

package/assets/style/css-ui/_dot-stepper.scss

@@ -28,8 +28,8 @@
             background: var(--comp-dot-stepper-dot-inactive-focused-background-color);
         }
 
-        // Focus state
-        &:focus:not(:disabled) {
+        // Focus state (inactive dots only)
+        &:focus:not(:disabled):not(.active) {
             background: var(--comp-dot-stepper-dot-inactive-hovered-background-color);
             outline: none;
 
@@ -38,8 +38,9 @@
                 position: absolute;
                 width: calc(var(--comp-dot-stepper-dot-size) + var(--comp-dot-stepper-dot-inactive-border-width));
                 height: calc(var(--comp-dot-stepper-dot-size) + var(--comp-dot-stepper-dot-inactive-border-width));
-                top: calc(-1 * (var(--comp-dot-stepper-dot-inactive-border-width) * 2 + 1px));
-                left: calc(-1 * (var(--comp-dot-stepper-dot-inactive-border-width) * 2 + 1px));
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
                 border-radius: 50%;
                 border: var(--comp-dot-stepper-dot-inactive-border-width) solid var(--ref-color-electric-blue-100);
             }

package/assets/style/css-ui/_icon-button.scss

@@ -3,7 +3,12 @@
 @use '../button-mixins' as btn;
 
 .ap-icon-button {
-    display: flex;
+    &.ap-icon-button {
+        display: flex;
+        width: var(--comp-icon-button-width);
+        height: var(--comp-icon-button-height);
+    }
+
     justify-content: center;
     align-items: center;
     @include m.fixed-size(var(--comp-icon-button-width));
@@ -13,13 +18,16 @@
     padding: var(--comp-icon-button-padding);
     position: relative;
     cursor: pointer;
-    transition: border-color 0.25s, background-color 0.25s;
+    transition:
+        border-color 0.25s,
+        background-color 0.25s;
     box-sizing: border-box;
 
     > i {
         color: var(--ref-color-grey-60);
-        @include m.fixed-size(calc(var(--comp-icon-button-height) - (var(--comp-icon-button-padding) * 2)));
+        font-size: calc(var(--comp-icon-button-height) - (var(--comp-icon-button-padding) * 2));
         flex-shrink: 0;
+        line-height: 1;
     }
 
     // Default hover/active (flat, no color)
@@ -45,7 +53,9 @@
 
     // Color variants — flat
     &.blue {
-        > i { color: var(--ref-color-electric-blue-100); }
+        > i {
+            color: var(--ref-color-electric-blue-100);
+        }
 
         &:hover:not(.stroked):not(.locked):not(:disabled) {
             background: var(--ref-color-electric-blue-05);
@@ -55,11 +65,15 @@
             background: var(--ref-color-electric-blue-10);
         }
 
-        &:disabled > i { color: var(--ref-color-electric-blue-20); }
+        &:disabled > i {
+            color: var(--ref-color-electric-blue-20);
+        }
     }
 
     &.green {
-        > i { color: var(--ref-color-green-100); }
+        > i {
+            color: var(--ref-color-green-100);
+        }
 
         &:hover:not(.stroked):not(.locked):not(:disabled) {
             background: var(--ref-color-green-10);
@@ -69,11 +83,15 @@
             background: var(--ref-color-green-20);
         }
 
-        &:disabled > i { color: var(--ref-color-green-20); }
+        &:disabled > i {
+            color: var(--ref-color-green-20);
+        }
     }
 
     &.red {
-        > i { color: var(--ref-color-red-100); }
+        > i {
+            color: var(--ref-color-red-100);
+        }
 
         &:hover:not(.stroked):not(.locked):not(:disabled) {
             background: var(--ref-color-red-10);
@@ -83,7 +101,9 @@
             background: var(--ref-color-red-20);
         }
 
-        &:disabled > i { color: var(--ref-color-red-20); }
+        &:disabled > i {
+            color: var(--ref-color-red-20);
+        }
     }
 
     // Stroked variant
@@ -107,25 +127,43 @@
         &.blue:not(.loading):not(.locked) {
             border-color: var(--ref-color-electric-blue-100);
 
-            &:hover:not(:disabled) { border-color: var(--ref-color-electric-blue-60); }
-            &:active:not(:disabled) { border-color: var(--ref-color-electric-blue-100); }
-            &:disabled { border-color: var(--ref-color-electric-blue-20); }
+            &:hover:not(:disabled) {
+                border-color: var(--ref-color-electric-blue-60);
+            }
+            &:active:not(:disabled) {
+                border-color: var(--ref-color-electric-blue-100);
+            }
+            &:disabled {
+                border-color: var(--ref-color-electric-blue-20);
+            }
         }
 
         &.green:not(.loading):not(.locked) {
             border-color: var(--ref-color-green-100);
 
-            &:hover:not(:disabled) { border-color: var(--ref-color-green-60); }
-            &:active:not(:disabled) { border-color: var(--ref-color-green-100); }
-            &:disabled { border-color: var(--ref-color-green-20); }
+            &:hover:not(:disabled) {
+                border-color: var(--ref-color-green-60);
+            }
+            &:active:not(:disabled) {
+                border-color: var(--ref-color-green-100);
+            }
+            &:disabled {
+                border-color: var(--ref-color-green-20);
+            }
         }
 
         &.red:not(.loading):not(.locked) {
             border-color: var(--ref-color-red-100);
 
-            &:hover:not(:disabled) { border-color: var(--ref-color-red-60); }
-            &:active:not(:disabled) { border-color: var(--ref-color-red-100); }
-            &:disabled { border-color: var(--ref-color-red-20); }
+            &:hover:not(:disabled) {
+                border-color: var(--ref-color-red-60);
+            }
+            &:active:not(:disabled) {
+                border-color: var(--ref-color-red-100);
+            }
+            &:disabled {
+                border-color: var(--ref-color-red-20);
+            }
         }
     }
 

package/assets/style/css-ui/_infobox.scss

@@ -10,7 +10,8 @@
     line-height: var(--ref-font-line-height-sm);
     align-items: flex-start;
     color: var(--ref-color-grey-100);
-    padding: var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);
+    padding: var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom)
+        var(--comp-infobox-padding-left);
     border-radius: var(--comp-infobox-border-radius);
     overflow: hidden;
     font-family: var(--comp-infobox-text-title-font-family);
@@ -44,29 +45,45 @@
         }
     }
 
-    // Variants
+    // Variants — expected icons: ap-icon-info_fill, ap-icon-warning_fill, ap-icon-error_fill, ap-icon-rounded-check_fill
     &.info {
         background-color: var(--comp-infobox-info-background-color);
-        > i { color: var(--comp-infobox-info-icon-color); }
-        &::before { background-color: var(--comp-infobox-info-border-left-color); }
+        > i {
+            color: var(--comp-infobox-info-icon-color);
+        }
+        &::before {
+            background-color: var(--comp-infobox-info-border-left-color);
+        }
     }
 
     &.warning {
         background-color: var(--comp-infobox-warning-background-color);
-        > i { color: var(--comp-infobox-warning-icon-color); }
-        &::before { background-color: var(--comp-infobox-warning-border-left-color); }
+        > i {
+            color: var(--comp-infobox-warning-icon-color);
+        }
+        &::before {
+            background-color: var(--comp-infobox-warning-border-left-color);
+        }
     }
 
     &.error {
         background-color: var(--comp-infobox-error-background-color);
-        > i { color: var(--comp-infobox-error-icon-color); }
-        &::before { background-color: var(--comp-infobox-error-border-left-color); }
+        > i {
+            color: var(--comp-infobox-error-icon-color);
+        }
+        &::before {
+            background-color: var(--comp-infobox-error-border-left-color);
+        }
     }
 
     &.success {
         background-color: var(--comp-infobox-success-background-color);
-        > i { color: var(--comp-infobox-success-icon-color); }
-        &::before { background-color: var(--comp-infobox-success-border-left-color); }
+        > i {
+            color: var(--comp-infobox-success-icon-color);
+        }
+        &::before {
+            background-color: var(--comp-infobox-success-border-left-color);
+        }
     }
 }