@simplysm/angular 14.2.7 → 14.2.9

package/dist/features/editor/sd-tiptap-editor.js

@@ -336,7 +336,7 @@ export class SdTiptapEditor {
             i0.ɵɵdomElement(1, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(!ctx.disabled() ? 0 : -1);
-        } }, styles: ["sd-tiptap-editor {\n  display: block;\n  position: relative;\n  border: 1px solid var(--sd-bd-field);\n  border-radius: var(--sd-radius-default);\n  background-color: var(--sd-bg-field);\n}\nsd-tiptap-editor > ._toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--sd-gap-xs);\n  padding: var(--sd-gap-xs);\n  border-bottom: 1px solid var(--sd-bd-hairline);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button {\n  padding: var(--sd-gap-xs) var(--sd-gap-sm);\n  border: 1px solid var(--sd-bd-hairline);\n  border-radius: var(--sd-radius-default);\n  background-color: transparent;\n  cursor: pointer;\n  font-size: var(--sd-font-size-default);\n  line-height: 1;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active {\n  background-color: var(--sd-bg-primary-solid);\n  color: var(--sd-tx-primary-solid);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button:hover {\n  background-color: var(--sd-bg-state-hover);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active:hover {\n  background-color: var(--sd-bg-primary-solid);\n}\nsd-tiptap-editor > ._color-picker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px;\n  padding: var(--sd-gap-xs);\n  border-bottom: 1px solid var(--sd-bd-hairline);\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch {\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 1px solid var(--sd-bd-hairline);\n  border-radius: 2px;\n  cursor: pointer;\n  padding: 0;\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch._no-color {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--sd-bg-content);\n  font-size: 0.625rem;\n}\nsd-tiptap-editor > ._editor-container {\n  padding: var(--sd-gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--sd-font-family-field);\n}\nsd-tiptap-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-tiptap-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-tiptap-editor[data-sd-disabled=true] {\n  background-color: var(--sd-bg-disabled);\n  color: var(--sd-tx-disabled);\n}\nsd-tiptap-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-tiptap-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\n}\nsd-tiptap-editor ._color-btn {\n  position: relative;\n}\nsd-tiptap-editor ._color-btn > ._color-indicator {\n  display: block;\n  height: 2px;\n  width: 100%;\n  position: absolute;\n  bottom: 2px;\n  left: 0;\n}"], encapsulation: 2 });
+        } }, styles: ["sd-tiptap-editor {\n  display: block;\n  position: relative;\n  border: 1px solid var(--%NS%sd-bd-field);\n  border-radius: var(--%NS%sd-radius-default);\n  background-color: var(--%NS%sd-bg-field);\n}\nsd-tiptap-editor > ._toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--%NS%sd-gap-xs);\n  padding: var(--%NS%sd-gap-xs);\n  border-bottom: 1px solid var(--%NS%sd-bd-hairline);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button {\n  padding: var(--%NS%sd-gap-xs) var(--%NS%sd-gap-sm);\n  border: 1px solid var(--%NS%sd-bd-hairline);\n  border-radius: var(--%NS%sd-radius-default);\n  background-color: transparent;\n  cursor: pointer;\n  font-size: var(--%NS%sd-font-size-default);\n  line-height: 1;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active {\n  background-color: var(--%NS%sd-bg-primary-solid);\n  color: var(--%NS%sd-tx-primary-solid);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button:hover {\n  background-color: var(--%NS%sd-bg-state-hover);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active:hover {\n  background-color: var(--%NS%sd-bg-primary-solid);\n}\nsd-tiptap-editor > ._color-picker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px;\n  padding: var(--%NS%sd-gap-xs);\n  border-bottom: 1px solid var(--%NS%sd-bd-hairline);\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch {\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 1px solid var(--%NS%sd-bd-hairline);\n  border-radius: 2px;\n  cursor: pointer;\n  padding: 0;\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch._no-color {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--%NS%sd-bg-content);\n  font-size: 0.625rem;\n}\nsd-tiptap-editor > ._editor-container {\n  padding: var(--%NS%sd-gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--%NS%sd-font-family-field);\n}\nsd-tiptap-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-tiptap-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-tiptap-editor[data-sd-disabled=true] {\n  background-color: var(--%NS%sd-bg-disabled);\n  color: var(--%NS%sd-tx-disabled);\n}\nsd-tiptap-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-tiptap-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\n}\nsd-tiptap-editor ._color-btn {\n  position: relative;\n}\nsd-tiptap-editor ._color-btn > ._color-indicator {\n  display: block;\n  height: 2px;\n  width: 100%;\n  position: absolute;\n  bottom: 2px;\n  left: 0;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTiptapEditor, [{
         type: Component,

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

@@ -132,7 +132,7 @@ export class SdCalendar {
             i0.ɵɵtextInterpolate1(" ", ctx.weeks[(ctx.weekStartDay() + 6) % 7], " ");
             i0.ɵɵadvance(2);
             i0.ɵɵrepeater(ctx.dataTable());
-        } }, dependencies: [NgTemplateOutlet, FormatPipe], styles: ["sd-calendar > table {\n  border-collapse: collapse;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--sd-radius-default);\n  overflow: hidden;\n}\nsd-calendar > table > * > tr > * {\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  border: 1px solid var(--sd-bd-default);\n  width: 14.2857142857%;\n}\nsd-calendar > table > thead > tr > th {\n  background-color: var(--sd-bg-gray-subtle);\n  height: 10%;\n}\nsd-calendar > table > tbody > tr > td {\n  vertical-align: top;\n  height: 15%;\n}\nsd-calendar > table > tbody > tr > td > .day {\n  margin-bottom: var(--sd-gap-sm);\n}\nsd-calendar > table > tbody > tr > td.not-current {\n  background-color: var(--sd-bg-canvas);\n}\nsd-calendar > table > tbody > tr > td.not-current > .day {\n  color: var(--sd-tx-gray);\n}\nsd-calendar > table > tbody > tr > td > .content {\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: column;\n  gap: var(--sd-gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-calendar > table > tbody > tr > td > .content {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content > * + * {\n    margin-top: var(--sd-gap-sm);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxs {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxs > * + * {\n    margin-top: var(--sd-gap-xxs);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xs {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xs > * + * {\n    margin-top: var(--sd-gap-xs);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-sm {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-sm > * + * {\n    margin-top: var(--sd-gap-sm);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-default {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-default > * + * {\n    margin-top: var(--sd-gap-default);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-lg {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-lg > * + * {\n    margin-top: var(--sd-gap-lg);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xl {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xl > * + * {\n    margin-top: var(--sd-gap-xl);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxl {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxl > * + * {\n    margin-top: var(--sd-gap-xxl);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-0 {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-0 > * + * {\n    margin-top: var(--sd-gap-0);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-auto {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-auto > * + * {\n    margin-top: var(--sd-gap-auto);\n  }\n}"], encapsulation: 2 });
+        } }, dependencies: [NgTemplateOutlet, FormatPipe], styles: ["sd-calendar > table {\n  border-collapse: collapse;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--%NS%sd-radius-default);\n  overflow: hidden;\n}\nsd-calendar > table > * > tr > * {\n  padding: var(--%NS%sd-gap-sm) var(--%NS%sd-gap-default);\n  border: 1px solid var(--%NS%sd-bd-default);\n  width: 14.2857142857%;\n}\nsd-calendar > table > thead > tr > th {\n  background-color: var(--%NS%sd-bg-gray-subtle);\n  height: 10%;\n}\nsd-calendar > table > tbody > tr > td {\n  vertical-align: top;\n  height: 15%;\n}\nsd-calendar > table > tbody > tr > td > .day {\n  margin-bottom: var(--%NS%sd-gap-sm);\n}\nsd-calendar > table > tbody > tr > td.not-current {\n  background-color: var(--%NS%sd-bg-canvas);\n}\nsd-calendar > table > tbody > tr > td.not-current > .day {\n  color: var(--%NS%sd-tx-gray);\n}\nsd-calendar > table > tbody > tr > td > .content {\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: column;\n  gap: var(--%NS%sd-gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-calendar > table > tbody > tr > td > .content {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content > * + * {\n    margin-top: var(--%NS%sd-gap-sm);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxs {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxs > * + * {\n    margin-top: var(--%NS%sd-gap-xxs);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xs {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xs > * + * {\n    margin-top: var(--%NS%sd-gap-xs);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-sm {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-sm > * + * {\n    margin-top: var(--%NS%sd-gap-sm);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-default {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-default > * + * {\n    margin-top: var(--%NS%sd-gap-default);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-lg {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-lg > * + * {\n    margin-top: var(--%NS%sd-gap-lg);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xl {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xl > * + * {\n    margin-top: var(--%NS%sd-gap-xl);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxl {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxl > * + * {\n    margin-top: var(--%NS%sd-gap-xxl);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-0 {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-0 > * + * {\n    margin-top: var(--%NS%sd-gap-0);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-auto {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-auto > * + * {\n    margin-top: var(--%NS%sd-gap-auto);\n  }\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCalendar, [{
         type: Component,

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

@@ -14,7 +14,7 @@ export class SdLabel {
         } }, inputs: { theme: [1, "theme"], color: [1, "color"], clickable: [1, "clickable"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdLabel_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["sd-label {\n  display: inline-block;\n  background-color: var(--sd-bg-gray-solid);\n  color: var(--sd-tx-gray-solid);\n  padding: 0 var(--sd-gap-sm);\n  border-radius: var(--sd-radius-default);\n  text-indent: 0;\n}\nsd-label[data-sd-theme=gray] {\n  background-color: var(--sd-bg-gray-solid);\n  color: var(--sd-tx-gray-solid);\n}\nsd-label[data-sd-theme=blue-gray] {\n  background-color: var(--sd-bg-blue-gray-solid);\n  color: var(--sd-tx-blue-gray-solid);\n}\nsd-label[data-sd-theme=primary] {\n  background-color: var(--sd-bg-primary-solid);\n  color: var(--sd-tx-primary-solid);\n}\nsd-label[data-sd-theme=info] {\n  background-color: var(--sd-bg-info-solid);\n  color: var(--sd-tx-info-solid);\n}\nsd-label[data-sd-theme=success] {\n  background-color: var(--sd-bg-success-solid);\n  color: var(--sd-tx-success-solid);\n}\nsd-label[data-sd-theme=warning] {\n  background-color: var(--sd-bg-warning-solid);\n  color: var(--sd-tx-warning-solid);\n}\nsd-label[data-sd-theme=danger] {\n  background-color: var(--sd-bg-danger-solid);\n  color: var(--sd-tx-danger-solid);\n}\nsd-label[data-sd-clickable=true] {\n  cursor: pointer;\n}\nsd-label[data-sd-clickable=true]:hover {\n  background-color: var(--sd-bg-gray-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=gray] {\n  background-color: var(--sd-bg-gray-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=blue-gray] {\n  background-color: var(--sd-bg-blue-gray-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=primary] {\n  background-color: var(--sd-bg-primary-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=info] {\n  background-color: var(--sd-bg-info-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=success] {\n  background-color: var(--sd-bg-success-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=warning] {\n  background-color: var(--sd-bg-warning-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=danger] {\n  background-color: var(--sd-bg-danger-solid-hover);\n}"], encapsulation: 2 });
+        } }, styles: ["sd-label {\n  display: inline-block;\n  background-color: var(--%NS%sd-bg-gray-solid);\n  color: var(--%NS%sd-tx-gray-solid);\n  padding: 0 var(--%NS%sd-gap-sm);\n  border-radius: var(--%NS%sd-radius-default);\n  text-indent: 0;\n}\nsd-label[data-sd-theme=gray] {\n  background-color: var(--%NS%sd-bg-gray-solid);\n  color: var(--%NS%sd-tx-gray-solid);\n}\nsd-label[data-sd-theme=blue-gray] {\n  background-color: var(--%NS%sd-bg-blue-gray-solid);\n  color: var(--%NS%sd-tx-blue-gray-solid);\n}\nsd-label[data-sd-theme=primary] {\n  background-color: var(--%NS%sd-bg-primary-solid);\n  color: var(--%NS%sd-tx-primary-solid);\n}\nsd-label[data-sd-theme=info] {\n  background-color: var(--%NS%sd-bg-info-solid);\n  color: var(--%NS%sd-tx-info-solid);\n}\nsd-label[data-sd-theme=success] {\n  background-color: var(--%NS%sd-bg-success-solid);\n  color: var(--%NS%sd-tx-success-solid);\n}\nsd-label[data-sd-theme=warning] {\n  background-color: var(--%NS%sd-bg-warning-solid);\n  color: var(--%NS%sd-tx-warning-solid);\n}\nsd-label[data-sd-theme=danger] {\n  background-color: var(--%NS%sd-bg-danger-solid);\n  color: var(--%NS%sd-tx-danger-solid);\n}\nsd-label[data-sd-clickable=true] {\n  cursor: pointer;\n}\nsd-label[data-sd-clickable=true]:hover {\n  background-color: var(--%NS%sd-bg-gray-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=gray] {\n  background-color: var(--%NS%sd-bg-gray-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=blue-gray] {\n  background-color: var(--%NS%sd-bg-blue-gray-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=primary] {\n  background-color: var(--%NS%sd-bg-primary-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=info] {\n  background-color: var(--%NS%sd-bg-info-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=success] {\n  background-color: var(--%NS%sd-bg-success-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=warning] {\n  background-color: var(--%NS%sd-bg-warning-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=danger] {\n  background-color: var(--%NS%sd-bg-danger-solid-hover);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdLabel, [{
         type: Component,

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=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(--%NS%sd-gap-sm) var(--%NS%sd-gap-default);\n  background-color: var(--%NS%sd-bg-gray-subtle);\n  border: none;\n  border-radius: var(--%NS%sd-radius-default);\n}\nsd-note[data-sd-theme=gray] {\n  background-color: var(--%NS%sd-bg-gray-subtle);\n  border: 1px solid var(--%NS%sd-bg-gray-subtle);\n}\nsd-note[data-sd-theme=blue-gray] {\n  background-color: var(--%NS%sd-bg-blue-gray-subtle);\n  border: 1px solid var(--%NS%sd-bg-blue-gray-subtle);\n}\nsd-note[data-sd-theme=primary] {\n  background-color: var(--%NS%sd-bg-primary-subtle);\n  border: 1px solid var(--%NS%sd-bg-primary-subtle);\n}\nsd-note[data-sd-theme=info] {\n  background-color: var(--%NS%sd-bg-info-subtle);\n  border: 1px solid var(--%NS%sd-bg-info-subtle);\n}\nsd-note[data-sd-theme=success] {\n  background-color: var(--%NS%sd-bg-success-subtle);\n  border: 1px solid var(--%NS%sd-bg-success-subtle);\n}\nsd-note[data-sd-theme=warning] {\n  background-color: var(--%NS%sd-bg-warning-subtle);\n  border: 1px solid var(--%NS%sd-bg-warning-subtle);\n}\nsd-note[data-sd-theme=danger] {\n  background-color: var(--%NS%sd-bg-danger-subtle);\n  border: 1px solid var(--%NS%sd-bg-danger-subtle);\n}\nsd-note[data-sd-size=sm] {\n  font-size: var(--%NS%sd-font-size-sm);\n  padding: var(--%NS%sd-gap-xs) var(--%NS%sd-gap-sm);\n}\nsd-note[data-sd-size=lg] {\n  padding: var(--%NS%sd-gap-default) var(--%NS%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,

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=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 });
+        } }, dependencies: [PercentPipe], styles: ["sd-progress {\n  position: relative;\n  display: block;\n  width: 100%;\n  white-space: nowrap;\n  background-color: var(--%NS%sd-bg-gray-subtle);\n  border: 1px solid var(--%NS%sd-bd-hairline);\n  border-radius: var(--%NS%sd-radius-default);\n  overflow: hidden;\n}\nsd-progress > ._content {\n  position: relative;\n  z-index: 2;\n  padding: var(--%NS%sd-gap-lg) var(--%NS%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(--%NS%sd-bg-gray-solid);\n}\nsd-progress[data-sd-theme=blue-gray] > ._progress {\n  background-color: var(--%NS%sd-bg-blue-gray-solid);\n}\nsd-progress[data-sd-theme=primary] > ._progress {\n  background-color: var(--%NS%sd-bg-primary-solid);\n}\nsd-progress[data-sd-theme=info] > ._progress {\n  background-color: var(--%NS%sd-bg-info-solid);\n}\nsd-progress[data-sd-theme=success] > ._progress {\n  background-color: var(--%NS%sd-bg-success-solid);\n}\nsd-progress[data-sd-theme=warning] > ._progress {\n  background-color: var(--%NS%sd-bg-warning-solid);\n}\nsd-progress[data-sd-theme=danger] > ._progress {\n  background-color: var(--%NS%sd-bg-danger-solid);\n}\nsd-progress[data-sd-size=sm] > ._content {\n  padding: var(--%NS%sd-gap-xs) var(--%NS%sd-gap-default);\n}\nsd-progress[data-sd-size=lg] > ._content {\n  padding: var(--%NS%sd-gap-default) var(--%NS%sd-gap-xl);\n}\nsd-progress[data-sd-inset=true] {\n  border-radius: 0;\n  border: none;\n  background-color: var(--%NS%sd-bg-track);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdProgress, [{
         type: Component,

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

@@ -33,7 +33,7 @@ export class SdSidebarContainer {
             i0.ɵɵdomElementStart(1, "div", 0);
             i0.ɵɵdomListener("click", function SdSidebarContainer_Template_div_click_1_listener() { return ctx.onBackdropClick(); })("keydown.enter", function SdSidebarContainer_Template_div_keydown_enter_1_listener() { return ctx.onBackdropClick(); });
             i0.ɵɵdomElementEnd();
-        } }, styles: ["sd-sidebar-container {\n  display: block;\n  position: relative;\n  height: 100%;\n  padding-left: var(--sd-sidebar-width);\n  transition: padding-left var(--sd-animation-duration) ease-out;\n}\nsd-sidebar-container[data-sd-toggle=true] {\n  padding-left: 0;\n  transition: padding-left var(--sd-animation-duration) ease-in;\n}\nsd-sidebar-container > ._backdrop {\n  display: none;\n}\n\n@media all and (max-width: 520px) {\n  sd-sidebar-container {\n    padding-left: 0;\n  }\n  sd-sidebar-container > ._backdrop {\n    position: absolute;\n    display: block;\n    z-index: calc(var(--sd-z-sidebar) - 1);\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: var(--sd-bg-inverse);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--sd-animation-duration) ease-in-out;\n  }\n  sd-sidebar-container[data-sd-toggle=true] > ._backdrop {\n    opacity: 0.6;\n    pointer-events: auto;\n  }\n}"], encapsulation: 2 });
+        } }, styles: ["sd-sidebar-container {\n  display: block;\n  position: relative;\n  height: 100%;\n  padding-left: var(--%NS%sd-sidebar-width);\n  transition: padding-left var(--%NS%sd-animation-duration) ease-out;\n}\nsd-sidebar-container[data-sd-toggle=true] {\n  padding-left: 0;\n  transition: padding-left var(--%NS%sd-animation-duration) ease-in;\n}\nsd-sidebar-container > ._backdrop {\n  display: none;\n}\n\n@media all and (max-width: 520px) {\n  sd-sidebar-container {\n    padding-left: 0;\n  }\n  sd-sidebar-container > ._backdrop {\n    position: absolute;\n    display: block;\n    z-index: calc(var(--%NS%sd-z-sidebar) - 1);\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: var(--%NS%sd-bg-inverse);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--%NS%sd-animation-duration) ease-in-out;\n  }\n  sd-sidebar-container[data-sd-toggle=true] > ._backdrop {\n    opacity: 0.6;\n    pointer-events: auto;\n  }\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebarContainer, [{
         type: Component,

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

@@ -74,7 +74,7 @@ export class SdSidebarUser {
             let tmp_0_0;
             i0.ɵɵadvance(2);
             i0.ɵɵconditional((tmp_0_0 = ctx.userMenu()) ? 2 : -1, tmp_0_0);
-        } }, dependencies: [SdCollapseIcon, SdCollapse, SdRipple, SdList, SdListItem, NgIcon], styles: ["sd-sidebar-user {\n  display: block;\n}\nsd-sidebar-user > ._menu-button {\n  display: block;\n  cursor: pointer;\n  user-select: none;\n  color: var(--sd-tx-muted);\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  border-radius: var(--sd-radius-default);\n  margin: 0 var(--sd-gap-sm);\n}\nsd-sidebar-user > ._menu-button:hover {\n  background-color: var(--sd-bg-state-hover);\n}\nsd-sidebar-user > sd-collapse > ._content > sd-list {\n  background-color: var(--sd-bg-gray-subtle);\n  padding: var(--sd-gap-xs) 0;\n  margin: 0 var(--sd-gap-sm);\n}"], encapsulation: 2 });
+        } }, dependencies: [SdCollapseIcon, SdCollapse, SdRipple, SdList, SdListItem, NgIcon], styles: ["sd-sidebar-user {\n  display: block;\n}\nsd-sidebar-user > ._menu-button {\n  display: block;\n  cursor: pointer;\n  user-select: none;\n  color: var(--%NS%sd-tx-muted);\n  padding: var(--%NS%sd-gap-sm) var(--%NS%sd-gap-default);\n  border-radius: var(--%NS%sd-radius-default);\n  margin: 0 var(--%NS%sd-gap-sm);\n}\nsd-sidebar-user > ._menu-button:hover {\n  background-color: var(--%NS%sd-bg-state-hover);\n}\nsd-sidebar-user > sd-collapse > ._content > sd-list {\n  background-color: var(--%NS%sd-bg-gray-subtle);\n  padding: var(--%NS%sd-gap-xs) 0;\n  margin: 0 var(--%NS%sd-gap-sm);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebarUser, [{
         type: Component,

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

@@ -12,7 +12,7 @@ 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  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 });
+        } }, styles: ["sd-sidebar {\n  position: absolute;\n  z-index: var(--%NS%sd-z-sidebar);\n  top: 0;\n  left: 0;\n  width: var(--%NS%sd-sidebar-width);\n  height: 100%;\n  background-color: var(--%NS%sd-bg-canvas);\n  border-right: 1px solid var(--%NS%sd-bd-soft);\n}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--%NS%sd-animation-duration) ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform var(--%NS%sd-animation-duration) ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--%NS%sd-animation-duration) ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform var(--%NS%sd-animation-duration) ease-out;\n    box-shadow: 0 calc(16 * var(--%NS%sd-shadow-size)) calc(16 * 4 * var(--%NS%sd-shadow-size) * var(--%NS%sd-shadow-blur-mult)) var(--%NS%sd-shadow-color), 0 var(--%NS%sd-shadow-size) calc(var(--%NS%sd-shadow-size) * var(--%NS%sd-shadow-blur-mult)) var(--%NS%sd-shadow-color);\n  }\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebar, [{
         type: Component,

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

@@ -163,7 +163,7 @@ export class SdTopbarMenu {
             SdList,
             SdListItem,
             SdButton,
-            NgIcon], styles: ["sd-topbar-menu sd-list sd-list {\n  background-color: var(--sd-bg-gray-subtle);\n}"], encapsulation: 2 });
+            NgIcon], styles: ["sd-topbar-menu sd-list sd-list {\n  background-color: var(--%NS%sd-bg-gray-subtle);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTopbarMenu, [{
         type: Component,

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  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 });
+        } }, dependencies: [SdButton, NgIcon], styles: ["sd-topbar {\n  min-height: var(--%NS%sd-topbar-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  user-select: none;\n  background-color: var(--%NS%sd-bg-canvas);\n  color: var(--%NS%sd-tx-default);\n  border-bottom: 1px solid var(--%NS%sd-bd-soft);\n  padding-left: var(--%NS%sd-gap-xs);\n}\nsd-topbar > h1 {\n  padding-right: var(--%NS%sd-gap-xl);\n}\nsd-topbar > h2 {\n  padding-right: var(--%NS%sd-gap-xl);\n}\nsd-topbar > h3 {\n  padding-right: var(--%NS%sd-gap-xl);\n}\nsd-topbar > h4 {\n  padding-right: var(--%NS%sd-gap-xl);\n}\nsd-topbar > h5 {\n  padding-right: var(--%NS%sd-gap-xl);\n}\nsd-topbar > h6 {\n  padding-right: var(--%NS%sd-gap-xl);\n}\nsd-topbar::-webkit-scrollbar-track {\n  background-color: var(--%NS%sd-scrollbar-track);\n}\nsd-topbar::-webkit-scrollbar-corner {\n  background-color: var(--%NS%sd-scrollbar-track);\n}\nsd-topbar::-webkit-scrollbar {\n  width: var(--%NS%sd-gap-sm);\n  height: var(--%NS%sd-gap-sm);\n  background-color: transparent;\n}\nsd-topbar::-webkit-scrollbar-thumb {\n  background-color: var(--%NS%sd-scrollbar-thumb-hover);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTopbar, [{
         type: Component,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/angular",
-  "version": "14.2.7",
+  "version": "14.2.9",
   "description": "심플리즘 패키지 - Angular",
   "license": "Apache-2.0",
   "author": "심플리즘",
@@ -32,39 +32,39 @@
     }
   },
   "dependencies": {
-    "@angular/common": "^22.0.8",
-    "@angular/core": "^22.0.8",
-    "@angular/platform-browser": "^22.0.8",
-    "@angular/router": "^22.0.8",
-    "@angular/service-worker": "^22.0.8",
+    "@angular/common": "^22.1.0",
+    "@angular/core": "^22.1.0",
+    "@angular/platform-browser": "^22.1.0",
+    "@angular/router": "^22.1.0",
+    "@angular/service-worker": "^22.1.0",
     "@ng-icons/core": "^34.0.0",
     "@ng-icons/tabler-icons": "^34.0.0",
-    "@tiptap/core": "^3.29.0",
-    "@tiptap/extension-color": "^3.29.0",
-    "@tiptap/extension-document": "^3.29.0",
-    "@tiptap/extension-highlight": "^3.29.0",
-    "@tiptap/extension-image": "^3.29.0",
-    "@tiptap/extension-paragraph": "^3.29.0",
-    "@tiptap/extension-placeholder": "^3.29.0",
-    "@tiptap/extension-text": "^3.29.0",
-    "@tiptap/extension-text-align": "^3.29.0",
-    "@tiptap/extension-text-style": "^3.29.0",
-    "@tiptap/extension-underline": "^3.29.0",
-    "@tiptap/markdown": "^3.29.0",
-    "@tiptap/starter-kit": "^3.29.0",
+    "@tiptap/core": "^3.29.2",
+    "@tiptap/extension-color": "^3.29.2",
+    "@tiptap/extension-document": "^3.29.2",
+    "@tiptap/extension-highlight": "^3.29.2",
+    "@tiptap/extension-image": "^3.29.2",
+    "@tiptap/extension-paragraph": "^3.29.2",
+    "@tiptap/extension-placeholder": "^3.29.2",
+    "@tiptap/extension-text": "^3.29.2",
+    "@tiptap/extension-text-align": "^3.29.2",
+    "@tiptap/extension-text-style": "^3.29.2",
+    "@tiptap/extension-underline": "^3.29.2",
+    "@tiptap/markdown": "^3.29.2",
+    "@tiptap/starter-kit": "^3.29.2",
     "bwip-js": "^4.11.2",
     "echarts": "^6.1.0",
     "html-to-image": "^1.11.13",
     "jspdf": "^4.2.1",
     "rxjs": "^7.8.2",
     "tabbable": "^6.5.0",
-    "@simplysm/service-client": "14.2.7",
-    "@simplysm/core-browser": "14.2.7",
-    "@simplysm/core-common": "14.2.7",
-    "@simplysm/service-common": "14.2.7"
+    "@simplysm/core-browser": "14.2.9",
+    "@simplysm/service-client": "14.2.9",
+    "@simplysm/core-common": "14.2.9",
+    "@simplysm/service-common": "14.2.9"
   },
   "devDependencies": {
-    "@angular/compiler": "^22.0.8"
+    "@angular/compiler": "^22.1.0"
   },
   "scripts": {}
 }

package/src/core/modal/injectDragResize.ts

@@ -7,6 +7,68 @@ interface DragResizeOptions {
   onEnd: () => void;
 }
 
+type SizeStyleProp = "width" | "height" | "maxWidth" | "maxHeight";
+
+/** `auto`, `none` 등 길이가 아닌 값은 하한 없음(0)으로 본다. */
+function parseCssMinPx(value: string): number {
+  const parsed = parseFloat(value);
+  return Number.isNaN(parsed) ? 0 : parsed;
+}
+
+function shiftPercentSize(
+  dialogStyle: CSSStyleDeclaration,
+  prop: SizeStyleProp,
+  padPx: number,
+): void {
+  if (padPx === 0) return;
+
+  const value = dialogStyle[prop];
+  if (!value.includes("%")) return;
+
+  dialogStyle[prop] = `calc(${value} - ${padPx}px)`;
+}
+
+/**
+ * `._dialog` 는 평소 CSS 로 중앙 정렬(`position: relative` + `margin: 0 auto`)되어 있어
+ * `left`/`top` 이 "정상 배치 위치 대비 상대 offset" 으로 해석된다.
+ * 드래그, 리사이즈는 절대 좌표로 계산하므로 시작 시점에 절대 좌표계로 전환한다.
+ * 전환만으로는 위치, 크기가 변하지 않으며, 이미 전환된 요소에 다시 적용해도 결과가 같다.
+ */
+export function pinDialogAbsolute(dialogEl: HTMLElement): { left: number; top: number } {
+  const wasRelative = getComputedStyle(dialogEl).position === "relative";
+  const parentEl = dialogEl.offsetParent as HTMLElement | null;
+  const beforeRect = dialogEl.getBoundingClientRect();
+  const roundedLeft = dialogEl.offsetLeft;
+  const roundedTop = dialogEl.offsetTop;
+
+  dialogEl.style.position = "absolute";
+  dialogEl.style.margin = "0";
+  dialogEl.style.right = "auto";
+  dialogEl.style.bottom = "auto";
+  dialogEl.style.left = `${roundedLeft}px`;
+  dialogEl.style.top = `${roundedTop}px`;
+
+  if (wasRelative && parentEl != null) {
+    // 백분율 크기의 기준 박스가 부모 content box 에서 offsetParent padding box 로 바뀐다.
+    const parentStyle = getComputedStyle(parentEl);
+    const padX = parseFloat(parentStyle.paddingLeft) + parseFloat(parentStyle.paddingRight);
+    const padY = parseFloat(parentStyle.paddingTop) + parseFloat(parentStyle.paddingBottom);
+    shiftPercentSize(dialogEl.style, "width", padX);
+    shiftPercentSize(dialogEl.style, "maxWidth", padX);
+    shiftPercentSize(dialogEl.style, "height", padY);
+    shiftPercentSize(dialogEl.style, "maxHeight", padY);
+  }
+
+  // offsetLeft/offsetTop 은 정수로 반올림되므로, 전환 전후 실제 위치 차이만큼 되돌린다.
+  const afterRect = dialogEl.getBoundingClientRect();
+  const pinnedLeft = roundedLeft - (afterRect.left - beforeRect.left);
+  const pinnedTop = roundedTop - (afterRect.top - beforeRect.top);
+  dialogEl.style.left = `${pinnedLeft}px`;
+  dialogEl.style.top = `${pinnedTop}px`;
+
+  return { left: pinnedLeft, top: pinnedTop };
+}
+
 export function injectDragResize(opt: DragResizeOptions): {
   startDrag: (event: MouseEvent) => void;
   startResize: (event: MouseEvent, dir: string) => void;
@@ -26,6 +88,8 @@ export function injectDragResize(opt: DragResizeOptions): {
         startHeight: number;
         startLeft: number;
         startTop: number;
+        minWidth: number;
+        minHeight: number;
       }
     | undefined;
 
@@ -50,8 +114,8 @@ export function injectDragResize(opt: DragResizeOptions): {
 
     const dx = event.clientX - resizeState.startX;
     const dy = event.clientY - resizeState.startY;
-    const minW = opt.minWidthPx() ?? 0;
-    const minH = opt.minHeightPx() ?? 0;
+    const minW = resizeState.minWidth;
+    const minH = resizeState.minHeight;
 
     let newWidth = resizeState.startWidth;
     let newHeight = resizeState.startHeight;
@@ -105,25 +169,17 @@ export function injectDragResize(opt: DragResizeOptions): {
     }
   }
 
-  function getParentRect(dialogEl: HTMLElement): { left: number; top: number } {
-    return (dialogEl.offsetParent as HTMLElement | null)?.getBoundingClientRect() ?? {
-      left: 0,
-      top: 0,
-    };
-  }
-
   function startDrag(event: MouseEvent): void {
     const dialogEl = opt.getDialogEl();
     if (dialogEl == null) return;
 
-    const dialogRect = dialogEl.getBoundingClientRect();
-    const parentRect = getParentRect(dialogEl);
+    const pinned = pinDialogAbsolute(dialogEl);
 
     dragState = {
       startX: event.clientX,
       startY: event.clientY,
-      startLeft: dialogRect.left - parentRect.left,
-      startTop: dialogRect.top - parentRect.top,
+      startLeft: pinned.left,
+      startTop: pinned.top,
     };
     document.addEventListener("mousemove", onDocumentMouseMove);
     document.addEventListener("mouseup", onDocumentMouseUp);
@@ -133,8 +189,8 @@ export function injectDragResize(opt: DragResizeOptions): {
     const dialogEl = opt.getDialogEl();
     if (dialogEl == null) return;
 
-    const dialogRect = dialogEl.getBoundingClientRect();
-    const parentRect = getParentRect(dialogEl);
+    const pinned = pinDialogAbsolute(dialogEl);
+    const dialogStyle = getComputedStyle(dialogEl);
 
     resizeState = {
       dir,
@@ -142,8 +198,11 @@ export function injectDragResize(opt: DragResizeOptions): {
       startY: event.clientY,
       startWidth: dialogEl.offsetWidth,
       startHeight: dialogEl.offsetHeight,
-      startLeft: dialogRect.left - parentRect.left,
-      startTop: dialogRect.top - parentRect.top,
+      startLeft: pinned.left,
+      startTop: pinned.top,
+      // CSS 하한을 넘겨 줄이면 실제 크기는 안 줄고 반대쪽 변만 밀려나므로, 실제 제약을 하한으로 삼는다.
+      minWidth: Math.max(opt.minWidthPx() ?? 0, parseCssMinPx(dialogStyle.minWidth)),
+      minHeight: Math.max(opt.minHeightPx() ?? 0, parseCssMinPx(dialogStyle.minHeight)),
     };
     document.addEventListener("mousemove", onDocumentMouseMove);
     document.addEventListener("mouseup", onDocumentMouseUp);

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

@@ -14,10 +14,7 @@ import {
 } from "@angular/core";
 import { outputToObservable } from "@angular/core/rxjs-interop";
 import { Subscription } from "rxjs";
-import type {
-  DirectiveInputSignals,
-  WithOptional,
-} from "../directive-input-signals";
+import type { DirectiveInputSignals, WithOptional } from "../directive-input-signals";
 import { SdModal } from "./sd-modal";
 import { SdActivatedModalProvider } from "./sd-activated-modal.provider";
 import "@simplysm/core-browser";

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

@@ -18,7 +18,7 @@ import { tablerX } from "@ng-icons/tabler-icons";
 import { SdActivatedModalProvider } from "./sd-activated-modal.provider";
 import { SdSystemConfigProvider } from "../config/sd-system-config.provider";
 import { injectFocusTrap } from "./injectFocusTrap";
-import { injectDragResize } from "./injectDragResize";
+import { injectDragResize, pinDialogAbsolute } from "./injectDragResize";
 import { SdAnchor } from "../../controls/button/sd-anchor";
 import { SdResizeDirective, type SdResizeEvent } from "../events/sd-resize";
 import "@simplysm/core-browser";
@@ -49,6 +49,7 @@ import "@simplysm/core-browser";
     <div
       class="_dialog"
       tabindex="-1"
+      (mousedown)="onDialogMouseDown()"
       (keydown)="onDialogKeydown($event)"
       (focus)="onDialogFocus()"
       (sdResize)="onDialogResize($event)"
@@ -368,6 +369,10 @@ export class SdModal {
     onEnd: () => void this._saveConfig().catch((err) => this._errorHandler.handleError(err)),
   });
 
+  /** 화면 넘침 클램프로 덮기 직전의 크기. 클램프 중이 아니면 undefined. */
+  private _clampedWidth: string | undefined;
+  private _clampedHeight: string | undefined;
+
   constructor() {
     // data-sd-init: 첫 렌더 후 설정하여 CSS transition 트리거 허용
     afterNextRender(() => {
@@ -391,6 +396,7 @@ export class SdModal {
       } else {
         dialogEl.style.height = "";
       }
+      this._forgetClampedSize();
     });
 
     // key 기반 설정 복원
@@ -404,9 +410,15 @@ export class SdModal {
 
   onResizeMouseDown(event: MouseEvent, dir: string): void {
     event.preventDefault();
+    // 사용자가 직접 정하는 크기가 자동 클램프 이전 크기보다 우선한다.
+    this._forgetClampedSize();
     this._dragResize.startResize(event, dir);
   }
 
+  onDialogMouseDown(): void {
+    this._bringToFront();
+  }
+
   onHeaderMouseDown(event: MouseEvent): void {
     if (!this.movable()) return;
     if ((event.target as HTMLElement).closest("button, sd-anchor") != null) return;
@@ -449,12 +461,20 @@ export class SdModal {
   onWindowResize(): void {
     const dialogEl = this._getDialogEl();
     if (dialogEl == null) return;
+    // 위치를 잡지 않은 모달은 CSS 중앙 정렬이 창 크기를 따라가므로 보정 대상이 아니다.
+    if (dialogEl.style.left === "" && dialogEl.style.top === "") return;
+    this._clampIntoHost(dialogEl);
+  }
+
+  private _clampIntoHost(dialogEl: HTMLElement): void {
     const hostEl = this._elRef.nativeElement;
-    if (dialogEl.offsetLeft > hostEl.offsetWidth - 100) {
-      dialogEl.style.left = hostEl.offsetWidth - 100 + "px";
+    const maxLeft = Math.max(0, hostEl.offsetWidth - 100);
+    if (dialogEl.offsetLeft > maxLeft) {
+      dialogEl.style.left = `${maxLeft}px`;
     }
-    if (dialogEl.offsetTop > hostEl.offsetHeight - 100) {
-      dialogEl.style.top = hostEl.offsetHeight - 100 + "px";
+    const maxTop = Math.max(0, hostEl.offsetHeight - 100);
+    if (dialogEl.offsetTop > maxTop) {
+      dialogEl.style.top = `${maxTop}px`;
     }
   }
 
@@ -482,23 +502,50 @@ export class SdModal {
     hostEl.style.zIndex = String(maxZ + 1);
   }
 
+  private _forgetClampedSize(): void {
+    this._clampedWidth = undefined;
+    this._clampedHeight = undefined;
+  }
+
   private _calcHeight(): void {
     const dialogEl = this._getDialogEl();
     if (dialogEl == null) return;
-    const style = getComputedStyle(this._elRef.nativeElement);
-    const paddingTop = style.paddingTop === "" ? 0 : parseInt(style.paddingTop, 10) || 0;
-    if (dialogEl.offsetHeight > this._elRef.nativeElement.offsetHeight - paddingTop) {
+
+    // 클램프 중이면 dialog 높이가 호스트에 맞춰져 있어 실제 필요 높이를 알 수 없다. 먼저 되돌려 잰다.
+    if (this._clampedHeight != null) {
+      dialogEl.style.height = this._clampedHeight;
+      dialogEl.style.maxHeight = "";
+    }
+
+    const hostEl = this._elRef.nativeElement;
+    const paddingTop = parseFloat(getComputedStyle(hostEl).paddingTop) || 0;
+
+    if (dialogEl.offsetHeight > hostEl.offsetHeight - paddingTop) {
+      this._clampedHeight ??= dialogEl.style.height;
       dialogEl.style.maxHeight = "100%";
       dialogEl.style.height = "100%";
+    } else {
+      this._clampedHeight = undefined;
     }
   }
 
   private _calcWidth(): void {
     const dialogEl = this._getDialogEl();
     if (dialogEl == null) return;
-    if (dialogEl.offsetWidth > this._elRef.nativeElement.offsetWidth) {
+
+    if (this._clampedWidth != null) {
+      dialogEl.style.width = this._clampedWidth;
+      dialogEl.style.maxWidth = "";
+    }
+
+    const hostEl = this._elRef.nativeElement;
+
+    if (dialogEl.offsetWidth > hostEl.offsetWidth) {
+      this._clampedWidth ??= dialogEl.style.width;
       dialogEl.style.maxWidth = "100%";
       dialogEl.style.width = "100%";
+    } else {
+      this._clampedWidth = undefined;
     }
   }
 
@@ -513,9 +560,13 @@ export class SdModal {
     const dialogEl = this._getDialogEl();
     if (dialogEl == null) return;
 
+    // 클램프 중이면 화면에 맞춘 값이 아니라 그 직전 크기를 저장해야 다시 열 때 원래 크기로 뜬다.
+    const savedWidth = this._clampedWidth ?? dialogEl.style.width;
+    const savedHeight = this._clampedHeight ?? dialogEl.style.height;
+
     const config: Record<string, string> = {};
-    if (dialogEl.style.width !== "") config["width"] = dialogEl.style.width;
-    if (dialogEl.style.height !== "") config["height"] = dialogEl.style.height;
+    if (savedWidth !== "") config["width"] = savedWidth;
+    if (savedHeight !== "") config["height"] = savedHeight;
     if (dialogEl.style.left !== "") config["left"] = dialogEl.style.left;
     if (dialogEl.style.top !== "") config["top"] = dialogEl.style.top;
 
@@ -526,7 +577,8 @@ export class SdModal {
     if (this._sdSystemConfig == null) return;
 
     const config = (await this._sdSystemConfig.getAsync(`sd-modal.${k}`)) as
-      Record<string, string | undefined> | undefined;
+      | Record<string, string | undefined>
+      | undefined;
     if (config == null) return;
 
     const dialogEl = this._getDialogEl();
@@ -534,7 +586,13 @@ export class SdModal {
 
     if (config["width"] != null) dialogEl.style.width = config["width"];
     if (config["height"] != null) dialogEl.style.height = config["height"];
-    if (config["left"] != null) dialogEl.style.left = config["left"];
-    if (config["top"] != null) dialogEl.style.top = config["top"];
+    this._forgetClampedSize();
+
+    if (config["left"] != null || config["top"] != null) {
+      pinDialogAbsolute(dialogEl);
+      if (config["left"] != null) dialogEl.style.left = config["left"];
+      if (config["top"] != null) dialogEl.style.top = config["top"];
+      this._clampIntoHost(dialogEl);
+    }
   }
 }