@agorapulse/ui-theme 20.1.19 → 20.1.21

package/assets/style/css-ui/{select.css → _select.scss}

@@ -1,31 +1,45 @@
-/* Agorapulse Select Styles */
+// Agorapulse Select Styles
+@use 'mixins' as m;
 
-/* ============================================
-   SELECT CONTAINER (using details/summary)
-   ============================================ */
+// ============================================
+//   SELECT CONTAINER (using details/summary)
+// ============================================
 
 .ap-select {
     position: relative;
     display: inline-block;
     width: 100%;
-}
 
-/* Remove default details marker */
-.ap-select summary {
-    list-style: none;
-}
+    // Remove default details marker
+    summary {
+        list-style: none;
 
-.ap-select summary::-webkit-details-marker {
-    display: none;
-}
+        &::-webkit-details-marker {
+            display: none;
+        }
+
+        &::marker {
+            display: none;
+        }
+    }
 
-.ap-select summary::marker {
-    display: none;
+    // Arrow rotation when open
+    &[open] {
+        .ap-select-trigger {
+            outline: none;
+            border-color: var(--ref-color-electric-blue-100);
+        }
+
+        .ap-select-arrow {
+            transform: rotate(180deg);
+            color: var(--ref-color-electric-blue-100);
+        }
+    }
 }
 
-/* ============================================
-   SELECT TRIGGER / INPUT
-   ============================================ */
+// ============================================
+//   SELECT TRIGGER / INPUT
+// ============================================
 
 .ap-select-trigger {
     display: flex;
@@ -37,50 +51,88 @@
     border: 1px solid var(--ref-color-grey-20);
     border-radius: var(--ref-border-radius-sm);
     background-color: var(--ref-color-white);
-    font-family: var(--sys-text-style-body-font-family);
-    font-size: var(--sys-text-style-body-size);
-    font-weight: var(--sys-text-style-body-weight);
-    line-height: var(--sys-text-style-body-line-height);
+    @include m.text-style('body');
     color: var(--ref-color-grey-100);
     cursor: pointer;
     box-sizing: border-box;
     transition: border-color 0.15s ease;
-}
-
-.ap-select-trigger:hover:not(.disabled) {
-    border-color: var(--ref-color-grey-40);
-}
-
-.ap-select-trigger:focus {
-    outline: none;
-    border-color: var(--ref-color-electric-blue-100);
-}
-
-/* Open state using details[open] */
-.ap-select[open] .ap-select-trigger,
-.ap-select-trigger.open {
-    outline: none;
-    border-color: var(--ref-color-electric-blue-100);
-}
 
-.ap-select-trigger.disabled {
-    background-color: var(--ref-color-grey-20);
-    border-color: var(--ref-color-grey-20);
-    color: var(--ref-color-grey-60);
-    cursor: default;
-    pointer-events: none;
-}
-
-/* Validation states */
-.ap-select-trigger.valid {
-    border-color: var(--comp-input-border-success-color);
-}
-
-.ap-select-trigger.invalid {
-    border-color: var(--comp-input-border-error-color);
-}
-
-/* Inline label within trigger */
+    &:hover:not(.disabled) {
+        border-color: var(--ref-color-grey-40);
+    }
+
+    &:focus {
+        outline: none;
+        border-color: var(--ref-color-electric-blue-100);
+    }
+
+    &.open {
+        outline: none;
+        border-color: var(--ref-color-electric-blue-100);
+
+        .ap-select-arrow {
+            transform: rotate(180deg);
+            color: var(--ref-color-electric-blue-100);
+        }
+    }
+
+    &.disabled {
+        background-color: var(--ref-color-grey-20);
+        border-color: var(--ref-color-grey-20);
+        color: var(--ref-color-grey-60);
+        cursor: default;
+        pointer-events: none;
+    }
+
+    // Validation states
+    &.valid {
+        border-color: var(--comp-input-border-success-color);
+    }
+
+    &.invalid {
+        border-color: var(--comp-input-border-error-color);
+    }
+
+    // Context-specific overrides for labels within select trigger
+    .ap-label {
+        height: 20px;
+        padding: 0 var(--ref-spacing-xxs);
+        font-size: var(--ref-font-size-sm);
+        line-height: var(--ref-font-line-height-sm);
+
+        &:has(> button) {
+            padding: 0 2px 0 var(--ref-spacing-xxs);
+        }
+
+        > button {
+            width: 16px;
+            height: 16px;
+            min-width: 16px;
+        }
+    }
+
+    // Context-specific overrides for tags within select trigger
+    .ap-tag {
+        height: 20px;
+        padding: 0 var(--ref-spacing-xxs);
+        font-size: var(--ref-font-size-sm);
+        line-height: var(--ref-font-line-height-sm);
+
+        &:has(> button) {
+            padding: 0 2px 0 var(--ref-spacing-xxs);
+        }
+
+        > button {
+            width: 16px;
+            height: 16px;
+            min-width: 16px;
+            max-width: 16px;
+            max-height: 16px;
+        }
+    }
+}
+
+// Inline label within trigger
 .ap-select-inline-label {
     padding-right: var(--ref-spacing-xxs);
     border-right: 1px solid var(--comp-select-inline-separator-color);
@@ -92,7 +144,7 @@
     white-space: nowrap;
 }
 
-/* Inline icon */
+// Inline icon
 .ap-select-inline-icon {
     height: var(--comp-input-icon-size);
     width: var(--comp-input-icon-size);
@@ -102,19 +154,17 @@
     flex-shrink: 0;
 }
 
-/* Selected value display */
+// Selected value display
 .ap-select-value {
     flex: 1;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    @include m.truncate;
 }
 
 .ap-select-placeholder {
     color: var(--ref-color-grey-60);
 }
 
-/* Avatar in trigger (for selected value with avatar) */
+// Avatar in trigger
 .ap-select-avatar {
     width: 20px;
     height: 20px;
@@ -124,26 +174,18 @@
     flex-shrink: 0;
 }
 
-/* Arrow icon */
+// Arrow icon
 .ap-select-arrow {
     width: 16px;
     height: 16px;
     min-width: 16px;
     flex-shrink: 0;
+    margin-left: auto;
     color: var(--ref-color-grey-60);
-    transition:
-        transform 0.15s ease,
-        color 0.15s ease;
-}
-
-/* Arrow rotation when open */
-.ap-select[open] .ap-select-arrow,
-.ap-select-trigger.open .ap-select-arrow {
-    transform: rotate(180deg);
-    color: var(--ref-color-electric-blue-100);
+    transition: transform 0.15s ease, color 0.15s ease;
 }
 
-/* Clear button */
+// Clear button
 .ap-select-clear {
     display: flex;
     align-items: center;
@@ -156,15 +198,15 @@
     cursor: pointer;
     padding: 0;
     flex-shrink: 0;
-}
 
-.ap-select-clear:hover {
-    color: var(--ref-color-grey-80);
+    &:hover {
+        color: var(--ref-color-grey-80);
+    }
 }
 
-/* ============================================
-   DROPDOWN PANEL
-   ============================================ */
+// ============================================
+//   DROPDOWN PANEL
+// ============================================
 
 .ap-select-dropdown {
     position: absolute;
@@ -180,15 +222,15 @@
     overflow: hidden;
 }
 
-/* Dropdown scrollable area */
+// Dropdown scrollable area
 .ap-select-options {
     max-height: 280px;
     overflow-y: auto;
 }
 
-/* ============================================
-   SEARCH BAR
-   ============================================ */
+// ============================================
+//   SEARCH BAR
+// ============================================
 
 .ap-select-search {
     display: flex;
@@ -208,10 +250,10 @@
     font-size: var(--sys-text-style-body-size);
     color: var(--ref-color-grey-100);
     padding: var(--ref-spacing-xxs) 0;
-}
 
-.ap-select-search-input::placeholder {
-    color: var(--ref-color-grey-60);
+    &::placeholder {
+        color: var(--ref-color-grey-60);
+    }
 }
 
 .ap-select-search-icon {
@@ -221,9 +263,9 @@
     flex-shrink: 0;
 }
 
-/* ============================================
-   SELECT ALL CHECKBOX
-   ============================================ */
+// ============================================
+//   SELECT ALL CHECKBOX
+// ============================================
 
 .ap-select-all {
     display: flex;
@@ -233,9 +275,9 @@
     height: var(--comp-select-one-line-height);
 }
 
-/* ============================================
-   OPTION - ONE LINE
-   ============================================ */
+// ============================================
+//   OPTION - ONE LINE
+// ============================================
 
 .ap-select-option {
     display: flex;
@@ -252,52 +294,83 @@
     cursor: pointer;
     box-sizing: border-box;
     transition: background-color 0.1s ease;
-}
-
-.ap-select-option:hover:not(.disabled) {
-    background-color: var(--ref-color-electric-blue-10);
-}
-
-.ap-select-option:active:not(.disabled) {
-    background-color: var(--ref-color-electric-blue-20);
-}
-
-/* Selected state (single select) */
-.ap-select-option.selected {
-    background-color: var(--ref-color-electric-blue-10);
-    color: var(--ref-color-electric-blue-150);
-    font-family: var(--comp-select-one-line-selected-text-font-family);
-    font-size: var(--comp-select-one-line-selected-text-size);
-    font-weight: var(--comp-select-one-line-selected-text-font-weight);
-    line-height: var(--comp-select-one-line-selected-text-line-height);
-}
-
-.ap-select-option.selected .ap-select-option-icon {
-    color: var(--ref-color-electric-blue-150);
-}
 
-/* Marked/focused state (keyboard navigation) */
-.ap-select-option.marked:not(.selected) {
-    background-color: var(--ref-color-electric-blue-10);
-}
-
-/* Disabled state */
-.ap-select-option.disabled {
-    color: var(--ref-color-grey-40);
-    cursor: default;
-    position: relative;
-}
-
-.ap-select-option.disabled::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-color: var(--ref-color-white);
-    opacity: 0.6;
-    pointer-events: none;
-}
-
-/* Option icon (avatar placeholder or symbol) */
+    &:hover:not(.disabled) {
+        background-color: var(--ref-color-electric-blue-10);
+    }
+
+    &:active:not(.disabled) {
+        background-color: var(--ref-color-electric-blue-20);
+    }
+
+    // Selected state (single select)
+    &.selected {
+        background-color: var(--ref-color-electric-blue-10);
+        color: var(--ref-color-electric-blue-150);
+        font-family: var(--comp-select-one-line-selected-text-font-family);
+        font-size: var(--comp-select-one-line-selected-text-size);
+        font-weight: var(--comp-select-one-line-selected-text-font-weight);
+        line-height: var(--comp-select-one-line-selected-text-line-height);
+
+        .ap-select-option-icon {
+            color: var(--ref-color-electric-blue-150);
+        }
+    }
+
+    // Marked/focused state (keyboard navigation)
+    &.marked:not(.selected) {
+        background-color: var(--ref-color-electric-blue-10);
+    }
+
+    // Disabled state
+    &.disabled {
+        color: var(--ref-color-grey-40);
+        cursor: default;
+        position: relative;
+
+        &::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background-color: var(--ref-color-white);
+            opacity: 0.6;
+            pointer-events: none;
+        }
+    }
+
+    // Two lines variant
+    &.two-lines {
+        flex-direction: row;
+        align-items: flex-start;
+        min-height: var(--comp-select-two-line-height);
+        padding: var(--comp-select-two-line-padding-vertical) var(--comp-select-one-line-padding-horizontal);
+
+        &.selected {
+            .ap-select-option-title {
+                color: var(--ref-color-electric-blue-150);
+            }
+
+            .ap-select-option-caption {
+                color: var(--ref-color-electric-blue-100);
+            }
+        }
+    }
+
+    // Feature locked option
+    &.feature-locked {
+        cursor: pointer;
+
+        &:hover {
+            background-color: var(--ref-color-purple-10);
+        }
+
+        &:active {
+            background-color: var(--ref-color-purple-20);
+        }
+    }
+}
+
+// Option icon
 .ap-select-option-icon {
     width: 16px;
     height: 16px;
@@ -306,7 +379,7 @@
     color: var(--comp-select-one-line-text-color);
 }
 
-/* Option avatar */
+// Option avatar
 .ap-select-option-avatar {
     width: 24px;
     height: 24px;
@@ -314,21 +387,19 @@
     border-radius: 100%;
     object-fit: cover;
     flex-shrink: 0;
-}
 
-.ap-select-option-avatar.square {
-    border-radius: var(--ref-border-radius-xs);
+    &.square {
+        border-radius: var(--ref-border-radius-xs);
+    }
 }
 
-/* Option text */
+// Option text
 .ap-select-option-text {
     flex: 1;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    @include m.truncate;
 }
 
-/* Option badge */
+// Option badge
 .ap-select-option-badge {
     padding: 2px 6px;
     border-radius: var(--ref-border-radius-xs);
@@ -339,7 +410,7 @@
     flex-shrink: 0;
 }
 
-/* Checkbox for multiple select */
+// Checkbox for multiple select
 .ap-select-option-checkbox {
     width: 16px;
     height: 16px;
@@ -347,7 +418,7 @@
     flex-shrink: 0;
 }
 
-/* Selected checkmark icon */
+// Selected checkmark icon
 .ap-select-option-check {
     width: 16px;
     height: 16px;
@@ -357,16 +428,9 @@
     margin-left: auto;
 }
 
-/* ============================================
-   OPTION - TWO LINES
-   ============================================ */
-
-.ap-select-option.two-lines {
-    flex-direction: row;
-    align-items: flex-start;
-    min-height: var(--comp-select-two-line-height);
-    padding: var(--comp-select-two-line-padding-vertical) var(--comp-select-one-line-padding-horizontal);
-}
+// ============================================
+//   OPTION CONTENT (TWO LINES)
+// ============================================
 
 .ap-select-option-content {
     display: flex;
@@ -382,9 +446,7 @@
     font-weight: var(--comp-select-two-line-title-text-font-weight);
     line-height: var(--comp-select-two-line-title-text-line-height);
     color: var(--comp-select-two-line-title-text-color);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    @include m.truncate;
 }
 
 .ap-select-option-caption {
@@ -393,23 +455,12 @@
     font-weight: var(--comp-select-two-line-caption-text-font-weight);
     line-height: var(--comp-select-two-line-caption-text-line-height);
     color: var(--comp-select-two-line-caption-text-color);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    @include m.truncate;
 }
 
-/* Two-line selected state */
-.ap-select-option.two-lines.selected .ap-select-option-title {
-    color: var(--ref-color-electric-blue-150);
-}
-
-.ap-select-option.two-lines.selected .ap-select-option-caption {
-    color: var(--ref-color-electric-blue-100);
-}
-
-/* ============================================
-   OPTION GROUP
-   ============================================ */
+// ============================================
+//   OPTION GROUP
+// ============================================
 
 .ap-select-group {
     display: flex;
@@ -420,10 +471,10 @@
     border-top: 1px solid var(--comp-select-group-border-top-color);
     min-height: 32px;
     box-sizing: border-box;
-}
 
-.ap-select-group:first-child {
-    border-top: none;
+    &:first-child {
+        border-top: none;
+    }
 }
 
 .ap-select-group-label {
@@ -434,9 +485,9 @@
     color: var(--comp-select-group-text-color);
 }
 
-/* ============================================
-   DIVIDER
-   ============================================ */
+// ============================================
+//   DIVIDER
+// ============================================
 
 .ap-select-divider {
     width: 100%;
@@ -445,9 +496,9 @@
     margin: var(--ref-spacing-xxs) 0;
 }
 
-/* ============================================
-   NOT FOUND / EMPTY STATE
-   ============================================ */
+// ============================================
+//   NOT FOUND / EMPTY STATE
+// ============================================
 
 .ap-select-not-found {
     display: flex;
@@ -459,9 +510,9 @@
     font-size: var(--sys-text-style-body-size);
 }
 
-/* ============================================
-   LOADING STATE
-   ============================================ */
+// ============================================
+//   LOADING STATE
+// ============================================
 
 .ap-select-loading {
     display: flex;
@@ -481,9 +532,9 @@
     color: var(--ref-color-grey-80);
 }
 
-/* ============================================
-   FOOTER / CREATE NEW
-   ============================================ */
+// ============================================
+//   FOOTER / CREATE NEW
+// ============================================
 
 .ap-select-footer {
     padding: 0;
@@ -507,14 +558,14 @@
     line-height: var(--ref-font-line-height-sm);
     cursor: pointer;
     text-align: left;
-}
 
-.ap-select-create:hover {
-    color: var(--ref-color-electric-blue-100);
-}
+    &:hover {
+        color: var(--ref-color-electric-blue-100);
+    }
 
-.ap-select-create:active {
-    color: var(--ref-color-electric-blue-150);
+    &:active {
+        color: var(--ref-color-electric-blue-150);
+    }
 }
 
 .ap-select-create-icon {
@@ -523,21 +574,9 @@
     flex-shrink: 0;
 }
 
-/* ============================================
-   FEATURE LOCKED OPTION
-   ============================================ */
-
-.ap-select-option.feature-locked {
-    cursor: pointer;
-}
-
-.ap-select-option.feature-locked:hover {
-    background-color: var(--ref-color-purple-10);
-}
-
-.ap-select-option.feature-locked:active {
-    background-color: var(--ref-color-purple-20);
-}
+// ============================================
+//   FEATURE LOCKED ICON
+// ============================================
 
 .ap-select-locked-icon {
     width: 16px;
@@ -546,9 +585,9 @@
     flex-shrink: 0;
 }
 
-/* ============================================
-   MULTIPLE SELECT - SELECTED LABELS/TAGS
-   ============================================ */
+// ============================================
+//   MULTIPLE SELECT - SELECTED LABELS/TAGS
+// ============================================
 
 .ap-select-labels {
     display: flex;
@@ -558,59 +597,15 @@
     overflow: hidden;
 }
 
-/* Context-specific overrides for labels within select trigger */
-.ap-select-trigger .ap-label {
-    height: 20px;
-    padding: 0 var(--ref-spacing-xxs);
-}
-
-.ap-select-trigger .ap-label.removable {
-    padding: 0 2px 0 var(--ref-spacing-xxs);
-}
-
-.ap-select-trigger .ap-label-content {
-    font-size: var(--ref-font-size-sm);
-    line-height: var(--ref-font-line-height-sm);
-}
-
-.ap-select-trigger .ap-label-close {
-    width: 16px;
-    height: 16px;
-    min-width: 16px;
-}
-
-/* Context-specific overrides for tags within select trigger */
-.ap-select-trigger .ap-tag {
-    height: 20px;
-    padding: 0 var(--ref-spacing-xxs);
-}
-
-.ap-select-trigger .ap-tag.clearable {
-    padding: 0 2px 0 var(--ref-spacing-xxs);
-}
-
-.ap-select-trigger .ap-tag-text {
-    font-size: var(--ref-font-size-sm);
-    line-height: var(--ref-font-line-height-sm);
-}
-
-.ap-select-trigger .ap-tag-button {
-    width: 16px;
-    height: 16px;
-    min-width: 16px;
-    max-width: 16px;
-    max-height: 16px;
-}
-
 .ap-select-label-count {
     font-size: var(--ref-font-size-sm);
     color: var(--ref-color-grey-80);
     white-space: nowrap;
 }
 
-/* ============================================
-   NATIVE SELECT (FALLBACK)
-   ============================================ */
+// ============================================
+//   NATIVE SELECT (FALLBACK)
+// ============================================
 
 .ap-native-select {
     width: 100%;
@@ -619,46 +614,43 @@
     border: 1px solid var(--ref-color-grey-20);
     border-radius: var(--ref-border-radius-sm);
     background-color: var(--ref-color-white);
-    font-family: var(--sys-text-style-body-font-family);
-    font-size: var(--sys-text-style-body-size);
-    font-weight: var(--sys-text-style-body-weight);
-    line-height: var(--sys-text-style-body-line-height);
+    @include m.text-style('body');
     color: var(--ref-color-grey-100);
     cursor: pointer;
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%235D6A82' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right var(--ref-spacing-xs) center;
-}
 
-.ap-native-select:hover:not(:disabled) {
-    border-color: var(--ref-color-grey-40);
-}
-
-.ap-native-select:focus {
-    outline: none;
-    border-color: var(--ref-color-electric-blue-100);
-}
-
-.ap-native-select:disabled {
-    background-color: var(--ref-color-grey-20);
-    border-color: var(--ref-color-grey-20);
-    color: var(--ref-color-grey-60);
-    cursor: default;
-}
-
-.ap-native-select.valid {
-    border-color: var(--comp-input-border-success-color);
-}
-
-.ap-native-select.invalid {
-    border-color: var(--comp-input-border-error-color);
-}
-
-.ap-native-select option {
-    padding: var(--ref-spacing-xxs);
-}
-
-.ap-native-select optgroup {
-    font-weight: var(--comp-select-group-text-font-weight);
+    &:hover:not(:disabled) {
+        border-color: var(--ref-color-grey-40);
+    }
+
+    &:focus {
+        outline: none;
+        border-color: var(--ref-color-electric-blue-100);
+    }
+
+    &:disabled {
+        background-color: var(--ref-color-grey-20);
+        border-color: var(--ref-color-grey-20);
+        color: var(--ref-color-grey-60);
+        cursor: default;
+    }
+
+    &.valid {
+        border-color: var(--comp-input-border-success-color);
+    }
+
+    &.invalid {
+        border-color: var(--comp-input-border-error-color);
+    }
+
+    option {
+        padding: var(--ref-spacing-xxs);
+    }
+
+    optgroup {
+        font-weight: var(--comp-select-group-text-font-weight);
+    }
 }