@besaitech/ng-design-system 0.0.57 → 0.0.58

package/fesm2022/besaitech-ng-design-system.mjs

@@ -9324,6 +9324,14 @@ class SdsSelect {
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     filled = computed(() => this.appearance() === 'filled', ...(ngDevMode ? [{ debugName: "filled" }] : []));
     onBrand = computed(() => this.appearance() === 'on-brand', ...(ngDevMode ? [{ debugName: "onBrand" }] : []));
+    /** The trigger's value / placeholder colour: on the dark `on-brand` surface it stays white in light mode too. */
+    valueTextClass = computed(() => {
+        const selected = !!this.selectedOption();
+        if (this.onBrand()) {
+            return selected ? 'text-white' : 'text-white/60';
+        }
+        return selected ? 'text-ink' : 'text-ink-faint';
+    }, ...(ngDevMode ? [{ debugName: "valueTextClass" }] : []));
     normalizedOptions = computed(() => this.options().map((o) => this.norm(o)), ...(ngDevMode ? [{ debugName: "normalizedOptions" }] : []));
     filteredOptions = computed(() => {
         const f = this.filterText().trim().toLowerCase();
@@ -9689,7 +9697,10 @@ class SdsSelect {
         (keydown)="onTriggerKeydown($event)"
       >
         @if (optionTpl() && selectedOption()) {
-          <span class="flex flex-1 items-center gap-2 truncate pl-3.5 text-ink">
+          <span
+            class="flex flex-1 items-center gap-2 truncate pl-3.5"
+            [class]="onBrand() ? 'text-white' : 'text-ink'"
+          >
             <ng-container
               [ngTemplateOutlet]="optionTpl()!.template"
               [ngTemplateOutletContext]="triggerContext()!"
@@ -9698,7 +9709,7 @@ class SdsSelect {
         } @else {
           <span
             class="flex-1 truncate pl-3.5"
-            [class]="selectedOption() ? 'text-ink' : 'text-ink-faint'"
+            [class]="valueTextClass()"
           >
             {{ selectedOption() ? selectedOption()!.label : placeholder() }}
           </span>
@@ -9709,7 +9720,8 @@ class SdsSelect {
             type="button"
             tabindex="-1"
             [attr.aria-label]="clearLabel()"
-            class="mr-1 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-ink-faint hover:bg-black/5 hover:text-ink-soft"
+            class="mr-1 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full"
+            [class]="onBrand() ? 'text-white/60 hover:bg-white/10 hover:text-white' : 'text-ink-faint hover:bg-black/5 hover:text-ink-soft'"
             (click)="clear($event)"
           >
             <sds-icon name="x" [size]="15" />
@@ -9717,7 +9729,9 @@ class SdsSelect {
         }
 
         <span
-          class="mr-3 ml-1 inline-flex shrink-0 items-center justify-center text-ink-soft transition-transform duration-150"
+          class="mr-3 ml-1 inline-flex shrink-0 items-center justify-center transition-transform duration-150"
+          [class.text-ink-soft]="!onBrand()"
+          [class.text-white/70]="onBrand()"
           [class.rotate-180]="open()"
         >
           <sds-icon name="chevron-down" [size]="18" />
@@ -9845,7 +9859,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         (keydown)="onTriggerKeydown($event)"
       >
         @if (optionTpl() && selectedOption()) {
-          <span class="flex flex-1 items-center gap-2 truncate pl-3.5 text-ink">
+          <span
+            class="flex flex-1 items-center gap-2 truncate pl-3.5"
+            [class]="onBrand() ? 'text-white' : 'text-ink'"
+          >
             <ng-container
               [ngTemplateOutlet]="optionTpl()!.template"
               [ngTemplateOutletContext]="triggerContext()!"
@@ -9854,7 +9871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         } @else {
           <span
             class="flex-1 truncate pl-3.5"
-            [class]="selectedOption() ? 'text-ink' : 'text-ink-faint'"
+            [class]="valueTextClass()"
           >
             {{ selectedOption() ? selectedOption()!.label : placeholder() }}
           </span>
@@ -9865,7 +9882,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             type="button"
             tabindex="-1"
             [attr.aria-label]="clearLabel()"
-            class="mr-1 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-ink-faint hover:bg-black/5 hover:text-ink-soft"
+            class="mr-1 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full"
+            [class]="onBrand() ? 'text-white/60 hover:bg-white/10 hover:text-white' : 'text-ink-faint hover:bg-black/5 hover:text-ink-soft'"
             (click)="clear($event)"
           >
             <sds-icon name="x" [size]="15" />
@@ -9873,7 +9891,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }
 
         <span
-          class="mr-3 ml-1 inline-flex shrink-0 items-center justify-center text-ink-soft transition-transform duration-150"
+          class="mr-3 ml-1 inline-flex shrink-0 items-center justify-center transition-transform duration-150"
+          [class.text-ink-soft]="!onBrand()"
+          [class.text-white/70]="onBrand()"
           [class.rotate-180]="open()"
         >
           <sds-icon name="chevron-down" [size]="18" />