@simplysm/angular 14.1.20 → 14.2.1

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

@@ -1,195 +1,195 @@
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  contentChild,
-  contentChildren,
-  input,
-  model,
-  TemplateRef,
-  ViewEncapsulation,
-} from "@angular/core";
-import { NgTemplateOutlet } from "@angular/common";
-import { NgIcon } from "@ng-icons/core";
-import { SdCollapse } from "../collapse/sd-collapse";
-import { SdCollapseIcon } from "../collapse/sd-collapse-icon";
-import { SdList } from "./sd-list";
-import { SdRipple } from "../../core/ripple/sd-ripple";
-
-@Component({
-  selector: "sd-list-item",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple],
-  template: `
-    <div
-      class="_content"
-      [style]="contentStyle()"
-      [class]="contentClass()"
-      tabindex="0"
-      (click)="onContentClick()"
-      (keydown.enter)="onContentClick()"
-      [sdRipple]="!readonly() && !(layout() === 'flat' && hasChildren())"
-    >
-      @if (selectedIcon() != null && !hasChildren()) {
-        <ng-icon
-          [class.tx-theme-primary-default]="selected()"
-          [class.tx-trans-lightest]="!selected()"
-          [svg]="selectedIcon()!"
-        />
-      }
-      <div class="_label">
-        <ng-content />
-      </div>
-      @if (toolTpl()) {
-        <div class="_tool">
-          <ng-template [ngTemplateOutlet]="toolTpl()!" />
-        </div>
-      }
-      @if (layout() === "accordion" && hasChildren()) {
-        <sd-collapse-icon [open]="open()" />
-      }
-    </div>
-    @if (hasChildren()) {
-      <sd-collapse [open]="childrenOpen()">
-        <div class="_children">
-          @if (layout() === "accordion") {
-            <div class="_indent-guide"></div>
-          }
-          <ng-content select="sd-list" />
-        </div>
-      </sd-collapse>
-    }
-  `,
-  styles: [
-    /* language=SCSS */ `
-      sd-list-item {
-        display: block;
-
-        > ._content {
-          display: flex;
-          padding: var(--gap-sm) var(--gap-default);
-          cursor: pointer;
-          gap: var(--gap-xs);
-          border-radius: var(--border-radius-default);
-          transition: background var(--animation-duration) ease-in;
-
-          > ._label {
-            flex: 1 1 auto;
-            overflow: auto;
-          }
-
-          &:focus-visible {
-            outline: none;
-            transition: background var(--animation-duration) ease-out;
-            background: var(--trans-light);
-          }
-        }
-
-        &[data-sd-selected="true"] > ._content {
-          background: var(--trans-light);
-          font-weight: bold;
-        }
-
-        &[data-sd-has-selected-icon="true"][data-sd-selected="true"] > ._content {
-          color: var(--text-trans-default);
-
-          &:hover {
-            background: var(--trans-light);
-          }
-        }
-
-        &[data-sd-readonly="true"] {
-          > ._content {
-            cursor: default;
-          }
-        }
-
-        // 중첩 자식 영역: 세로 가이드선을 그리기 위한 기준 컨테이너.
-        // 깊이별 들여쓰기는 중첩 sd-list 의 padding 으로 누적되므로, 이 컨테이너
-        // 좌측은 항상 현재 항목 기준이라 가이드선 위치는 고정값이면 충분함.
-        > sd-collapse > ._content > ._children {
-          position: relative;
-
-          > ._indent-guide {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 1em;
-            width: 0;
-            border-left: 1px solid var(--trans-light);
-            pointer-events: none;
-          }
-        }
-
-        &[data-sd-layout="accordion"] {
-          &:not([data-sd-readonly="true"]) {
-            > ._content:hover {
-              transition: background var(--animation-duration) ease-out;
-              background: var(--trans-light);
-            }
-          }
-
-          // 깊이별 들여쓰기: accordion 항목의 자식 리스트를 한 칸씩 누적 들여씀.
-          // (flat 항목의 자식 리스트는 들여쓰지 않음)
-          > sd-collapse > ._content > ._children > sd-list > sd-list-item > ._content {
-            padding-left: 1.5em;
-          }
-        }
-
-        &[data-sd-layout="flat"][data-sd-has-children="true"] {
-          > ._content {
-            display: block;
-            background: transparent;
-            cursor: default;
-            font-size: var(--font-size-sm);
-            opacity: 0.7;
-            margin: 0;
-          }
-        }
-      }
-
-      .sd-theme-mobile > sd-list-item {
-        > ._content:hover {
-          background: transparent;
-        }
-      }
-    `,
-  ],
-  host: {
-    "[attr.data-sd-layout]": "layout()",
-    "[attr.data-sd-open]": "open()",
-    "[attr.data-sd-selected]": "selected()",
-    "[attr.data-sd-readonly]": "readonly()",
-    "[attr.data-sd-has-children]": "hasChildren()",
-    "[attr.data-sd-has-selected-icon]": "selectedIcon() != null",
-  },
-})
-export class SdListItem {
-  layout = input<"accordion" | "flat">("accordion");
-  open = model(false);
-  selected = input(false, { transform: booleanAttribute });
-  selectedIcon = input<string>();
-  readonly = input(false, { transform: booleanAttribute });
-  contentStyle = input<string>();
-  contentClass = input<string>();
-
-  toolTpl = contentChild<TemplateRef<void>>("toolTpl");
-
-  private readonly _childLists = contentChildren(SdList);
-
-  hasChildren = computed(() => this._childLists().length > 0);
-
-  childrenOpen = computed(() => {
-    return this.layout() === "flat" ? true : this.open();
-  });
-
-  onContentClick(): void {
-    if (this.readonly()) return;
-    if (this.layout() === "accordion" && this.hasChildren()) {
-      this.open.update((v) => !v);
-    }
-  }
-}
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  contentChildren,
+  input,
+  model,
+  TemplateRef,
+  ViewEncapsulation,
+} from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { NgIcon } from "@ng-icons/core";
+import { SdCollapse } from "../collapse/sd-collapse";
+import { SdCollapseIcon } from "../collapse/sd-collapse-icon";
+import { SdList } from "./sd-list";
+import { SdRipple } from "../../core/ripple/sd-ripple";
+
+@Component({
+  selector: "sd-list-item",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple],
+  template: `
+    <div
+      class="_content"
+      [style]="contentStyle()"
+      [class]="contentClass()"
+      tabindex="0"
+      (click)="onContentClick()"
+      (keydown.enter)="onContentClick()"
+      [sdRipple]="!readonly() && !(layout() === 'flat' && hasChildren())"
+    >
+      @if (selectedIcon() != null && !hasChildren()) {
+        <ng-icon
+          [class.tx-primary]="selected()"
+          [class.tx-faint]="!selected()"
+          [svg]="selectedIcon()!"
+        />
+      }
+      <div class="_label">
+        <ng-content />
+      </div>
+      @if (toolTpl()) {
+        <div class="_tool">
+          <ng-template [ngTemplateOutlet]="toolTpl()!" />
+        </div>
+      }
+      @if (layout() === "accordion" && hasChildren()) {
+        <sd-collapse-icon [open]="open()" />
+      }
+    </div>
+    @if (hasChildren()) {
+      <sd-collapse [open]="childrenOpen()">
+        <div class="_children">
+          @if (layout() === "accordion") {
+            <div class="_indent-guide"></div>
+          }
+          <ng-content select="sd-list" />
+        </div>
+      </sd-collapse>
+    }
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-list-item {
+        display: block;
+
+        > ._content {
+          display: flex;
+          padding: var(--sd-gap-sm) var(--sd-gap-default);
+          cursor: pointer;
+          gap: var(--sd-gap-xs);
+          border-radius: var(--sd-radius-default);
+          transition: background var(--sd-animation-duration) ease-in;
+
+          > ._label {
+            flex: 1 1 auto;
+            overflow: auto;
+          }
+
+          &:focus-visible {
+            outline: none;
+            transition: background var(--sd-animation-duration) ease-out;
+            background-color: var(--sd-bg-state-hover);
+          }
+        }
+
+        &[data-sd-selected="true"] > ._content {
+          background-color: var(--sd-bg-state-selected);
+          font-weight: bold;
+        }
+
+        &[data-sd-has-selected-icon="true"][data-sd-selected="true"] > ._content {
+          color: var(--sd-tx-default);
+
+          &:hover {
+            background-color: var(--sd-bg-state-hover);
+          }
+        }
+
+        &[data-sd-readonly="true"] {
+          > ._content {
+            cursor: default;
+          }
+        }
+
+        // 중첩 자식 영역: 세로 가이드선을 그리기 위한 기준 컨테이너.
+        // 깊이별 들여쓰기는 중첩 sd-list 의 padding 으로 누적되므로, 이 컨테이너
+        // 좌측은 항상 현재 항목 기준이라 가이드선 위치는 고정값이면 충분함.
+        > sd-collapse > ._content > ._children {
+          position: relative;
+
+          > ._indent-guide {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 1em;
+            width: 0;
+            border-left: 1px solid var(--sd-bd-soft);
+            pointer-events: none;
+          }
+        }
+
+        &[data-sd-layout="accordion"] {
+          &:not([data-sd-readonly="true"]) {
+            > ._content:hover {
+              transition: background var(--sd-animation-duration) ease-out;
+              background-color: var(--sd-bg-state-hover);
+            }
+          }
+
+          // 깊이별 들여쓰기: accordion 항목의 자식 리스트를 한 칸씩 누적 들여씀.
+          // (flat 항목의 자식 리스트는 들여쓰지 않음)
+          > sd-collapse > ._content > ._children > sd-list > sd-list-item > ._content {
+            padding-left: 1.5em;
+          }
+        }
+
+        &[data-sd-layout="flat"][data-sd-has-children="true"] {
+          > ._content {
+            display: block;
+            background-color: transparent;
+            cursor: default;
+            font-size: var(--sd-font-size-sm);
+            opacity: 0.7;
+            margin: 0;
+          }
+        }
+      }
+
+      .sd-theme-mobile > sd-list-item {
+        > ._content:hover {
+          background-color: transparent;
+        }
+      }
+    `,
+  ],
+  host: {
+    "[attr.data-sd-layout]": "layout()",
+    "[attr.data-sd-open]": "open()",
+    "[attr.data-sd-selected]": "selected()",
+    "[attr.data-sd-readonly]": "readonly()",
+    "[attr.data-sd-has-children]": "hasChildren()",
+    "[attr.data-sd-has-selected-icon]": "selectedIcon() != null",
+  },
+})
+export class SdListItem {
+  layout = input<"accordion" | "flat">("accordion");
+  open = model(false);
+  selected = input(false, { transform: booleanAttribute });
+  selectedIcon = input<string>();
+  readonly = input(false, { transform: booleanAttribute });
+  contentStyle = input<string>();
+  contentClass = input<string>();
+
+  toolTpl = contentChild<TemplateRef<void>>("toolTpl");
+
+  private readonly _childLists = contentChildren(SdList);
+
+  hasChildren = computed(() => this._childLists().length > 0);
+
+  childrenOpen = computed(() => {
+    return this.layout() === "flat" ? true : this.open();
+  });
+
+  onContentClick(): void {
+    if (this.readonly()) return;
+    if (this.layout() === "accordion" && this.hasChildren()) {
+      this.open.update((v) => !v);
+    }
+  }
+}

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

@@ -21,18 +21,18 @@ import {
         display: flex;
         flex-direction: column;
         user-select: none;
-        background: var(--control-color);
-        border: 1px solid var(--border-color-default);
-        border-radius: var(--border-radius-default);
-        padding: var(--gap-sm);
-        gap: var(--gap-xs);
+        background-color: var(--sd-bg-control);
+        border: 1px solid var(--sd-bd-strong);
+        border-radius: var(--sd-radius-default);
+        padding: var(--sd-gap-sm);
+        gap: var(--sd-gap-xs);
 
         &[data-sd-inset="true"] {
-          background: transparent;
+          background-color: transparent;
           border: none;
 
           sd-list {
-            background: transparent;
+            background-color: transparent;
           }
         }
 
@@ -41,7 +41,7 @@ import {
           border-color: transparent;
           border-radius: 0;
           padding: 0;
-          background: transparent;
+          background-color: transparent;
         }
       }
     `,

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

@@ -35,7 +35,9 @@ import {
         class="page-anchor"
         [style.text-decoration]="page === currentPage() + 1 ? 'underline' : ''"
         (click)="goToPage(page - 1)"
-      >{{ page }}</sd-anchor>
+      >
+        {{ page }}
+      </sd-anchor>
     }
 
     <sd-anchor class="nav-next-group" [disabled]="!hasNext()" (click)="goToNextGroup()">
@@ -50,7 +52,7 @@ import {
       sd-pagination {
         > sd-anchor {
           display: inline-block;
-          padding: var(--gap-xxs) var(--gap-xs);
+          padding: var(--sd-gap-xxs) var(--sd-gap-xs);
         }
       }
     `,

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

@@ -1,8 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-} from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from "@angular/core";
 import { setupRipple } from "../../core/ripple/setupRipple";
 
 @Component({
@@ -18,15 +14,15 @@ import { setupRipple } from "../../core/ripple/setupRipple";
     /* language=SCSS */ `
       sd-select-button {
         display: block;
-        background: var(--control-color);
+        background-color: var(--sd-bg-control);
         font-weight: bold;
         cursor: pointer;
-        color: var(--theme-primary-default);
-        transition: background var(--animation-duration) linear;
+        color: var(--sd-tx-primary);
+        transition: background var(--sd-animation-duration) linear;
 
         &:hover {
-          color: var(--theme-primary-darker);
-          background: var(--theme-gray-lightest);
+          color: var(--sd-tx-primary-hover);
+          background-color: var(--sd-bg-state-hover);
         }
       }
     `,

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

@@ -38,32 +38,33 @@ import { SdGap } from "../gap/sd-gap";
 
       sd-select-item {
         display: block;
-        padding: var(--gap-sm) var(--gap-default);
+        padding: var(--sd-gap-sm) var(--sd-gap-default);
         cursor: pointer;
-        font-family: var(--font-family-field);
-        transition: background var(--animation-duration) ease-in;
-        background: var(--control-color);
+        font-family: var(--sd-font-family-field);
+        transition: background var(--sd-animation-duration) ease-in;
+        background-color: var(--sd-bg-overlay);
 
         &:hover {
-          transition: background var(--animation-duration) ease-out;
-          background: rgba(0, 0, 0, 0.07);
+          transition: background var(--sd-animation-duration) ease-out;
+          background-color: var(--sd-bg-state-hover);
         }
 
         &:focus {
           outline: none;
-          transition: background var(--animation-duration) ease-out;
-          background: rgba(0, 0, 0, 0.07);
+          transition: background var(--sd-animation-duration) ease-out;
+          background-color: var(--sd-bg-state-hover);
         }
 
         &[data-sd-selected="true"] {
-          color: var(--theme-primary-default);
+          color: var(--sd-tx-primary);
           font-weight: bold;
-          background: rgba(0, 0, 0, 0.07);
+          background-color: var(--sd-bg-state-selected);
         }
 
+        // disabled 는 색 치환 단일 규약 (DEC-009 — opacity 방식 폐기)
         &[data-sd-disabled="true"] {
-          background: var(--theme-gray-default);
-          opacity: 0.3;
+          background-color: var(--sd-bg-disabled);
+          color: var(--sd-tx-disabled);
           cursor: default;
           pointer-events: none;
         }
@@ -85,9 +86,7 @@ import { SdGap } from "../gap/sd-gap";
   },
 })
 export class SdSelectItem<T> {
-  protected readonly _parentControl = inject<SdSelect<any, T>>(
-    forwardRef(() => SdSelect),
-  );
+  protected readonly _parentControl = inject<SdSelect<any, T>>(forwardRef(() => SdSelect));
   private readonly _elRef = inject(ElementRef<HTMLElement>);
   private readonly _destroyRef = inject(DestroyRef);