@simplysm/angular 14.2.1 → 14.2.3

package/src/controls/list/sd-list.ts

@@ -12,16 +12,14 @@ import {
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [],
-  template: `
-    <ng-content />
-  `,
+  template: ` <ng-content /> `,
   styles: [
     /* language=SCSS */ `
       sd-list {
         display: flex;
         flex-direction: column;
         user-select: none;
-        background-color: var(--sd-bg-control);
+        background-color: var(--sd-bg-content);
         border: 1px solid var(--sd-bd-strong);
         border-radius: var(--sd-radius-default);
         padding: var(--sd-gap-sm);
@@ -36,7 +34,7 @@ import {
           }
         }
 
-        // 아이템 내부에 중첩된 리스트는 카드 외형(테두리·라운드·배경)을 제거
+        // 아이템 내부에 중첩된 리스트는 카드 외형(테두리, 라운드, 배경)을 제거
         sd-list-item sd-list {
           border-color: transparent;
           border-radius: 0;

package/src/controls/select/sd-select-button.ts

@@ -7,14 +7,12 @@ import { setupRipple } from "../../core/ripple/setupRipple";
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [],
-  template: `
-    <ng-content />
-  `,
+  template: ` <ng-content /> `,
   styles: [
     /* language=SCSS */ `
       sd-select-button {
         display: block;
-        background-color: var(--sd-bg-control);
+        background-color: var(--sd-bg-content);
         font-weight: bold;
         cursor: pointer;
         color: var(--sd-tx-primary);

package/src/controls/select/sd-select.ts

@@ -231,7 +231,7 @@ export type SelectModeValue<T> = {
 
           // inset(시트 셀 등)의 disabled 는 일반 콘텐츠처럼 표시(현행 유지)
           &[data-sd-disabled="true"] > sd-dropdown {
-            background-color: var(--sd-bg-control);
+            background-color: var(--sd-bg-content);
 
             > ._sd-select-control {
               color: var(--sd-tx-default);

package/src/core/error-handler/sd-global-error-handler.plugin.ts

@@ -21,7 +21,7 @@ export class SdGlobalErrorHandlerPlugin implements ErrorHandler {
   private _hasDisplayedError = false;
 
   handleError(event: unknown) {
-    // SSR(프리렌더) 가드: 서버에는 화면 오버레이·브라우저 전역 이벤트 타입이 없음 — 로그만 남김
+    // SSR(프리렌더) 가드: 서버에는 화면 오버레이, 브라우저 전역 이벤트 타입이 없음 — 로그만 남김
     if (!this._isBrowser) {
       logger.error(event);
       return false;

package/src/core/modal/sd-modal.provider.ts

@@ -226,7 +226,7 @@ export class SdModalProvider {
         // transition duration 확인 후 대기 또는 즉시 destroy
         const duration = parseFloat(getComputedStyle(modalEl).transitionDuration || "0");
         if (duration > 0) {
-          // transitionend 가 정상 경로. 단 백그라운드 탭·transition 인터럽트 시 미발화하므로
+          // transitionend 가 정상 경로. 단 백그라운드 탭, transition 인터럽트 시 미발화하므로
           // duration(초→ms) + 여유 100ms 후 발화하는 setTimeout 폴백을 함께 걸어 destroy 누락을 방지.
           modalEl.addEventListener("transitionend", doDestroy, { once: true });
           setTimeout(doDestroy, duration * 1000 + 100);

package/src/core/provideSdAngular.ts

@@ -49,7 +49,7 @@ export function provideSdAngular(opt: { clientName: string }): EnvironmentProvid
       strokeWidth: 1.5,
     }),
     provideEnvironmentInitializer(() => {
-      // SSR(프리렌더) 가드: 테마 저장·복원은 브라우저 전용
+      // SSR(프리렌더) 가드: 테마 저장, 복원은 브라우저 전용
       if (!isPlatformBrowser(inject(PLATFORM_ID))) return;
 
       const sdTheme = inject(SdThemeProvider);
@@ -77,20 +77,6 @@ export function provideSdAngular(opt: { clientName: string }): EnvironmentProvid
         }
       });
 
-      const savedDensity = sdLocalStorage.get("sd-theme-density");
-      if (savedDensity === "compact" || savedDensity === "normal") {
-        sdTheme.density.set(savedDensity);
-      }
-
-      let prevDensity = sdTheme.density();
-      effect(() => {
-        const density = sdTheme.density();
-        if (density !== prevDensity) {
-          sdLocalStorage.set("sd-theme-density", density);
-          prevDensity = density;
-        }
-      });
-
       const savedFontSize = sdLocalStorage.get("sd-theme-font-size");
       if (savedFontSize != null) {
         sdTheme.fontSize.set(savedFontSize);

package/src/core/setupBgTheme.ts

@@ -2,8 +2,7 @@ import { effect, inject, PLATFORM_ID } from "@angular/core";
 import { isPlatformBrowser } from "@angular/common";
 
 export function setupBgTheme(options?: {
-  theme?:
-    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray";
+  theme?: "primary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray";
 }): void {
   // SSR(프리렌더) 가드: document 반영은 브라우저 전용
   if (!isPlatformBrowser(inject(PLATFORM_ID))) return;

package/src/core/toast/sd-toast.provider.ts

@@ -20,7 +20,7 @@ import { SdSystemLogProvider } from "../config/sd-system-log.provider";
 import "@simplysm/core-browser";
 
 export type SdToastSeverity = "info" | "success" | "warning" | "danger";
-export type SdToastTheme = "primary" | "secondary" | SdToastSeverity | "gray" | "blue-gray";
+export type SdToastTheme = "primary" | SdToastSeverity | "gray" | "blue-gray";
 
 export interface SdToastContentDef<O> {
   close: OutputEmitterRef<O | undefined>;
@@ -91,7 +91,9 @@ export class SdToastProvider {
     return this._show("danger", message, useProgress);
   }
 
-  notify<T extends SdToastContentDef<any>>(input: SdToastInput<T>): Promise<Parameters<T["close"]["emit"]>[0] | undefined> {
+  notify<T extends SdToastContentDef<any>>(
+    input: SdToastInput<T>,
+  ): Promise<Parameters<T["close"]["emit"]>[0] | undefined> {
     return new Promise((resolve) => {
       // overlap 모드: 기존 토스트 모두 제거
       if (this.overlap()) {
@@ -241,7 +243,7 @@ export class SdToastProvider {
     let dismissPending = false;
     let dismissed = false;
 
-    // 타이머·리스너 정리. 외부 파괴 경로(_dismissToast/_destroyToast)에서도 호출되어
+    // 타이머, 리스너 정리. 외부 파괴 경로(_dismissToast/_destroyToast)에서도 호출되어
     // 죽은 toastRef 에 대해 타이머가 깨어나는 race 와 리스너 누수를 막는다.
     const cleanup = () => {
       dismissed = true;

package/src/data/crud/sd-base-container.ts

@@ -55,7 +55,7 @@ import { NgTemplateOutlet } from "@angular/common";
     </sd-busy-container>
 
     <ng-template #content>
-      <div class="flex-column fill bg-control">
+      <div class="flex-column fill bg-content">
         @if (commandTplRef()) {
           <div class="p-sm-default flex-row gap-default bdb bdb-soft">
             <ng-template [ngTemplateOutlet]="commandTplRef()" />

package/src/data/sheet/injectSheetDomAccessor.ts

@@ -51,6 +51,12 @@ export function injectSheetDomAccessor() {
     return tbody.querySelector<HTMLTableRowElement>(`tr[data-r='${r}']`);
   }
 
+  function getRows(): HTMLTableRowElement[] {
+    const tbody = getTable().querySelector("tbody");
+    if (tbody == null) return [];
+    return Array.from(tbody.querySelectorAll<HTMLTableRowElement>("tr[data-r]"));
+  }
+
   function getCell(r: number, c: number): HTMLTableCellElement | null {
     const row = getRow(r);
     if (row == null) return null;
@@ -69,6 +75,7 @@ export function injectSheetDomAccessor() {
     getSelectRowIndicators,
     getColumnResizeIndicator,
     getRow,
+    getRows,
     getCell,
   };
 }

package/src/data/sheet/injectSheetDragSelection.ts

@@ -0,0 +1,226 @@
+import { DestroyRef, inject, type Signal } from "@angular/core";
+
+export function injectSheetDragSelection<TItem>(options: {
+  domAccessor: {
+    getRows(): HTMLTableRowElement[];
+    getContainer(): HTMLElement;
+    getTHead(): HTMLTableSectionElement;
+  };
+  displayItems: Signal<TItem[]>;
+  selection: {
+    isSelected(item: TItem): boolean;
+    getSelectable(item: TItem): true | string | undefined;
+    select(item: TItem): void;
+    deselect(item: TItem): void;
+  };
+}) {
+  const destroyRef = inject(DestroyRef);
+
+  let dragCleanup: (() => void) | null = null;
+
+  destroyRef.onDestroy(() => {
+    dragCleanup?.();
+  });
+
+  // 벗어난 1px 당 초당 스크롤 px, 그리고 초당 스크롤 상한
+  const AUTO_SCROLL_SPEED_PER_PX = 8;
+  const AUTO_SCROLL_MAX_SPEED = 2000;
+
+  // 고정 헤더에 가려지거나 컨테이너 밖에 있는 행은 소비자에게 안 보인다
+  function visibleBand(): { top: number; bottom: number } {
+    const containerRect = options.domAccessor.getContainer().getBoundingClientRect();
+    return {
+      top: containerRect.top + options.domAccessor.getTHead().offsetHeight,
+      bottom: containerRect.bottom,
+    };
+  }
+
+  function rowIndexOf(rowEl: HTMLTableRowElement): number {
+    const attr = rowEl.getAttribute("data-r");
+    const rowIdx = attr == null ? Number.NaN : parseInt(attr, 10);
+    if (Number.isNaN(rowIdx)) {
+      throw new Error(`시트 행 인덱스를 읽을 수 없습니다: data-r=${attr}`);
+    }
+    return rowIdx;
+  }
+
+  // 보이는 행 중 clientY 가 속한 행. 위아래로 벗어나면 가장 가까운 끝 행으로 맞춘다
+  function resolveRowIndex(clientY: number): number | null {
+    const band = visibleBand();
+    const visibleRows = options.domAccessor.getRows().filter((rowEl) => {
+      const rect = rowEl.getBoundingClientRect();
+      return rect.bottom > band.top && rect.top < band.bottom;
+    });
+    if (visibleRows.length === 0) return null;
+
+    const firstRect = visibleRows[0].getBoundingClientRect();
+    const lastRect = visibleRows[visibleRows.length - 1].getBoundingClientRect();
+    if (clientY < Math.max(firstRect.top, band.top)) return rowIndexOf(visibleRows[0]);
+    if (clientY >= Math.min(lastRect.bottom, band.bottom)) {
+      return rowIndexOf(visibleRows[visibleRows.length - 1]);
+    }
+
+    for (const rowEl of visibleRows) {
+      const rect = rowEl.getBoundingClientRect();
+      if (clientY < rect.top || clientY >= rect.bottom) continue;
+      return rowIndexOf(rowEl);
+    }
+    return null;
+  }
+
+  // 가장자리를 넘어선 거리. 위로 벗어나면 음수, 아래로 벗어나면 양수
+  function overshootOf(clientY: number): number {
+    const band = visibleBand();
+    if (clientY < band.top) return clientY - band.top;
+    if (clientY >= band.bottom) return clientY - band.bottom;
+    return 0;
+  }
+
+  function onSelectorPointerDown(event: PointerEvent, r: number): void {
+    if (event.button !== 0) return;
+    if (event.shiftKey) return;
+    if (event.pointerType === "touch") return;
+
+    dragCleanup?.();
+
+    const startItem = options.displayItems()[r];
+    if (startItem == null) return;
+
+    // 시작 행을 누른 결과 상태가 곧 페인트 목표. 체크박스 자체 토글보다 먼저 스냅샷해야 뒤집히지 않는다
+    const isSelectTarget = !options.selection.isSelected(startItem);
+    const startEl = event.currentTarget;
+    let dragged = false;
+
+    // 칠하기 전 상태. 드래그를 되돌려 범위를 벗어난 행은 이 값으로 복원한다
+    const stateBeforePaint = new Map<number, boolean>();
+
+    const setSelected = (rowIdx: number, selected: boolean): void => {
+      const item = options.displayItems()[rowIdx];
+      if (item == null) return;
+      if (options.selection.getSelectable(item) !== true) return;
+
+      if (selected) {
+        options.selection.select(item);
+      } else {
+        options.selection.deselect(item);
+      }
+    };
+
+    const paint = (rowIdx: number): void => {
+      const item = options.displayItems()[rowIdx];
+      if (item == null) return;
+      if (options.selection.getSelectable(item) !== true) return;
+
+      if (!stateBeforePaint.has(rowIdx)) {
+        stateBeforePaint.set(rowIdx, options.selection.isSelected(item));
+      }
+      setSelected(rowIdx, isSelectTarget);
+    };
+
+    // 시작 행부터 현재 행까지가 칠할 범위. 범위를 벗어난 행은 원래대로 되돌린다
+    const applyRange = (currentRow: number): void => {
+      const from = Math.min(r, currentRow);
+      const to = Math.max(r, currentRow);
+
+      for (const rowIdx of [...stateBeforePaint.keys()]) {
+        if (rowIdx >= from && rowIdx <= to) continue;
+        setSelected(rowIdx, stateBeforePaint.get(rowIdx)!);
+        stateBeforePaint.delete(rowIdx);
+      }
+
+      for (let i = from; i <= to; i++) {
+        paint(i);
+      }
+    };
+
+    const applyRangeAt = (clientY: number): void => {
+      const rowIdx = resolveRowIndex(clientY);
+      if (rowIdx == null) return;
+      if (rowIdx === r && !dragged) return;
+
+      dragged = true;
+      applyRange(rowIdx);
+    };
+
+    // 가장자리를 넘긴 동안 벗어난 거리에 비례해 스크롤하며 계속 칠한다
+    let pointerY = event.clientY;
+    let rafId: number | null = null;
+    let lastFrameTime: number | null = null;
+
+    const autoScrollFrame = (time: number): void => {
+      const overshoot = overshootOf(pointerY);
+      if (overshoot === 0) {
+        rafId = null;
+        lastFrameTime = null;
+        return;
+      }
+
+      const elapsedSec = lastFrameTime == null ? 0 : (time - lastFrameTime) / 1000;
+      lastFrameTime = time;
+
+      const speed =
+        Math.sign(overshoot) *
+        Math.min(Math.abs(overshoot) * AUTO_SCROLL_SPEED_PER_PX, AUTO_SCROLL_MAX_SPEED);
+      options.domAccessor.getContainer().scrollTop += speed * elapsedSec;
+      applyRangeAt(pointerY);
+
+      rafId = requestAnimationFrame(autoScrollFrame);
+    };
+
+    const onPointerMove = (e: PointerEvent): void => {
+      pointerY = e.clientY;
+      applyRangeAt(pointerY);
+
+      if (overshootOf(pointerY) !== 0 && rafId == null) {
+        rafId = requestAnimationFrame(autoScrollFrame);
+      }
+    };
+
+    const onPointerUp = (): void => {
+      dragCleanup?.();
+      if (!dragged) return;
+
+      // 시작 행은 이미 페인트로 확정됐으므로 SdCheckbox 자체 토글이 되돌리지 못하게 막는다.
+      // capture 로 걸어야 SdCheckbox 의 host (click) 보다 먼저 실행된다
+      if (!(startEl instanceof HTMLElement)) return;
+
+      const blockClick = (e: Event): void => {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      };
+      startEl.addEventListener("click", blockClick, { once: true, capture: true });
+
+      // 다른 행에서 뗀 드래그는 시작 체크박스에 click 이 오지 않는다.
+      // 남겨두면 이후의 정상 클릭 1회를 삼키므로 이번 턴이 지나면 걷어낸다
+      setTimeout(() => {
+        startEl.removeEventListener("click", blockClick, { capture: true });
+      });
+    };
+
+    // 드래그 중 브라우저 텍스트 선택 억제.
+    // pointerdown 을 preventDefault 하면 클릭 포커스까지 사라져 shift 범위 선택의 기준 행이 깨지므로,
+    // 선택 시작 자체만 막는다
+    const blockSelectStart = (e: Event): void => {
+      e.preventDefault();
+    };
+    document.addEventListener("selectstart", blockSelectStart);
+
+    document.addEventListener("pointermove", onPointerMove);
+    document.addEventListener("pointerup", onPointerUp);
+    // 브라우저발 강제 종료(창 전환, 시스템 제스처)도 뗀 것과 동일하게 확정 처리
+    document.addEventListener("pointercancel", onPointerUp);
+    dragCleanup = () => {
+      if (rafId != null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      document.removeEventListener("selectstart", blockSelectStart);
+      document.removeEventListener("pointermove", onPointerMove);
+      document.removeEventListener("pointerup", onPointerUp);
+      document.removeEventListener("pointercancel", onPointerUp);
+      dragCleanup = null;
+    };
+  }
+
+  return { onSelectorPointerDown };
+}

package/src/data/sheet/sd-sheet.ts

@@ -46,6 +46,7 @@ import { useSheetDisplayPipeline } from "./useSheetDisplayPipeline";
 import { useSheetCellStyling } from "./useSheetCellStyling";
 import { useSheetFocusIndicator } from "./useSheetFocusIndicator";
 import { injectSheetSelectRowIndicator } from "./injectSheetSelectRowIndicator";
+import { injectSheetDragSelection } from "./injectSheetDragSelection";
 import { SdModalProvider } from "../../core/modal/sd-modal.provider";
 import { SdSheetConfigModal } from "./sd-sheet-config.modal";
 import { SdEvents } from "../../core/events/sd-events";
@@ -68,7 +69,7 @@ import { SdEvents } from "../../core/events/sd-events";
     { directive: SdEvents, outputs: ["keydown.capture", "focus.capture", "blur.capture"] },
   ],
   host: {
-    "class": "flex-column fill",
+    class: "flex-column fill",
     "[attr.data-sd-inset]": "inset()",
     "[attr.data-sd-focus-mode]": "focusMode()",
     "(keydown.capture)": "onKeydownCapture($event)",
@@ -262,6 +263,7 @@ import { SdEvents } from "../../core/events/sd-events";
                     [canChangeFn]="selection.getCanChangeFn(item)"
                     (valueChange)="selection.toggle(item)"
                     (mousedown)="onSelectorMouseDown($event, rowIdx)"
+                    (pointerdown)="onSelectorPointerDown($event, rowIdx)"
                     [inline]="true"
                     [theme]="'white'"
                     [disabled]="_selectable !== true"
@@ -370,7 +372,7 @@ import { SdEvents } from "../../core/events/sd-events";
         border-radius: $border-radius;
 
         > ._tool {
-          background-color: var(--sd-bg-control);
+          background-color: var(--sd-bg-canvas);
           border-top-left-radius: $border-radius;
           border-top-right-radius: $border-radius;
           border-bottom: 1px solid $border-color-dark;
@@ -501,7 +503,7 @@ import { SdEvents } from "../../core/events/sd-events";
 
             > tbody > tr > td {
               font-family: var(--sd-font-family-field);
-              background-color: var(--sd-bg-control);
+              background-color: var(--sd-bg-content);
               vertical-align: top;
 
               &._fixed {
@@ -717,6 +719,13 @@ export class SdSheet<TItem> {
     trackByFn: this.trackByFn,
   });
 
+  // Drag(paint) selection
+  private readonly _dragSelection = injectSheetDragSelection<TItem>({
+    domAccessor: this.domAccessor,
+    displayItems: this.displayItems,
+    selection: this.selection,
+  });
+
   // Icons
   icons = {
     tablerSettings,
@@ -853,6 +862,10 @@ export class SdSheet<TItem> {
     });
   }
 
+  onSelectorPointerDown(event: PointerEvent, r: number): void {
+    this._dragSelection.onSelectorPointerDown(event, r);
+  }
+
   onSelectorMouseDown(event: MouseEvent, r: number): void {
     if (!event.shiftKey) return;
     event.preventDefault();

package/src/features/editor/sd-tiptap-editor.ts

@@ -276,7 +276,7 @@ const DEFAULT_EXTENSIONS: AnyExtension[] = [
               display: flex;
               align-items: center;
               justify-content: center;
-              background-color: var(--sd-bg-control);
+              background-color: var(--sd-bg-content);
               font-size: 0.625rem;
             }
           }

package/src/features/theme/sd-theme-provider.ts

@@ -12,9 +12,6 @@ export const SD_THEMES = [
 
 export type SdThemeName = (typeof SD_THEMES)[number]["value"];
 
-// 밀도 축 — 테마와 직교(DEC-007). compact 는 치수 토큰 그룹(sd-density-compact)만 덮는다.
-export type SdDensity = "normal" | "compact";
-
 @Injectable({ providedIn: "root" })
 export class SdThemeProvider {
   readonly themes: readonly { value: SdThemeName; label: string }[] = SD_THEMES;
@@ -22,8 +19,6 @@ export class SdThemeProvider {
   // 라이트(기본) / 블루프린트(도면) / IDE 다크
   theme = signal<SdThemeName>("light");
 
-  density = signal<SdDensity>("normal");
-
   readonly fontSizePresets: readonly number[] = [12, 14, 16, 20, 24, 28];
 
   fontSize = signal<number>(12);
@@ -39,10 +34,6 @@ export class SdThemeProvider {
       }
     });
 
-    effect(() => {
-      document.body.classList.toggle("sd-density-compact", this.density() === "compact");
-    });
-
     effect(() => {
       document.documentElement.style.fontSize = `${this.fontSize()}px`;
     });

package/src/features/theme/sd-theme-selector.ts

@@ -8,7 +8,6 @@ import {
 import { SdDropdown } from "../../controls/dropdown/sd-dropdown";
 import { SdDropdownPopup } from "../../controls/dropdown/sd-dropdown-popup";
 import { SdButton } from "../../controls/button/sd-button";
-import { SdSwitch } from "../../controls/checkbox/sd-switch";
 import { NgIcon } from "@ng-icons/core";
 import { SdThemeProvider } from "./sd-theme-provider";
 import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
@@ -18,7 +17,7 @@ import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon],
+  imports: [SdDropdown, SdDropdownPopup, SdButton, NgIcon],
   template: `
     <sd-dropdown>
       <sd-button [inline]="true" [theme]="'link-gray'">
@@ -65,14 +64,6 @@ import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
               }
             </div>
           </div>
-          <div class="flex-row gap-sm cross-align-center">
-            <span>compact</span>
-            <sd-switch
-              [inline]="true"
-              [value]="_sdTheme.density() === 'compact'"
-              (valueChange)="_sdTheme.density.set($event ? 'compact' : 'normal')"
-            />
-          </div>
         </div>
       </sd-dropdown-popup>
     </sd-dropdown>

package/src/features/visual/sd-label.ts

@@ -57,9 +57,7 @@ import {
   ],
 })
 export class SdLabel {
-  theme = input<
-    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
-  >();
+  theme = input<"primary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
   color = input<string>();
   clickable = input(false, { transform: booleanAttribute });
 }

package/src/features/visual/sd-note.ts

@@ -57,9 +57,7 @@ import {
   ],
 })
 export class SdNote {
-  theme = input<
-    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
-  >();
+  theme = input<"primary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
   size = input<"sm" | "lg">();
   inset = input(false, { transform: booleanAttribute });
 }

package/src/features/visual/sd-progress.ts

@@ -70,7 +70,7 @@ import { PercentPipe } from "@angular/common";
         &[data-sd-inset="true"] {
           border-radius: 0;
           border: none;
-          background-color: var(--sd-bg-control);
+          background-color: var(--sd-bg-track);
         }
       }
     `,
@@ -80,7 +80,7 @@ export class SdProgress {
   inset = input(false, { transform: booleanAttribute });
   size = input<"sm" | "lg">();
   theme = input.required<
-    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
+    "primary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
   >();
 
   value = input.required<number>();

package/src/layout/sidebar/sd-sidebar.ts

@@ -17,9 +17,7 @@ import { SdSidebarContainer } from "./sd-sidebar-container";
   host: {
     "[attr.data-sd-toggle]": "toggle()",
   },
-  template: `
-    <ng-content />
-  `,
+  template: ` <ng-content /> `,
   styles: [
     /* language=SCSS */ `
       @use "../../../scss/commons/mixins";
@@ -32,6 +30,7 @@ import { SdSidebarContainer } from "./sd-sidebar-container";
         left: 0;
         width: var(--sd-sidebar-width);
         height: 100%;
+        background-color: var(--sd-bg-canvas);
         border-right: 1px solid var(--sd-bd-soft);
 
         @media not all and (max-width: variables.$breakpoint-mobile) {

package/src/layout/topbar/sd-topbar.ts

@@ -42,6 +42,7 @@ import { tablerMenu2 } from "@ng-icons/tabler-icons";
         overflow-y: hidden;
         user-select: none;
 
+        background-color: var(--sd-bg-canvas);
         color: var(--sd-tx-default);
         border-bottom: 1px solid var(--sd-bd-soft);
         padding-left: var(--sd-gap-xs);