@simplysm/angular 14.2.2 → 14.2.3

package/src/controls/checkbox/sd-switch.ts

@@ -56,7 +56,7 @@ import { setupModelHook } from "../../core/setupModelHook";
             height: calc(var(--sd-line-height) - var(--sd-gap-xs));
             border-radius: 100%;
 
-            background-color: var(--sd-bg-control);
+            background-color: var(--sd-bg-knob);
 
             transition: transform var(--sd-animation-duration);
           }
@@ -123,9 +123,7 @@ export class SdSwitch {
   inset = input(false, { transform: booleanAttribute });
 
   size = input<"sm" | "lg">();
-  theme = input<
-    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
-  >();
+  theme = input<"primary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
 
   constructor() {
     setupModelHook(this.value, this.canChangeFn);

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

@@ -42,7 +42,8 @@ export class SdDropdown {
   });
 
   private _popupEl?: HTMLElement;
-  private _mouseoverEl?: HTMLElement;
+  /** `<svg>` 등 비-HTML 요소도 hover 대상이 되므로 `Element` 로 받는다. */
+  private _mouseoverEl?: Element;
   private _backdropEl?: HTMLElement;
   private readonly _isMobile;
   private readonly _mql: MediaQueryList;
@@ -88,7 +89,8 @@ export class SdDropdown {
           this._onDocumentScrollCapture(event);
         };
         const onMouseover = (event: Event) => {
-          this._mouseoverEl = (event as MouseEvent).target as HTMLElement;
+          const target = (event as MouseEvent).target;
+          this._mouseoverEl = target instanceof Element ? target : undefined;
         };
         const onBlur = (event: Event) => {
           this._onDocumentBlurCapture(event as FocusEvent);
@@ -245,18 +247,27 @@ export class SdDropdown {
       }
     }
 
+    // 팝업 내부 요소가 disabled 로 전환되며 포커스를 잃은 경우.
+    // 브라우저가 렌더 도중 동기 blur 를 발사하는 경로이며, 사용자가 팝업을 벗어난 것이 아니다.
+    // 여기서 팝업을 닫으면 렌더 중 signal 쓰기가 되어 NG0600 이 발생한다.
+    const blurredEl = event.target;
+    if (
+      relatedTarget == null &&
+      blurredEl instanceof HTMLElement &&
+      (contentEl.contains(blurredEl) === true || popupEl.contains(blurredEl) === true) &&
+      blurredEl.matches(":disabled")
+    ) {
+      this._restoreFocus();
+      return;
+    }
+
     const mouseoverEl = this._mouseoverEl;
     if (
       relatedTarget == null &&
-      mouseoverEl instanceof HTMLElement &&
+      mouseoverEl instanceof Element &&
       (contentEl.contains(mouseoverEl) === true || popupEl.contains(mouseoverEl) === true)
     ) {
-      const tabbable = popupEl.findFirstTabbableChild();
-      if (tabbable != null) {
-        tabbable.focus();
-      } else {
-        contentEl.focus();
-      }
+      this._restoreFocus();
       return;
     }
 
@@ -265,6 +276,19 @@ export class SdDropdown {
     }
   }
 
+  /** 팝업이 열린 상태를 유지해야 할 때 포커스를 팝업 안으로 되돌린다. */
+  private _restoreFocus(): void {
+    const popupEl = this._popupEl;
+    if (popupEl == null) return;
+
+    const tabbable = popupEl.findFirstTabbableChild();
+    if (tabbable != null) {
+      tabbable.focus();
+    } else {
+      this._elRef.nativeElement.focus();
+    }
+  }
+
   private _removePopup(): void {
     if (this._backdropEl != null) {
       this._backdropEl.remove();

package/src/controls/input/sd-textarea.ts

@@ -160,7 +160,7 @@ import { setupInvalid } from "../../core/validation/setupInvalid";
           // inset(시트 셀 등)의 disabled 는 일반 콘텐츠처럼 표시(현행 유지)
           &[data-sd-inset="true"] {
             > ._contents {
-              background-color: var(--sd-bg-control);
+              background-color: var(--sd-bg-content);
               color: var(--sd-tx-default);
             }
           }
@@ -190,9 +190,7 @@ export class SdTextarea {
   inset = input(false, { transform: booleanAttribute });
   size = input<"sm" | "lg">();
   validatorFn = input<(value: string | undefined) => string | undefined>();
-  theme = input<
-    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
-  >();
+  theme = input<"primary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
   inputStyle = input<string>();
   inputClass = input<string>();
 

package/src/controls/input/sd-textfield-type-handlers.ts

@@ -160,7 +160,7 @@ function createNumberHandler(): TextfieldTypeHandler {
     },
     isIncomplete(raw) {
       const inputValue = raw.replace(/[^0-9-.]/g, "");
-      // 부호·소수점 형식은 갖췄으나 아직 완성되지 않은 진행 상태 ("-", "12.", ".", "-.")
+      // 부호, 소수점 형식은 갖췄으나 아직 완성되지 않은 진행 상태 ("-", "12.", ".", "-.")
       // Number("12.")===12 이므로 endsWith(".") 를 별도 판정 (parse 의 실패 조건과 정합)
       return (
         /^-?\d*\.?\d*$/.test(inputValue)

package/src/controls/input/sd-textfield.ts

@@ -273,7 +273,7 @@ import { textfieldTypeHandlers, type SdTextfieldTypes } from "./sd-textfield-typ
           // inset(시트 셀 등)의 disabled 는 일반 콘텐츠처럼 표시(현행 유지)
           &[data-sd-inset="true"] {
             > ._contents {
-              background-color: var(--sd-bg-control);
+              background-color: var(--sd-bg-content);
               color: var(--sd-tx-default);
             }
           }
@@ -326,13 +326,11 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
   inline = input(false, { transform: booleanAttribute });
   inset = input(false, { transform: booleanAttribute });
   size = input<"sm" | "lg">();
-  theme = input<
-    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
-  >();
+  theme = input<"primary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
 
   private readonly _inputElRef = viewChild<ElementRef<HTMLInputElement>>("inputEl");
 
-  // 실제 input 의 브라우저 native 제약 위반(이메일 형식·날짜 미완성 등) 메시지. onInput/onBlur 에서 갱신.
+  // 실제 input 의 브라우저 native 제약 위반(이메일 형식, 날짜 미완성 등) 메시지. onInput/onBlur 에서 갱신.
   private readonly _nativeInvalidMessage = signal("");
 
   // IME 조합(한글 등) 중 여부. 조합 중에는 미완성 자모가 model 로 흐르지 않도록 갱신을 보류.
@@ -375,11 +373,11 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
         if (this._composing) return;
 
         // 편집(포커스) 중이라도 변경 origin 을 구분한다.
-        // 사용자 입력이 만든 DOM(정규화 차이·진행 중 입력 포함)은 보호하고,
-        // 모델만 외부에서 바뀐 경우(프로그래밍적 리셋·prefill·표시옵션 변경)는 되써서 반영한다.
+        // 사용자 입력이 만든 DOM(정규화 차이, 진행 중 입력 포함)은 보호하고,
+        // 모델만 외부에서 바뀐 경우(프로그래밍적 리셋, prefill, 표시옵션 변경)는 되써서 반영한다.
         if (document.activeElement === inputEl) {
           const domParsed = this._handler().parse(inputEl.value, { format: this.format() });
-          // DOM raw 가 현재 모델의 유효한 표현이면(사용자 입력 유래) 되쓰지 않아 캐럿·IME 보호
+          // DOM raw 가 현재 모델의 유효한 표현이면(사용자 입력 유래) 되쓰지 않아 캐럿, IME 보호
           const domReflectsModel =
             domParsed != null &&
             this._handler().toControlValue(domParsed, {
@@ -399,9 +397,8 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
     }
 
     setupInvalid(() => {
-      // 비활성·읽기전용 필드는 사용자가 편집할 수 없으므로 검증에서 제외 (네이티브 disabled 동작과 동일)
-      if (this.disabled() || this.readonly()) return "";
-
+      // 검증은 편집 가능 여부와 무관하다. disabled, readonly 여도 값이 제약을 어기면 invalid 다.
+      // 값이 무의미한 맥락이면 소비자가 제약(required 등)을 함께 내려야 한다.
       const value = this.value();
       const handlerErrors = this._handler().validate(value, {
         required: this.required(),
@@ -422,7 +419,7 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
         }
       }
 
-      // 브라우저 native 제약 위반(이메일 형식·날짜 미완성 등)을 우리 검증(빨간점)에 합류
+      // 브라우저 native 제약 위반(이메일 형식, 날짜 미완성 등)을 우리 검증(빨간점)에 합류
       const nativeMessage = this._nativeInvalidMessage();
       if (nativeMessage !== "") {
         errorMessages.push(nativeMessage);

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();