@simplysm/angular 14.2.2 → 14.2.3

package/dist/features/visual/sd-note.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-note.d.ts","sourceRoot":"","sources":["../../../src/features/visual/sd-note.ts"],"names":[],"mappings":";AAQA,qBAkDa,MAAM;IACjB,KAAK,8IAED;IACJ,IAAI,+DAAwB;IAC5B,KAAK,qEAAiD;yCAL3C,MAAM;2CAAN,MAAM;CAMlB"}
+{"version":3,"file":"sd-note.d.ts","sourceRoot":"","sources":["../../../src/features/visual/sd-note.ts"],"names":[],"mappings":";AAQA,qBAkDa,MAAM;IACjB,KAAK,gIAAyF;IAC9F,IAAI,+DAAwB;IAC5B,KAAK,qEAAiD;yCAH3C,MAAM;2CAAN,MAAM;CAIlB"}

package/dist/features/visual/sd-note.js

@@ -13,7 +13,7 @@ export class SdNote {
         } }, inputs: { theme: [1, "theme"], size: [1, "size"], inset: [1, "inset"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdNote_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["sd-note {\n  display: block;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  background-color: var(--sd-bg-gray-subtle);\n  border: none;\n  border-radius: var(--sd-radius-default);\n}\nsd-note[data-sd-theme=gray] {\n  background-color: var(--sd-bg-gray-subtle);\n  border: 1px solid var(--sd-bg-gray-subtle);\n}\nsd-note[data-sd-theme=blue-gray] {\n  background-color: var(--sd-bg-blue-gray-subtle);\n  border: 1px solid var(--sd-bg-blue-gray-subtle);\n}\nsd-note[data-sd-theme=primary] {\n  background-color: var(--sd-bg-primary-subtle);\n  border: 1px solid var(--sd-bg-primary-subtle);\n}\nsd-note[data-sd-theme=secondary] {\n  background-color: var(--sd-bg-secondary-subtle);\n  border: 1px solid var(--sd-bg-secondary-subtle);\n}\nsd-note[data-sd-theme=info] {\n  background-color: var(--sd-bg-info-subtle);\n  border: 1px solid var(--sd-bg-info-subtle);\n}\nsd-note[data-sd-theme=success] {\n  background-color: var(--sd-bg-success-subtle);\n  border: 1px solid var(--sd-bg-success-subtle);\n}\nsd-note[data-sd-theme=warning] {\n  background-color: var(--sd-bg-warning-subtle);\n  border: 1px solid var(--sd-bg-warning-subtle);\n}\nsd-note[data-sd-theme=danger] {\n  background-color: var(--sd-bg-danger-subtle);\n  border: 1px solid var(--sd-bg-danger-subtle);\n}\nsd-note[data-sd-size=sm] {\n  font-size: var(--sd-font-size-sm);\n  padding: var(--sd-gap-xs) var(--sd-gap-sm);\n}\nsd-note[data-sd-size=lg] {\n  padding: var(--sd-gap-default) var(--sd-gap-lg);\n}\nsd-note[data-sd-inset=true] {\n  border-radius: 0;\n}"], encapsulation: 2 });
+        } }, styles: ["sd-note {\n  display: block;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  background-color: var(--sd-bg-gray-subtle);\n  border: none;\n  border-radius: var(--sd-radius-default);\n}\nsd-note[data-sd-theme=gray] {\n  background-color: var(--sd-bg-gray-subtle);\n  border: 1px solid var(--sd-bg-gray-subtle);\n}\nsd-note[data-sd-theme=blue-gray] {\n  background-color: var(--sd-bg-blue-gray-subtle);\n  border: 1px solid var(--sd-bg-blue-gray-subtle);\n}\nsd-note[data-sd-theme=primary] {\n  background-color: var(--sd-bg-primary-subtle);\n  border: 1px solid var(--sd-bg-primary-subtle);\n}\nsd-note[data-sd-theme=info] {\n  background-color: var(--sd-bg-info-subtle);\n  border: 1px solid var(--sd-bg-info-subtle);\n}\nsd-note[data-sd-theme=success] {\n  background-color: var(--sd-bg-success-subtle);\n  border: 1px solid var(--sd-bg-success-subtle);\n}\nsd-note[data-sd-theme=warning] {\n  background-color: var(--sd-bg-warning-subtle);\n  border: 1px solid var(--sd-bg-warning-subtle);\n}\nsd-note[data-sd-theme=danger] {\n  background-color: var(--sd-bg-danger-subtle);\n  border: 1px solid var(--sd-bg-danger-subtle);\n}\nsd-note[data-sd-size=sm] {\n  font-size: var(--sd-font-size-sm);\n  padding: var(--sd-gap-xs) var(--sd-gap-sm);\n}\nsd-note[data-sd-size=lg] {\n  padding: var(--sd-gap-default) var(--sd-gap-lg);\n}\nsd-note[data-sd-inset=true] {\n  border-radius: 0;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdNote, [{
         type: Component,
@@ -23,6 +23,6 @@ export class SdNote {
                     "[attr.data-sd-inset]": "inset()",
                 }, template: `
     <ng-content></ng-content>
-  `, styles: ["sd-note {\n  display: block;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  background-color: var(--sd-bg-gray-subtle);\n  border: none;\n  border-radius: var(--sd-radius-default);\n}\nsd-note[data-sd-theme=gray] {\n  background-color: var(--sd-bg-gray-subtle);\n  border: 1px solid var(--sd-bg-gray-subtle);\n}\nsd-note[data-sd-theme=blue-gray] {\n  background-color: var(--sd-bg-blue-gray-subtle);\n  border: 1px solid var(--sd-bg-blue-gray-subtle);\n}\nsd-note[data-sd-theme=primary] {\n  background-color: var(--sd-bg-primary-subtle);\n  border: 1px solid var(--sd-bg-primary-subtle);\n}\nsd-note[data-sd-theme=secondary] {\n  background-color: var(--sd-bg-secondary-subtle);\n  border: 1px solid var(--sd-bg-secondary-subtle);\n}\nsd-note[data-sd-theme=info] {\n  background-color: var(--sd-bg-info-subtle);\n  border: 1px solid var(--sd-bg-info-subtle);\n}\nsd-note[data-sd-theme=success] {\n  background-color: var(--sd-bg-success-subtle);\n  border: 1px solid var(--sd-bg-success-subtle);\n}\nsd-note[data-sd-theme=warning] {\n  background-color: var(--sd-bg-warning-subtle);\n  border: 1px solid var(--sd-bg-warning-subtle);\n}\nsd-note[data-sd-theme=danger] {\n  background-color: var(--sd-bg-danger-subtle);\n  border: 1px solid var(--sd-bg-danger-subtle);\n}\nsd-note[data-sd-size=sm] {\n  font-size: var(--sd-font-size-sm);\n  padding: var(--sd-gap-xs) var(--sd-gap-sm);\n}\nsd-note[data-sd-size=lg] {\n  padding: var(--sd-gap-default) var(--sd-gap-lg);\n}\nsd-note[data-sd-inset=true] {\n  border-radius: 0;\n}"] }]
+  `, styles: ["sd-note {\n  display: block;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  background-color: var(--sd-bg-gray-subtle);\n  border: none;\n  border-radius: var(--sd-radius-default);\n}\nsd-note[data-sd-theme=gray] {\n  background-color: var(--sd-bg-gray-subtle);\n  border: 1px solid var(--sd-bg-gray-subtle);\n}\nsd-note[data-sd-theme=blue-gray] {\n  background-color: var(--sd-bg-blue-gray-subtle);\n  border: 1px solid var(--sd-bg-blue-gray-subtle);\n}\nsd-note[data-sd-theme=primary] {\n  background-color: var(--sd-bg-primary-subtle);\n  border: 1px solid var(--sd-bg-primary-subtle);\n}\nsd-note[data-sd-theme=info] {\n  background-color: var(--sd-bg-info-subtle);\n  border: 1px solid var(--sd-bg-info-subtle);\n}\nsd-note[data-sd-theme=success] {\n  background-color: var(--sd-bg-success-subtle);\n  border: 1px solid var(--sd-bg-success-subtle);\n}\nsd-note[data-sd-theme=warning] {\n  background-color: var(--sd-bg-warning-subtle);\n  border: 1px solid var(--sd-bg-warning-subtle);\n}\nsd-note[data-sd-theme=danger] {\n  background-color: var(--sd-bg-danger-subtle);\n  border: 1px solid var(--sd-bg-danger-subtle);\n}\nsd-note[data-sd-size=sm] {\n  font-size: var(--sd-font-size-sm);\n  padding: var(--sd-gap-xs) var(--sd-gap-sm);\n}\nsd-note[data-sd-size=lg] {\n  padding: var(--sd-gap-default) var(--sd-gap-lg);\n}\nsd-note[data-sd-inset=true] {\n  border-radius: 0;\n}"] }]
     }], null, { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdNote, { className: "SdNote", filePath: "packages/angular/src/features/visual/sd-note.ts", lineNumber: 59 }); })();

package/dist/features/visual/sd-progress.d.ts

@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
 export declare class SdProgress {
     inset: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     size: import("@angular/core").InputSignal<"sm" | "lg" | undefined>;
-    theme: import("@angular/core").InputSignal<"info" | "success" | "primary" | "secondary" | "warning" | "danger" | "gray" | "blue-gray">;
+    theme: import("@angular/core").InputSignal<"info" | "success" | "primary" | "warning" | "danger" | "gray" | "blue-gray">;
     value: import("@angular/core").InputSignal<number>;
     _barWidth: import("@angular/core").Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdProgress, never>;

package/dist/features/visual/sd-progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-progress.d.ts","sourceRoot":"","sources":["../../../src/features/visual/sd-progress.ts"],"names":[],"mappings":";AAUA,qBAoEa,UAAU;IACrB,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,KAAK,kIAED;IAEJ,KAAK,8CAA4B;IAEjC,SAAS,yCAAwE;yCATtE,UAAU;2CAAV,UAAU;CAUtB"}
+{"version":3,"file":"sd-progress.d.ts","sourceRoot":"","sources":["../../../src/features/visual/sd-progress.ts"],"names":[],"mappings":";AAUA,qBAoEa,UAAU;IACrB,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,KAAK,oHAED;IAEJ,KAAK,8CAA4B;IAEjC,SAAS,yCAAwE;yCATtE,UAAU;2CAAV,UAAU;CAUtB"}

package/dist/features/visual/sd-progress.js

@@ -25,7 +25,7 @@ export class SdProgress {
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 3, ctx.value(), "1.0-2"), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵstyleProp("width", ctx._barWidth());
-        } }, dependencies: [PercentPipe], styles: ["sd-progress {\n  position: relative;\n  display: block;\n  width: 100%;\n  white-space: nowrap;\n  background-color: var(--sd-bg-gray-subtle);\n  border: 1px solid var(--sd-bd-hairline);\n  border-radius: var(--sd-radius-default);\n  overflow: hidden;\n}\nsd-progress > ._content {\n  position: relative;\n  z-index: 2;\n  padding: var(--sd-gap-lg) var(--sd-gap-default);\n}\nsd-progress > ._progress {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  height: 100%;\n}\nsd-progress[data-sd-theme=gray] > ._progress {\n  background-color: var(--sd-bg-gray-solid);\n}\nsd-progress[data-sd-theme=blue-gray] > ._progress {\n  background-color: var(--sd-bg-blue-gray-solid);\n}\nsd-progress[data-sd-theme=primary] > ._progress {\n  background-color: var(--sd-bg-primary-solid);\n}\nsd-progress[data-sd-theme=secondary] > ._progress {\n  background-color: var(--sd-bg-secondary-solid);\n}\nsd-progress[data-sd-theme=info] > ._progress {\n  background-color: var(--sd-bg-info-solid);\n}\nsd-progress[data-sd-theme=success] > ._progress {\n  background-color: var(--sd-bg-success-solid);\n}\nsd-progress[data-sd-theme=warning] > ._progress {\n  background-color: var(--sd-bg-warning-solid);\n}\nsd-progress[data-sd-theme=danger] > ._progress {\n  background-color: var(--sd-bg-danger-solid);\n}\nsd-progress[data-sd-size=sm] > ._content {\n  padding: var(--sd-gap-xs) var(--sd-gap-default);\n}\nsd-progress[data-sd-size=lg] > ._content {\n  padding: var(--sd-gap-default) var(--sd-gap-xl);\n}\nsd-progress[data-sd-inset=true] {\n  border-radius: 0;\n  border: none;\n  background-color: var(--sd-bg-control);\n}"], encapsulation: 2 });
+        } }, dependencies: [PercentPipe], styles: ["sd-progress {\n  position: relative;\n  display: block;\n  width: 100%;\n  white-space: nowrap;\n  background-color: var(--sd-bg-gray-subtle);\n  border: 1px solid var(--sd-bd-hairline);\n  border-radius: var(--sd-radius-default);\n  overflow: hidden;\n}\nsd-progress > ._content {\n  position: relative;\n  z-index: 2;\n  padding: var(--sd-gap-lg) var(--sd-gap-default);\n}\nsd-progress > ._progress {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  height: 100%;\n}\nsd-progress[data-sd-theme=gray] > ._progress {\n  background-color: var(--sd-bg-gray-solid);\n}\nsd-progress[data-sd-theme=blue-gray] > ._progress {\n  background-color: var(--sd-bg-blue-gray-solid);\n}\nsd-progress[data-sd-theme=primary] > ._progress {\n  background-color: var(--sd-bg-primary-solid);\n}\nsd-progress[data-sd-theme=info] > ._progress {\n  background-color: var(--sd-bg-info-solid);\n}\nsd-progress[data-sd-theme=success] > ._progress {\n  background-color: var(--sd-bg-success-solid);\n}\nsd-progress[data-sd-theme=warning] > ._progress {\n  background-color: var(--sd-bg-warning-solid);\n}\nsd-progress[data-sd-theme=danger] > ._progress {\n  background-color: var(--sd-bg-danger-solid);\n}\nsd-progress[data-sd-size=sm] > ._content {\n  padding: var(--sd-gap-xs) var(--sd-gap-default);\n}\nsd-progress[data-sd-size=lg] > ._content {\n  padding: var(--sd-gap-default) var(--sd-gap-xl);\n}\nsd-progress[data-sd-inset=true] {\n  border-radius: 0;\n  border: none;\n  background-color: var(--sd-bg-track);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdProgress, [{
         type: Component,
@@ -38,6 +38,6 @@ export class SdProgress {
       {{ value() | percent: "1.0-2" }}
     </div>
     <div class="_progress" [style.width]="_barWidth()"></div>
-  `, styles: ["sd-progress {\n  position: relative;\n  display: block;\n  width: 100%;\n  white-space: nowrap;\n  background-color: var(--sd-bg-gray-subtle);\n  border: 1px solid var(--sd-bd-hairline);\n  border-radius: var(--sd-radius-default);\n  overflow: hidden;\n}\nsd-progress > ._content {\n  position: relative;\n  z-index: 2;\n  padding: var(--sd-gap-lg) var(--sd-gap-default);\n}\nsd-progress > ._progress {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  height: 100%;\n}\nsd-progress[data-sd-theme=gray] > ._progress {\n  background-color: var(--sd-bg-gray-solid);\n}\nsd-progress[data-sd-theme=blue-gray] > ._progress {\n  background-color: var(--sd-bg-blue-gray-solid);\n}\nsd-progress[data-sd-theme=primary] > ._progress {\n  background-color: var(--sd-bg-primary-solid);\n}\nsd-progress[data-sd-theme=secondary] > ._progress {\n  background-color: var(--sd-bg-secondary-solid);\n}\nsd-progress[data-sd-theme=info] > ._progress {\n  background-color: var(--sd-bg-info-solid);\n}\nsd-progress[data-sd-theme=success] > ._progress {\n  background-color: var(--sd-bg-success-solid);\n}\nsd-progress[data-sd-theme=warning] > ._progress {\n  background-color: var(--sd-bg-warning-solid);\n}\nsd-progress[data-sd-theme=danger] > ._progress {\n  background-color: var(--sd-bg-danger-solid);\n}\nsd-progress[data-sd-size=sm] > ._content {\n  padding: var(--sd-gap-xs) var(--sd-gap-default);\n}\nsd-progress[data-sd-size=lg] > ._content {\n  padding: var(--sd-gap-default) var(--sd-gap-xl);\n}\nsd-progress[data-sd-inset=true] {\n  border-radius: 0;\n  border: none;\n  background-color: var(--sd-bg-control);\n}"] }]
+  `, styles: ["sd-progress {\n  position: relative;\n  display: block;\n  width: 100%;\n  white-space: nowrap;\n  background-color: var(--sd-bg-gray-subtle);\n  border: 1px solid var(--sd-bd-hairline);\n  border-radius: var(--sd-radius-default);\n  overflow: hidden;\n}\nsd-progress > ._content {\n  position: relative;\n  z-index: 2;\n  padding: var(--sd-gap-lg) var(--sd-gap-default);\n}\nsd-progress > ._progress {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  height: 100%;\n}\nsd-progress[data-sd-theme=gray] > ._progress {\n  background-color: var(--sd-bg-gray-solid);\n}\nsd-progress[data-sd-theme=blue-gray] > ._progress {\n  background-color: var(--sd-bg-blue-gray-solid);\n}\nsd-progress[data-sd-theme=primary] > ._progress {\n  background-color: var(--sd-bg-primary-solid);\n}\nsd-progress[data-sd-theme=info] > ._progress {\n  background-color: var(--sd-bg-info-solid);\n}\nsd-progress[data-sd-theme=success] > ._progress {\n  background-color: var(--sd-bg-success-solid);\n}\nsd-progress[data-sd-theme=warning] > ._progress {\n  background-color: var(--sd-bg-warning-solid);\n}\nsd-progress[data-sd-theme=danger] > ._progress {\n  background-color: var(--sd-bg-danger-solid);\n}\nsd-progress[data-sd-size=sm] > ._content {\n  padding: var(--sd-gap-xs) var(--sd-gap-default);\n}\nsd-progress[data-sd-size=lg] > ._content {\n  padding: var(--sd-gap-default) var(--sd-gap-xl);\n}\nsd-progress[data-sd-inset=true] {\n  border-radius: 0;\n  border: none;\n  background-color: var(--sd-bg-track);\n}"] }]
     }], null, { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdProgress, { className: "SdProgress", filePath: "packages/angular/src/features/visual/sd-progress.ts", lineNumber: 79 }); })();

package/dist/layout/sidebar/sd-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-sidebar.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sd-sidebar.ts"],"names":[],"mappings":";AAUA,qBAiDa,SAAS;IACpB,OAAO,CAAC,QAAQ,CAAC,cAAc,CAE7B;IAEF,MAAM,0CAAgD;yCAL3C,SAAS;2CAAT,SAAS;CAMrB"}
+{"version":3,"file":"sd-sidebar.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sd-sidebar.ts"],"names":[],"mappings":";AAUA,qBAgDa,SAAS;IACpB,OAAO,CAAC,QAAQ,CAAC,cAAc,CAE7B;IAEF,MAAM,0CAAgD;yCAL3C,SAAS;2CAAT,SAAS;CAMrB"}

package/dist/layout/sidebar/sd-sidebar.js

@@ -12,14 +12,12 @@ export class SdSidebar {
         } }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdSidebar_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["sd-sidebar {\n  position: absolute;\n  z-index: var(--sd-z-sidebar);\n  top: 0;\n  left: 0;\n  width: var(--sd-sidebar-width);\n  height: 100%;\n  border-right: 1px solid var(--sd-bd-soft);\n}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--sd-animation-duration) ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform var(--sd-animation-duration) ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--sd-animation-duration) ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform var(--sd-animation-duration) ease-out;\n    box-shadow: 0 calc(16 * var(--sd-shadow-size)) calc(16 * 4 * var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color), 0 var(--sd-shadow-size) calc(var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color);\n  }\n}"], encapsulation: 2 });
+        } }, styles: ["sd-sidebar {\n  position: absolute;\n  z-index: var(--sd-z-sidebar);\n  top: 0;\n  left: 0;\n  width: var(--sd-sidebar-width);\n  height: 100%;\n  background-color: var(--sd-bg-canvas);\n  border-right: 1px solid var(--sd-bd-soft);\n}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--sd-animation-duration) ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform var(--sd-animation-duration) ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--sd-animation-duration) ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform var(--sd-animation-duration) ease-out;\n    box-shadow: 0 calc(16 * var(--sd-shadow-size)) calc(16 * 4 * var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color), 0 var(--sd-shadow-size) calc(var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color);\n  }\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebar, [{
         type: Component,
         args: [{ selector: "sd-sidebar", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], host: {
                     "[attr.data-sd-toggle]": "toggle()",
-                }, template: `
-    <ng-content />
-  `, styles: ["sd-sidebar {\n  position: absolute;\n  z-index: var(--sd-z-sidebar);\n  top: 0;\n  left: 0;\n  width: var(--sd-sidebar-width);\n  height: 100%;\n  border-right: 1px solid var(--sd-bd-soft);\n}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--sd-animation-duration) ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform var(--sd-animation-duration) ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--sd-animation-duration) ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform var(--sd-animation-duration) ease-out;\n    box-shadow: 0 calc(16 * var(--sd-shadow-size)) calc(16 * 4 * var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color), 0 var(--sd-shadow-size) calc(var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color);\n  }\n}"] }]
+                }, template: ` <ng-content /> `, styles: ["sd-sidebar {\n  position: absolute;\n  z-index: var(--sd-z-sidebar);\n  top: 0;\n  left: 0;\n  width: var(--sd-sidebar-width);\n  height: 100%;\n  background-color: var(--sd-bg-canvas);\n  border-right: 1px solid var(--sd-bd-soft);\n}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--sd-animation-duration) ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform var(--sd-animation-duration) ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--sd-animation-duration) ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform var(--sd-animation-duration) ease-out;\n    box-shadow: 0 calc(16 * var(--sd-shadow-size)) calc(16 * 4 * var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color), 0 var(--sd-shadow-size) calc(var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color);\n  }\n}"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebar, { className: "SdSidebar", filePath: "packages/angular/src/layout/sidebar/sd-sidebar.ts", lineNumber: 60 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebar, { className: "SdSidebar", filePath: "packages/angular/src/layout/sidebar/sd-sidebar.ts", lineNumber: 59 }); })();

package/dist/layout/topbar/sd-topbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-topbar.d.ts","sourceRoot":"","sources":["../../../src/layout/topbar/sd-topbar.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;;AAKrE,qBA8Da,QAAQ;IACnB,OAAO,CAAC,QAAQ,CAAC,yBAAyB,CAEvC;IAEH,gBAAgB,sEAA+B;IAE/C,UAAU,0CAER;IAEF,mBAAmB,IAAI,IAAI;IAO3B,SAAS,CAAC,QAAQ,CAAC,WAAW,oXAAe;yCAlBlC,QAAQ;2CAAR,QAAQ;CAmBpB"}
+{"version":3,"file":"sd-topbar.d.ts","sourceRoot":"","sources":["../../../src/layout/topbar/sd-topbar.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;;AAKrE,qBA+Da,QAAQ;IACnB,OAAO,CAAC,QAAQ,CAAC,yBAAyB,CAEvC;IAEH,gBAAgB,sEAA+B;IAE/C,UAAU,0CAER;IAEF,mBAAmB,IAAI,IAAI;IAO3B,SAAS,CAAC,QAAQ,CAAC,WAAW,oXAAe;yCAlBlC,QAAQ;2CAAR,QAAQ;CAmBpB"}

package/dist/layout/topbar/sd-topbar.js

@@ -39,7 +39,7 @@ export class SdTopbar {
             i0.ɵɵprojection(1);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.hasSidebar() ? 0 : -1);
-        } }, dependencies: [SdButton, NgIcon], styles: ["sd-topbar {\n  min-height: var(--sd-topbar-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  user-select: none;\n  color: var(--sd-tx-default);\n  border-bottom: 1px solid var(--sd-bd-soft);\n  padding-left: var(--sd-gap-xs);\n}\nsd-topbar > h1 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h2 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h3 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h4 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h5 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h6 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar::-webkit-scrollbar-track {\n  background-color: var(--sd-scrollbar-track);\n}\nsd-topbar::-webkit-scrollbar-corner {\n  background-color: var(--sd-scrollbar-track);\n}\nsd-topbar::-webkit-scrollbar {\n  width: var(--sd-gap-sm);\n  height: var(--sd-gap-sm);\n  background-color: transparent;\n}\nsd-topbar::-webkit-scrollbar-thumb {\n  background-color: var(--sd-scrollbar-thumb-hover);\n}"], encapsulation: 2 });
+        } }, dependencies: [SdButton, NgIcon], styles: ["sd-topbar {\n  min-height: var(--sd-topbar-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  user-select: none;\n  background-color: var(--sd-bg-canvas);\n  color: var(--sd-tx-default);\n  border-bottom: 1px solid var(--sd-bd-soft);\n  padding-left: var(--sd-gap-xs);\n}\nsd-topbar > h1 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h2 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h3 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h4 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h5 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h6 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar::-webkit-scrollbar-track {\n  background-color: var(--sd-scrollbar-track);\n}\nsd-topbar::-webkit-scrollbar-corner {\n  background-color: var(--sd-scrollbar-track);\n}\nsd-topbar::-webkit-scrollbar {\n  width: var(--sd-gap-sm);\n  height: var(--sd-gap-sm);\n  background-color: transparent;\n}\nsd-topbar::-webkit-scrollbar-thumb {\n  background-color: var(--sd-scrollbar-thumb-hover);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTopbar, [{
         type: Component,
@@ -58,6 +58,6 @@ export class SdTopbar {
     }
 
     <ng-content />
-  `, styles: ["sd-topbar {\n  min-height: var(--sd-topbar-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  user-select: none;\n  color: var(--sd-tx-default);\n  border-bottom: 1px solid var(--sd-bd-soft);\n  padding-left: var(--sd-gap-xs);\n}\nsd-topbar > h1 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h2 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h3 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h4 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h5 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h6 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar::-webkit-scrollbar-track {\n  background-color: var(--sd-scrollbar-track);\n}\nsd-topbar::-webkit-scrollbar-corner {\n  background-color: var(--sd-scrollbar-track);\n}\nsd-topbar::-webkit-scrollbar {\n  width: var(--sd-gap-sm);\n  height: var(--sd-gap-sm);\n  background-color: transparent;\n}\nsd-topbar::-webkit-scrollbar-thumb {\n  background-color: var(--sd-scrollbar-thumb-hover);\n}"] }]
+  `, styles: ["sd-topbar {\n  min-height: var(--sd-topbar-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  user-select: none;\n  background-color: var(--sd-bg-canvas);\n  color: var(--sd-tx-default);\n  border-bottom: 1px solid var(--sd-bd-soft);\n  padding-left: var(--sd-gap-xs);\n}\nsd-topbar > h1 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h2 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h3 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h4 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h5 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar > h6 {\n  padding-right: var(--sd-gap-xl);\n}\nsd-topbar::-webkit-scrollbar-track {\n  background-color: var(--sd-scrollbar-track);\n}\nsd-topbar::-webkit-scrollbar-corner {\n  background-color: var(--sd-scrollbar-track);\n}\nsd-topbar::-webkit-scrollbar {\n  width: var(--sd-gap-sm);\n  height: var(--sd-gap-sm);\n  background-color: transparent;\n}\nsd-topbar::-webkit-scrollbar-thumb {\n  background-color: var(--sd-scrollbar-thumb-hover);\n}"] }]
     }], null, { sidebarContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarContainer", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTopbar, { className: "SdTopbar", filePath: "packages/angular/src/layout/topbar/sd-topbar.ts", lineNumber: 76 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTopbar, { className: "SdTopbar", filePath: "packages/angular/src/layout/topbar/sd-topbar.ts", lineNumber: 77 }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/angular",
-  "version": "14.2.2",
+  "version": "14.2.3",
   "description": "심플리즘 패키지 - Angular",
   "author": "심플리즘",
   "license": "Apache-2.0",
@@ -58,10 +58,10 @@
     "jspdf": "^4.2.1",
     "rxjs": "^7.8.2",
     "tabbable": "^6.5.0",
-    "@simplysm/core-browser": "14.2.2",
-    "@simplysm/core-common": "14.2.2",
-    "@simplysm/service-client": "14.2.2",
-    "@simplysm/service-common": "14.2.2"
+    "@simplysm/core-browser": "14.2.3",
+    "@simplysm/service-common": "14.2.3",
+    "@simplysm/service-client": "14.2.3",
+    "@simplysm/core-common": "14.2.3"
   },
   "devDependencies": {
     "@angular/compiler": "^22.0.7"

package/scss/commons/_mixins.scss

@@ -34,7 +34,7 @@
   @return $result;
 }
 
-// -hover 변형·bg-canvas-image·bg-sheet-image 는 유틸 클래스 미생성 (DEC-013)
+// -hover 변형, bg-canvas-image, bg-sheet-image 는 유틸 클래스 미생성 (DEC-013)
 @function isUtilityToken($name) {
   @return string.slice($name, -6) != "-hover" and $name != "canvas-image" and $name != "sheet-image";
 }

package/scss/commons/_theme-variables.scss

@@ -1,7 +1,5 @@
 @use "mixins";
 @use "variables";
-@use "colors";
-@use "density";
 @use "../themes/variables-blueprint" as blueprint;
 @use "../themes/variables-ide-dark" as ide-dark;
 
@@ -9,7 +7,6 @@
 
 @layer base {
   :root {
-    @include colors.vars;
     @include mixins.writeVars(variables.$sd, "sd");
   }
 }
@@ -26,9 +23,4 @@
   .sd-theme-ide-dark {
     @include mixins.writeVars(ide-dark.$dark, "sd");
   }
-
-  // 밀도 축(DEC-007) — 테마와 직교, 밀도 그룹(치수)만 덮음
-  .sd-density-compact {
-    @include mixins.writeVars(density.$compact, "sd");
-  }
 }

package/scss/commons/_variables.scss

@@ -10,91 +10,93 @@ $breakpoint-sm: 1280px;
 //
 // 규칙:
 // - 어휘(DEC-013): 색 어휘는 --sd-{bg|tx|bd}-… 속성 우선. 유틸 클래스명 = 토큰명에서 --sd- 만 뗀 것.
-//   hover 변형은 -hover 접미. 비색상·컴포넌트 전용 그룹(팔레트·focus-ring·scrollbar·shadow·타이포·치수·z)은 그룹 구조 유지.
-// - 체이닝 금지: var() 참조는 팔레트(--sd-color-*, 테마 불변)로만 허용.
-//   테마·밀도가 덮는 토큰끼리의 체인은 재정의 스코프에서 하위가 안 따라오므로 리터럴로 푼다.
-// - 색 원천: 팔레트 + 흰/검 알파(rgba white/black)만. 커스텀 rgb 리터럴 금지.
-// - 라이트 기본값은 구 스케일 토큰과 시각 등가(값 불변·이름만 역할화).
-// - 구 스케일 어휘(--theme-*·--trans-*·--text-trans-* 등)는 발행하지 않는다(14.2 에서 발행 종료·브레이킹).
+//   hover 변형은 -hover 접미. 비색상, 컴포넌트 전용 그룹(focus-ring, scrollbar, shadow, 타이포, 치수, z)은 그룹 구조 유지.
+// - 색 원천: 리터럴 rgb + 흰/검 알파. 팔레트(--sd-color-*) 배타 모델은 폐기됨(테마 값 자립).
+//   테마, 밀도가 덮는 토큰끼리의 체인은 재정의 스코프에서 하위가 안 따라오므로 리터럴로 푼다.
+// - 라이트 기본값은 구 팔레트 스텝과 시각 등가(값 불변, 표기만 리터럴화).
+// - 구 스케일 어휘(--theme-*, --trans-*, --text-trans-*, --sd-color-* 등)는 발행하지 않는다(브레이킹).
 // ---------------------------------------------------------------------------
 // 시맨틱 키 목록 — 컴포넌트 theme 변형 @each 순회용 (토큰 아님)
-$theme-keys: ("gray", blue-gray, primary, secondary, info, success, warning, danger);
+$theme-keys: ("gray", blue-gray, primary, info, success, warning, danger);
 
 $sd: (
   // 배경(bg)
   bg: (
-      // 표면 — 앱 배경(canvas)·컨트롤(control)·카드/모달(elevated)·드롭다운/팝업(overlay)·시트(sheet)·반전면(inverse)
-      canvas: var(--sd-color-zinc-50),
+      // 표면 — 앱 배경(canvas), 콘텐츠 면(content), 카드/모달(elevated), 드롭다운/팝업(overlay), 시트(sheet), 반전면(inverse)
+      canvas: rgb(250, 250, 250),
       // 배경 패턴(블루프린트 모눈 등) — 값 맵으로 패턴까지 테마화. 소비측은 background 단축 금지.
       canvas-image: none,
-      control: white,
+      // 콘텐츠(에디터/본문) 면 — 메인, 시트셀, 리스트, inset 콘텐츠
+      content: white,
       elevated: white,
       overlay: white,
-      sheet: var(--sd-color-zinc-50),
+      sheet: rgb(250, 250, 250),
       // 시트 컨테이너 배경 패턴(블루프린트 모눈 등) — canvas-image 와 별개 축(방침 1, 2026-07-16 확정)
       sheet-image: none,
       inverse: black,
-      // 필드(인풋류) 면 — 구 "--theme-secondary-lightest 필드 배경 관례" 해체
-      field: var(--sd-color-blue-50),
-      // 트랙 면(스위치 off 트랙 등 손잡이·채움 뒤의 궤도) — 준역할(2026-07-16 확정)
-      track: var(--sd-color-zinc-100),
-      // 시맨틱 면 — solid(짙은 면)·subtle(옅은 면), hover 변형 포함
+      // 필드(인풋류) 면 — 구 "--theme-secondary-lightest 필드 배경 관례" 해체 (blue-50 등가)
+      field: rgb(239, 246, 255),
+      // 트랙 면(스위치 off 트랙 등 손잡이, 채움 뒤의 궤도) — 준역할(2026-07-16 확정) (zinc-100 등가)
+      track: rgb(244, 244, 245),
+      // 스위치 노브(손잡이) 면 — 트랙 위로 도드라지는 별도 부품. 라이트 white
+      knob: white,
+      // 체크박스 박스 면 — VS Code checkbox.background 별도 면. 라이트는 white(현행 관례 유지)
+      checkbox: white,
+      // 시맨틱 면 — solid(짙은 면), subtle(옅은 면), hover 변형 포함
       "gray": (
-          solid: var(--sd-color-zinc-400),
-          solid-hover: var(--sd-color-zinc-500),
-          subtle: var(--sd-color-zinc-50),
-          subtle-hover: var(--sd-color-zinc-100),
+          solid: rgb(159, 159, 169),
+          solid-hover: rgb(113, 113, 123),
+          subtle: rgb(250, 250, 250),
+          subtle-hover: rgb(244, 244, 245),
         ),
       blue-gray: (
-        solid: var(--sd-color-slate-400),
-        solid-hover: var(--sd-color-slate-500),
-        subtle: var(--sd-color-slate-50),
-        subtle-hover: var(--sd-color-slate-100),
+        solid: rgb(144, 161, 185),
+        solid-hover: rgb(98, 116, 142),
+        subtle: rgb(248, 250, 252),
+        subtle-hover: rgb(241, 245, 249),
       ),
       primary: (
-        solid: var(--sd-color-blue-500),
-        solid-hover: var(--sd-color-blue-600),
-        subtle: var(--sd-color-blue-50),
-        subtle-hover: var(--sd-color-blue-100),
-      ),
-      secondary: (
-        solid: var(--sd-color-blue-500),
-        solid-hover: var(--sd-color-blue-600),
-        subtle: var(--sd-color-blue-50),
-        subtle-hover: var(--sd-color-blue-100),
+        solid: rgb(43, 127, 255),
+        solid-hover: rgb(21, 93, 252),
+        subtle: rgb(239, 246, 255),
+        subtle-hover: rgb(219, 234, 254),
       ),
       info: (
-        solid: var(--sd-color-cyan-500),
-        solid-hover: var(--sd-color-cyan-600),
-        subtle: var(--sd-color-cyan-50),
-        subtle-hover: var(--sd-color-cyan-100),
+        solid: rgb(0, 184, 219),
+        solid-hover: rgb(0, 146, 184),
+        subtle: rgb(236, 254, 255),
+        subtle-hover: rgb(206, 250, 254),
       ),
       success: (
-        solid: var(--sd-color-lime-500),
-        solid-hover: var(--sd-color-lime-600),
-        subtle: var(--sd-color-lime-50),
-        subtle-hover: var(--sd-color-lime-100),
+        solid: rgb(124, 207, 0),
+        solid-hover: rgb(94, 165, 0),
+        subtle: rgb(247, 254, 231),
+        subtle-hover: rgb(236, 252, 202),
       ),
       warning: (
-        solid: var(--sd-color-orange-500),
-        solid-hover: var(--sd-color-orange-600),
-        subtle: var(--sd-color-orange-50),
-        subtle-hover: var(--sd-color-orange-100),
+        solid: rgb(255, 105, 0),
+        solid-hover: rgb(245, 73, 0),
+        subtle: rgb(255, 247, 237),
+        subtle-hover: rgb(255, 237, 212),
       ),
       danger: (
-        solid: var(--sd-color-red-500),
-        solid-hover: var(--sd-color-red-600),
-        subtle: var(--sd-color-red-50),
-        subtle-hover: var(--sd-color-red-100),
+        solid: rgb(251, 44, 54),
+        solid-hover: rgb(231, 0, 11),
+        subtle: rgb(254, 242, 242),
+        subtle-hover: rgb(255, 226, 226),
       ),
       // 상태 오버레이(알파) — hover/active/selected 전 컨트롤 공통
       state: (
           hover: rgba(0, 0, 0, 0.05),
           active: rgba(0, 0, 0, 0.1),
           selected: rgba(0, 0, 0, 0.07),
+          // 포커스 없는 선택행 — solid(list.inactiveSelection). 흰/검 알파로 못 담아 solid
+          selected-inactive: rgb(228, 228, 231),
         ),
-      // 비활성 — 색 치환 단일 규약(opacity 방식 폐기)
-      disabled: var(--sd-color-zinc-100),
+      // 드롭 자리표시(accent 알파)
+      drop-target: rgba(43, 127, 255, 0.1),
+      // 비활성 — 색 치환 단일 규약(opacity 방식 폐기) (zinc-100 등가)
+      disabled: rgb(244, 244, 245),
       busy-overlay: rgba(255, 255, 255, 0.6),
       // busy 로딩 인디케이터 그래픽 면(큐브 로더 등) — 준역할(2026-07-16 확정)
       busy-indicator: rgba(0, 0, 0, 0.1),
@@ -108,99 +110,90 @@ $sd: (
       muted: rgba(0, 0, 0, 0.6),
       faint: rgba(0, 0, 0, 0.38),
       on-inverse: white,
-      // 반전면 위 보조 텍스트(hover 감쇠·비활성) — 준역할(2026-07-16 확정)
+      // 반전면 위 보조 텍스트(hover 감쇠, 비활성) — 준역할(2026-07-16 확정)
       on-inverse-muted: rgba(255, 255, 255, 0.7),
       on-inverse-disabled: rgba(255, 255, 255, 0.5),
       disabled: rgba(0, 0, 0, 0.38),
-      // 시맨틱 텍스트 — {key}(단독 텍스트·아이콘·링크, +hover)·{key}-solid(solid 면 위)·{key}-subtle(subtle 면 위)
+      // 시맨틱 텍스트 — {key}(단독 텍스트, 아이콘, 링크, +hover), {key}-solid(solid 면 위), {key}-subtle(subtle 면 위)
       // tx-{key} 가 리프라 시맨틱 키는 중첩 없이 평탄 표기
-      "gray": var(--sd-color-zinc-400),
-      gray-hover: var(--sd-color-zinc-500),
+      "gray": rgb(159, 159, 169),
+      gray-hover: rgb(113, 113, 123),
       gray-solid: white,
-      gray-subtle: var(--sd-color-zinc-600),
-      blue-gray: var(--sd-color-slate-400),
-      blue-gray-hover: var(--sd-color-slate-500),
+      gray-subtle: rgb(82, 82, 92),
+      blue-gray: rgb(144, 161, 185),
+      blue-gray-hover: rgb(98, 116, 142),
       blue-gray-solid: white,
-      blue-gray-subtle: var(--sd-color-slate-600),
-      primary: var(--sd-color-blue-500),
-      primary-hover: var(--sd-color-blue-600),
+      blue-gray-subtle: rgb(69, 85, 108),
+      primary: rgb(43, 127, 255),
+      primary-hover: rgb(21, 93, 252),
       primary-solid: white,
-      primary-subtle: var(--sd-color-blue-700),
-      secondary: var(--sd-color-blue-500),
-      secondary-hover: var(--sd-color-blue-600),
-      secondary-solid: white,
-      secondary-subtle: var(--sd-color-blue-700),
-      info: var(--sd-color-cyan-500),
-      info-hover: var(--sd-color-cyan-600),
+      primary-subtle: rgb(20, 71, 230),
+      info: rgb(0, 184, 219),
+      info-hover: rgb(0, 146, 184),
       info-solid: white,
-      info-subtle: var(--sd-color-cyan-700),
-      success: var(--sd-color-lime-500),
-      success-hover: var(--sd-color-lime-600),
+      info-subtle: rgb(0, 117, 149),
+      success: rgb(124, 207, 0),
+      success-hover: rgb(94, 165, 0),
       success-solid: white,
-      success-subtle: var(--sd-color-lime-700),
-      warning: var(--sd-color-orange-500),
-      warning-hover: var(--sd-color-orange-600),
+      success-subtle: rgb(73, 125, 0),
+      warning: rgb(255, 105, 0),
+      warning-hover: rgb(245, 73, 0),
       warning-solid: white,
-      warning-subtle: var(--sd-color-orange-700),
-      danger: var(--sd-color-red-500),
-      danger-hover: var(--sd-color-red-600),
+      warning-subtle: rgb(202, 53, 0),
+      danger: rgb(251, 44, 54),
+      danger-hover: rgb(231, 0, 11),
       danger-solid: white,
-      danger-subtle: var(--sd-color-red-700),
+      danger-subtle: rgb(193, 0, 7),
     ),
   // 보더(bd)
   bd: (
-      hairline: var(--sd-color-zinc-100),
-      soft: var(--sd-color-zinc-200),
-      default: var(--sd-color-zinc-300),
-      strong: var(--sd-color-zinc-400),
-      emphasis: var(--sd-color-zinc-500),
-      field: var(--sd-color-zinc-300),
-      disabled: var(--sd-color-zinc-200),
-      // 시맨틱 보더 — solid(+hover)·subtle
+      hairline: rgb(244, 244, 245),
+      soft: rgb(228, 228, 231),
+      default: rgb(212, 212, 216),
+      strong: rgb(159, 159, 169),
+      emphasis: rgb(113, 113, 123),
+      field: rgb(212, 212, 216),
+      disabled: rgb(228, 228, 231),
+      // 시맨틱 보더 — solid(+hover), subtle
       "gray": (
-          solid: var(--sd-color-zinc-400),
-          solid-hover: var(--sd-color-zinc-500),
-          subtle: var(--sd-color-zinc-300),
+          solid: rgb(159, 159, 169),
+          solid-hover: rgb(113, 113, 123),
+          subtle: rgb(212, 212, 216),
         ),
       blue-gray: (
-        solid: var(--sd-color-slate-400),
-        solid-hover: var(--sd-color-slate-500),
-        subtle: var(--sd-color-slate-300),
+        solid: rgb(144, 161, 185),
+        solid-hover: rgb(98, 116, 142),
+        subtle: rgb(202, 213, 226),
       ),
       primary: (
-        solid: var(--sd-color-blue-500),
-        solid-hover: var(--sd-color-blue-600),
-        subtle: var(--sd-color-blue-200),
-      ),
-      secondary: (
-        solid: var(--sd-color-blue-500),
-        solid-hover: var(--sd-color-blue-600),
-        subtle: var(--sd-color-blue-200),
+        solid: rgb(43, 127, 255),
+        solid-hover: rgb(21, 93, 252),
+        subtle: rgb(190, 219, 255),
       ),
       info: (
-        solid: var(--sd-color-cyan-500),
-        solid-hover: var(--sd-color-cyan-600),
-        subtle: var(--sd-color-cyan-200),
+        solid: rgb(0, 184, 219),
+        solid-hover: rgb(0, 146, 184),
+        subtle: rgb(162, 244, 253),
       ),
       success: (
-        solid: var(--sd-color-lime-500),
-        solid-hover: var(--sd-color-lime-600),
-        subtle: var(--sd-color-lime-200),
+        solid: rgb(124, 207, 0),
+        solid-hover: rgb(94, 165, 0),
+        subtle: rgb(216, 249, 153),
       ),
       warning: (
-        solid: var(--sd-color-orange-500),
-        solid-hover: var(--sd-color-orange-600),
-        subtle: var(--sd-color-orange-200),
+        solid: rgb(255, 105, 0),
+        solid-hover: rgb(245, 73, 0),
+        subtle: rgb(255, 214, 167),
       ),
       danger: (
-        solid: var(--sd-color-red-500),
-        solid-hover: var(--sd-color-red-600),
-        subtle: var(--sd-color-red-200),
+        solid: rgb(251, 44, 54),
+        solid-hover: rgb(231, 0, 11),
+        subtle: rgb(255, 201, 201),
       ),
     ),
-  // 포커스 링 — :focus-visible 전 컨트롤 단일 규약
+  // 포커스 링 — :focus-visible 전 컨트롤 단일 규약 (blue-500 등가)
   focus-ring: (
-      color: var(--sd-color-blue-500),
+      color: rgb(43, 127, 255),
       width: 0.1667rem,
       offset: 0.0833rem,
     ),
@@ -210,7 +203,7 @@ $sd: (
     track: rgba(0, 0, 0, 0.03),
   ),
   // 컴포넌트 장식 토큰(방침 1, 2026-07-16 확정) — 테마 오버라이드가 값 맵으로 못 잡던
-  // 장식(FIND-003 ③)의 소비 지점. 라이트 기본값은 현행 시각 등가.
+  // 장식의 소비 지점. 라이트 기본값은 현행 시각 등가.
   card: (
       bd: transparent,
       // focus-within 시 상단 보더 색(ide-dark 액센트 라인용)
@@ -227,15 +220,15 @@ $sd: (
     ),
   modal: (
     bd: transparent,
-    header-bg: var(--sd-color-zinc-50),
+    header-bg: rgb(250, 250, 250),
     header-tx: rgba(0, 0, 0, 0.87),
-    header-tx-muted: var(--sd-color-zinc-400),
+    header-tx-muted: rgb(159, 159, 169),
   ),
   dropdown: (
-    bd: var(--sd-color-zinc-300),
+    bd: rgb(212, 212, 216),
   ),
   permission-group: (
-    bg: var(--sd-color-cyan-500),
+    bg: rgb(0, 184, 219),
     tx: white,
   ),
   shadow: (
@@ -268,7 +261,7 @@ $sd: (
       xl: 0.6667rem,
       xxl: 1rem,
     ),
-  // 밀도 그룹(치수) — sd-density-compact 가 이 그룹만 덮는다. 테마 맵엔 치수 없음.
+  // 치수 그룹. 테마 맵엔 치수 없음.
   gap: (
       xxs: 0.0833rem,
       xs: 0.1667rem,