@simplysm/angular 14.1.20 → 14.2.1

package/dist/controls/pagination/sd-pagination.js

@@ -14,7 +14,7 @@ function SdPagination_For_5_Template(rf, ctx) { if (rf & 1) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("text-decoration", page_r2 === ctx_r2.currentPage() + 1 ? "underline" : "");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(page_r2);
+    i0.ɵɵtextInterpolate1(" ", page_r2, " ");
 } }
 export class SdPagination {
     icons = { tablerChevronsLeft, tablerChevronLeft, tablerChevronRight, tablerChevronsRight };
@@ -115,7 +115,7 @@ export class SdPagination {
             i0.ɵɵproperty("disabled", !ctx.hasNext());
             i0.ɵɵadvance();
             i0.ɵɵproperty("svg", ctx.icons.tablerChevronsRight);
-        } }, dependencies: [SdAnchor, NgIcon], styles: ["sd-pagination > sd-anchor {\n  display: inline-block;\n  padding: var(--gap-xxs) var(--gap-xs);\n}"], encapsulation: 2 });
+        } }, dependencies: [SdAnchor, NgIcon], styles: ["sd-pagination > sd-anchor {\n  display: inline-block;\n  padding: var(--sd-gap-xxs) var(--sd-gap-xs);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdPagination, [{
         type: Component,
@@ -132,7 +132,9 @@ export class SdPagination {
         class="page-anchor"
         [style.text-decoration]="page === currentPage() + 1 ? 'underline' : ''"
         (click)="goToPage(page - 1)"
-      >{{ page }}</sd-anchor>
+      >
+        {{ page }}
+      </sd-anchor>
     }
 
     <sd-anchor class="nav-next-group" [disabled]="!hasNext()" (click)="goToNextGroup()">
@@ -143,6 +145,6 @@ export class SdPagination {
     </sd-anchor>
   `, host: {
                     class: "flex-row gap-xs",
-                }, styles: ["sd-pagination > sd-anchor {\n  display: inline-block;\n  padding: var(--gap-xxs) var(--gap-xs);\n}"] }]
+                }, styles: ["sd-pagination > sd-anchor {\n  display: inline-block;\n  padding: var(--sd-gap-xxs) var(--sd-gap-xs);\n}"] }]
     }], null, { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], totalPageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPageCount", required: false }] }], visiblePageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "visiblePageCount", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdPagination, { className: "SdPagination", filePath: "packages/angular/src/controls/pagination/sd-pagination.ts", lineNumber: 62 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdPagination, { className: "SdPagination", filePath: "packages/angular/src/controls/pagination/sd-pagination.ts", lineNumber: 64 }); })();

package/dist/controls/select/sd-select-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-select-button.d.ts","sourceRoot":"","sources":["../../../src/controls/select/sd-select-button.ts"],"names":[],"mappings":";AAOA,qBA4Ba,cAAc;;yCAAd,cAAc;2CAAd,cAAc;CAI1B"}
+{"version":3,"file":"sd-select-button.d.ts","sourceRoot":"","sources":["../../../src/controls/select/sd-select-button.ts"],"names":[],"mappings":";AAGA,qBA4Ba,cAAc;;yCAAd,cAAc;2CAAd,cAAc;CAI1B"}

package/dist/controls/select/sd-select-button.js

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, } from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from "@angular/core";
 import { setupRipple } from "../../core/ripple/setupRipple";
 import * as i0 from "@angular/core";
 const _c0 = ["*"];
@@ -10,12 +10,12 @@ export class SdSelectButton {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSelectButton, selectors: [["sd-select-button"]], ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdSelectButton_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["sd-select-button {\n  display: block;\n  background: var(--control-color);\n  font-weight: bold;\n  cursor: pointer;\n  color: var(--theme-primary-default);\n  transition: background var(--animation-duration) linear;\n}\nsd-select-button:hover {\n  color: var(--theme-primary-darker);\n  background: var(--theme-gray-lightest);\n}"], encapsulation: 2 });
+        } }, styles: ["sd-select-button {\n  display: block;\n  background-color: var(--sd-bg-control);\n  font-weight: bold;\n  cursor: pointer;\n  color: var(--sd-tx-primary);\n  transition: background var(--sd-animation-duration) linear;\n}\nsd-select-button:hover {\n  color: var(--sd-tx-primary-hover);\n  background-color: var(--sd-bg-state-hover);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSelectButton, [{
         type: Component,
         args: [{ selector: "sd-select-button", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: `
     <ng-content />
-  `, host: {}, styles: ["sd-select-button {\n  display: block;\n  background: var(--control-color);\n  font-weight: bold;\n  cursor: pointer;\n  color: var(--theme-primary-default);\n  transition: background var(--animation-duration) linear;\n}\nsd-select-button:hover {\n  color: var(--theme-primary-darker);\n  background: var(--theme-gray-lightest);\n}"] }]
+  `, host: {}, styles: ["sd-select-button {\n  display: block;\n  background-color: var(--sd-bg-control);\n  font-weight: bold;\n  cursor: pointer;\n  color: var(--sd-tx-primary);\n  transition: background var(--sd-animation-duration) linear;\n}\nsd-select-button:hover {\n  color: var(--sd-tx-primary-hover);\n  background-color: var(--sd-bg-state-hover);\n}"] }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelectButton, { className: "SdSelectButton", filePath: "packages/angular/src/controls/select/sd-select-button.ts", lineNumber: 36 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelectButton, { className: "SdSelectButton", filePath: "packages/angular/src/controls/select/sd-select-button.ts", lineNumber: 32 }); })();

package/dist/controls/select/sd-select-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-select-item.d.ts","sourceRoot":"","sources":["../../../src/controls/select/sd-select-item.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;;AAIvC,qBAoEa,YAAY,CAAC,CAAC;IACzB,SAAS,CAAC,QAAQ,CAAC,cAAc,mBAE/B;IACF,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsB;IAElD,KAAK,qDAAmC;IACxC,QAAQ,qEAAiD;IACzD,MAAM,qEAAiD;IAEvD,WAAW,iDAAc;IAEzB,UAAU,0CAQP;;IAkBH,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAOhC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;yCA9C1B,YAAY;2CAAZ,YAAY;CAiExB"}
+{"version":3,"file":"sd-select-item.d.ts","sourceRoot":"","sources":["../../../src/controls/select/sd-select-item.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;;AAIvC,qBAqEa,YAAY,CAAC,CAAC;IACzB,SAAS,CAAC,QAAQ,CAAC,cAAc,mBAAwD;IACzF,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsB;IAElD,KAAK,qDAAmC;IACxC,QAAQ,qEAAiD;IACzD,MAAM,qEAAiD;IAEvD,WAAW,iDAAc;IAEzB,UAAU,0CAQP;;IAkBH,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAOhC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;yCA5C1B,YAAY;2CAAZ,YAAY;CA+DxB"}

package/dist/controls/select/sd-select-item.js

@@ -87,7 +87,7 @@ export class SdSelectItem {
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵconditional(ctx._parentControl.selectMode() === "multi" ? 0 : -1);
-        } }, dependencies: [SdCheckbox, SdGap], styles: ["sd-select-item {\n  display: block;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  font-family: var(--font-family-field);\n  transition: background var(--animation-duration) ease-in;\n  background: var(--control-color);\n}\nsd-select-item:hover {\n  transition: background var(--animation-duration) ease-out;\n  background: rgba(0, 0, 0, 0.07);\n}\nsd-select-item:focus {\n  outline: none;\n  transition: background var(--animation-duration) ease-out;\n  background: rgba(0, 0, 0, 0.07);\n}\nsd-select-item[data-sd-selected=true] {\n  color: var(--theme-primary-default);\n  font-weight: bold;\n  background: rgba(0, 0, 0, 0.07);\n}\nsd-select-item[data-sd-disabled=true] {\n  background: var(--theme-gray-default);\n  opacity: 0.3;\n  cursor: default;\n  pointer-events: none;\n}\nsd-select-item[data-sd-hidden=true] {\n  display: none;\n}"], encapsulation: 2 });
+        } }, dependencies: [SdCheckbox, SdGap], styles: ["sd-select-item {\n  display: block;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  cursor: pointer;\n  font-family: var(--sd-font-family-field);\n  transition: background var(--sd-animation-duration) ease-in;\n  background-color: var(--sd-bg-overlay);\n}\nsd-select-item:hover {\n  transition: background var(--sd-animation-duration) ease-out;\n  background-color: var(--sd-bg-state-hover);\n}\nsd-select-item:focus {\n  outline: none;\n  transition: background var(--sd-animation-duration) ease-out;\n  background-color: var(--sd-bg-state-hover);\n}\nsd-select-item[data-sd-selected=true] {\n  color: var(--sd-tx-primary);\n  font-weight: bold;\n  background-color: var(--sd-bg-state-selected);\n}\nsd-select-item[data-sd-disabled=true] {\n  background-color: var(--sd-bg-disabled);\n  color: var(--sd-tx-disabled);\n  cursor: default;\n  pointer-events: none;\n}\nsd-select-item[data-sd-hidden=true] {\n  display: none;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSelectItem, [{
         type: Component,
@@ -108,6 +108,6 @@ export class SdSelectItem {
                     "[attr.data-sd-hidden]": "hidden()",
                     "(click)": "onClick($event)",
                     "(keydown)": "onKeydown($event)",
-                }, styles: ["sd-select-item {\n  display: block;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  font-family: var(--font-family-field);\n  transition: background var(--animation-duration) ease-in;\n  background: var(--control-color);\n}\nsd-select-item:hover {\n  transition: background var(--animation-duration) ease-out;\n  background: rgba(0, 0, 0, 0.07);\n}\nsd-select-item:focus {\n  outline: none;\n  transition: background var(--animation-duration) ease-out;\n  background: rgba(0, 0, 0, 0.07);\n}\nsd-select-item[data-sd-selected=true] {\n  color: var(--theme-primary-default);\n  font-weight: bold;\n  background: rgba(0, 0, 0, 0.07);\n}\nsd-select-item[data-sd-disabled=true] {\n  background: var(--theme-gray-default);\n  opacity: 0.3;\n  cursor: default;\n  pointer-events: none;\n}\nsd-select-item[data-sd-hidden=true] {\n  display: none;\n}"] }]
+                }, styles: ["sd-select-item {\n  display: block;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  cursor: pointer;\n  font-family: var(--sd-font-family-field);\n  transition: background var(--sd-animation-duration) ease-in;\n  background-color: var(--sd-bg-overlay);\n}\nsd-select-item:hover {\n  transition: background var(--sd-animation-duration) ease-out;\n  background-color: var(--sd-bg-state-hover);\n}\nsd-select-item:focus {\n  outline: none;\n  transition: background var(--sd-animation-duration) ease-out;\n  background-color: var(--sd-bg-state-hover);\n}\nsd-select-item[data-sd-selected=true] {\n  color: var(--sd-tx-primary);\n  font-weight: bold;\n  background-color: var(--sd-bg-state-selected);\n}\nsd-select-item[data-sd-disabled=true] {\n  background-color: var(--sd-bg-disabled);\n  color: var(--sd-tx-disabled);\n  cursor: default;\n  pointer-events: none;\n}\nsd-select-item[data-sd-hidden=true] {\n  display: none;\n}"] }]
     }], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelectItem, { className: "SdSelectItem", filePath: "packages/angular/src/controls/select/sd-select-item.ts", lineNumber: 87 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelectItem, { className: "SdSelectItem", filePath: "packages/angular/src/controls/select/sd-select-item.ts", lineNumber: 88 }); })();

package/dist/controls/select/sd-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-select.d.ts","sourceRoot":"","sources":["../../../src/controls/select/sd-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAYL,WAAW,EAGZ,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI1D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;;AAUhD,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;IAC/B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,qBA6Na,QAAQ,CAAC,CAAC,SAAS,QAAQ,GAAG,OAAO,EAAE,CAAC;IACnD,UAAU,yCAAwB;IAClC,KAAK,2EAAoC;IACzC,WAAW,0DAAmB;IAC9B,QAAQ,qEAAiD;IACzD,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,QAAQ,qEAAiD;IAEzD,aAAa,qEAAiD;IAC9D,8BAA8B,8DAAuB;IAErD,KAAK,uDAAgB;IACrB,SAAS,6CAAgB,CAAC,SAAS,MAAM,KAAK,OAAO,EAAkB;IACvE,aAAa,8CAAgB,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,eAAI;IAEtD,YAAY,0DAAmB;IAC/B,YAAY,0DAAmB;IAE/B,YAAY,+CAAgB;IAE5B,SAAS,CAAC,QAAQ,CAAC,eAAe,iUAAmB;IAErD,aAAa,+DAAiC;IAC9C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAkC;IACnE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAG7B;IAEF,UAAU,gEAAgD;IAC1D,UAAU,gEAAgD;IAC1D,UAAU,+DAAyD;IAEnE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAwB;IAEnD,wBAAwB,uDAwBrB;IAEH,UAAU;cAIY,CAAC;eAAS,MAAM;eAAS,MAAM;SAelD;;IAmDH,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,SAAS,GAAG,IAAI;IAO1C,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,SAAS,GAAG,IAAI;IAI1C,OAAO,CAAC,YAAY;IAepB,WAAW,IAAI,IAAI;IAQnB,aAAa,IAAI,IAAI;IAIrB,aAAa,IAAI,IAAI;IAIrB,YAAY,IAAI,IAAI;yCA/KT,QAAQ;2CAAR,QAAQ;CAmLpB"}
+{"version":3,"file":"sd-select.d.ts","sourceRoot":"","sources":["../../../src/controls/select/sd-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAYL,WAAW,EAGZ,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI1D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;;AAUhD,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;IAC/B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,qBA4Na,QAAQ,CAAC,CAAC,SAAS,QAAQ,GAAG,OAAO,EAAE,CAAC;IACnD,UAAU,yCAAwB;IAClC,KAAK,2EAAoC;IACzC,WAAW,0DAAmB;IAC9B,QAAQ,qEAAiD;IACzD,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,QAAQ,qEAAiD;IAEzD,aAAa,qEAAiD;IAC9D,8BAA8B,8DAAuB;IAErD,KAAK,uDAAgB;IACrB,SAAS,6CAAgB,CAAC,SAAS,MAAM,KAAK,OAAO,EAAkB;IACvE,aAAa,8CAAgB,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,eAAI;IAEtD,YAAY,0DAAmB;IAC/B,YAAY,0DAAmB;IAE/B,YAAY,+CAAgB;IAE5B,SAAS,CAAC,QAAQ,CAAC,eAAe,iUAAmB;IAErD,aAAa,+DAAiC;IAC9C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAkC;IACnE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAG7B;IAEF,UAAU,gEAAgD;IAC1D,UAAU,gEAAgD;IAC1D,UAAU,+DAAyD;IAEnE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAwB;IAEnD,wBAAwB,uDAwBrB;IAEH,UAAU;cAIY,CAAC;eAAS,MAAM;eAAS,MAAM;SAelD;;IAmDH,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,SAAS,GAAG,IAAI;IAO1C,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,SAAS,GAAG,IAAI;IAI1C,OAAO,CAAC,YAAY;IAepB,WAAW,IAAI,IAAI;IAQnB,aAAa,IAAI,IAAI;IAIrB,aAAa,IAAI,IAAI;IAIrB,YAAY,IAAI,IAAI;yCA/KT,QAAQ;2CAAR,QAAQ;CAmLpB"}

package/dist/controls/select/sd-select.js

@@ -330,25 +330,11 @@ export class SdSelect {
             i0.ɵɵconditional(ctx._beforeTpl() ? 12 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional((tmp_12_0 = ctx._itemOfTpl()) ? 13 : 14, tmp_12_0);
-        } }, dependencies: [SdDropdown,
-            SdDropdownPopup,
-            SdAnchor,
-            SdGap,
-            NgTemplateOutlet,
-            SdRipple,
-            NgIcon], styles: ["sd-select {\n  display: block;\n  position: relative;\n  width: 100%;\n  min-width: 10em;\n}\nsd-select > sd-dropdown {\n  display: flex;\n  overflow: hidden;\n  border: 1px solid var(--border-color-light);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-select > sd-dropdown:focus, sd-select > sd-dropdown:focus-within {\n  border-color: var(--theme-primary-default);\n}\nsd-select > sd-dropdown > ._sd-select-control {\n  display: flex;\n  position: relative;\n  gap: var(--gap-default);\n  flex-grow: 1;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  font-family: var(--font-family-field);\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-content {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n  opacity: 0.3;\n}\nsd-select > sd-dropdown > ._sd-select-control:hover > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:focus > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:active > ._sd-select-control-icon {\n  opacity: 1;\n}\nsd-select > sd-dropdown > sd-select-button {\n  padding: var(--gap-sm);\n  border-left: 1px solid var(--theme-gray-lightest);\n}\nsd-select > sd-dropdown > sd-select-button:last-of-type {\n  border-top-right-radius: var(--border-radius-default);\n  border-bottom-right-radius: var(--border-radius-default);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown {\n  background: var(--theme-gray-lightest);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n  color: var(--text-trans-light);\n  cursor: default;\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n  display: none;\n}\nsd-select[data-sd-inline=true] {\n  display: inline-block;\n  width: auto;\n  vertical-align: top;\n}\nsd-select[data-sd-size=sm] > sd-dropdown > ._sd-select-control {\n  padding: var(--gap-xs) var(--gap-sm);\n  gap: var(--gap-sm);\n}\nsd-select[data-sd-size=sm] > sd-dropdown > sd-select-button {\n  padding: var(--gap-xs);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > ._sd-select-control {\n  padding: var(--gap-default) var(--gap-lg);\n  gap: var(--gap-lg);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > sd-select-button {\n  padding: var(--gap-default);\n}\nsd-select[data-sd-inset=true] {\n  min-width: auto;\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown {\n  border: none;\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown > sd-select-button {\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus, sd-select[data-sd-inset=true] > sd-dropdown:focus-within {\n  outline: 1px solid var(--theme-primary-default);\n  outline-offset: -1px;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus > sd-select-button, sd-select[data-sd-inset=true] > sd-dropdown:focus-within > sd-select-button {\n  outline: 1px solid var(--theme-primary-default);\n  outline-offset: -1px;\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown {\n  background: var(--control-color);\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n  color: var(--text-trans-default);\n}\n\n._sd-select-all-bar {\n  display: flex;\n  padding: var(--gap-sm) var(--gap-default);\n  border-bottom: 1px solid var(--border-color-light);\n}"], encapsulation: 2 });
+        } }, dependencies: [SdDropdown, SdDropdownPopup, SdAnchor, SdGap, NgTemplateOutlet, SdRipple, NgIcon], styles: ["sd-select {\n  display: block;\n  position: relative;\n  width: 100%;\n  min-width: 10em;\n}\nsd-select > sd-dropdown {\n  display: flex;\n  overflow: hidden;\n  border: 1px solid var(--sd-bd-field);\n  border-radius: var(--sd-radius-default);\n  background-color: var(--sd-bg-field);\n}\nsd-select > sd-dropdown:focus, sd-select > sd-dropdown:focus-within {\n  border-color: var(--sd-focus-ring-color);\n}\nsd-select > sd-dropdown > ._sd-select-control {\n  display: flex;\n  position: relative;\n  gap: var(--sd-gap-default);\n  flex-grow: 1;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  cursor: pointer;\n  font-family: var(--sd-font-family-field);\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-content {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n  opacity: 0.3;\n}\nsd-select > sd-dropdown > ._sd-select-control:hover > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:focus > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:active > ._sd-select-control-icon {\n  opacity: 1;\n}\nsd-select > sd-dropdown > sd-select-button {\n  padding: var(--sd-gap-sm);\n  border-left: 1px solid var(--sd-bd-hairline);\n}\nsd-select > sd-dropdown > sd-select-button:last-of-type {\n  border-top-right-radius: var(--sd-radius-default);\n  border-bottom-right-radius: var(--sd-radius-default);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown {\n  background-color: var(--sd-bg-disabled);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n  color: var(--sd-tx-disabled);\n  cursor: default;\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n  display: none;\n}\nsd-select[data-sd-inline=true] {\n  display: inline-block;\n  width: auto;\n  vertical-align: top;\n}\nsd-select[data-sd-size=sm] > sd-dropdown > ._sd-select-control {\n  padding: var(--sd-gap-xs) var(--sd-gap-sm);\n  gap: var(--sd-gap-sm);\n}\nsd-select[data-sd-size=sm] > sd-dropdown > sd-select-button {\n  padding: var(--sd-gap-xs);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > ._sd-select-control {\n  padding: var(--sd-gap-default) var(--sd-gap-lg);\n  gap: var(--sd-gap-lg);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > sd-select-button {\n  padding: var(--sd-gap-default);\n}\nsd-select[data-sd-inset=true] {\n  min-width: auto;\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown {\n  border: none;\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown > sd-select-button {\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus, sd-select[data-sd-inset=true] > sd-dropdown:focus-within {\n  outline: 1px solid var(--sd-focus-ring-color);\n  outline-offset: -1px;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus > sd-select-button, sd-select[data-sd-inset=true] > sd-dropdown:focus-within > sd-select-button {\n  outline: 1px solid var(--sd-focus-ring-color);\n  outline-offset: -1px;\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown {\n  background-color: var(--sd-bg-control);\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n  color: var(--sd-tx-default);\n}\n\n._sd-select-all-bar {\n  display: flex;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  border-bottom: 1px solid var(--sd-bd-default);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSelect, [{
         type: Component,
-        args: [{ selector: "sd-select", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
-                    SdDropdown,
-                    SdDropdownPopup,
-                    SdAnchor,
-                    SdGap,
-                    NgTemplateOutlet,
-                    SdRipple,
-                    NgIcon,
-                ], template: `
+        args: [{ selector: "sd-select", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdDropdown, SdDropdownPopup, SdAnchor, SdGap, NgTemplateOutlet, SdRipple, NgIcon], template: `
     <sd-dropdown [disabled]="disabled()" [(open)]="dropdownOpen">
       <div
         class="_sd-select-control"
@@ -392,7 +378,12 @@ export class SdSelect {
           @for (item of _flatItems(); track trackByFn()(item.data, item.index)) {
             <ng-template
               [ngTemplateOutlet]="tpl"
-              [ngTemplateOutletContext]="{ $implicit: item.data, item: item.data, index: item.index, depth: item.depth }"
+              [ngTemplateOutletContext]="{
+                $implicit: item.data,
+                item: item.data,
+                index: item.index,
+                depth: item.depth,
+              }"
             />
           }
         } @else {
@@ -405,6 +396,6 @@ export class SdSelect {
                     "[attr.data-sd-inline]": "inline()",
                     "[attr.data-sd-inset]": "inset()",
                     "[attr.data-sd-disabled]": "disabled()",
-                }, styles: ["sd-select {\n  display: block;\n  position: relative;\n  width: 100%;\n  min-width: 10em;\n}\nsd-select > sd-dropdown {\n  display: flex;\n  overflow: hidden;\n  border: 1px solid var(--border-color-light);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-select > sd-dropdown:focus, sd-select > sd-dropdown:focus-within {\n  border-color: var(--theme-primary-default);\n}\nsd-select > sd-dropdown > ._sd-select-control {\n  display: flex;\n  position: relative;\n  gap: var(--gap-default);\n  flex-grow: 1;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  font-family: var(--font-family-field);\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-content {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n  opacity: 0.3;\n}\nsd-select > sd-dropdown > ._sd-select-control:hover > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:focus > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:active > ._sd-select-control-icon {\n  opacity: 1;\n}\nsd-select > sd-dropdown > sd-select-button {\n  padding: var(--gap-sm);\n  border-left: 1px solid var(--theme-gray-lightest);\n}\nsd-select > sd-dropdown > sd-select-button:last-of-type {\n  border-top-right-radius: var(--border-radius-default);\n  border-bottom-right-radius: var(--border-radius-default);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown {\n  background: var(--theme-gray-lightest);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n  color: var(--text-trans-light);\n  cursor: default;\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n  display: none;\n}\nsd-select[data-sd-inline=true] {\n  display: inline-block;\n  width: auto;\n  vertical-align: top;\n}\nsd-select[data-sd-size=sm] > sd-dropdown > ._sd-select-control {\n  padding: var(--gap-xs) var(--gap-sm);\n  gap: var(--gap-sm);\n}\nsd-select[data-sd-size=sm] > sd-dropdown > sd-select-button {\n  padding: var(--gap-xs);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > ._sd-select-control {\n  padding: var(--gap-default) var(--gap-lg);\n  gap: var(--gap-lg);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > sd-select-button {\n  padding: var(--gap-default);\n}\nsd-select[data-sd-inset=true] {\n  min-width: auto;\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown {\n  border: none;\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown > sd-select-button {\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus, sd-select[data-sd-inset=true] > sd-dropdown:focus-within {\n  outline: 1px solid var(--theme-primary-default);\n  outline-offset: -1px;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus > sd-select-button, sd-select[data-sd-inset=true] > sd-dropdown:focus-within > sd-select-button {\n  outline: 1px solid var(--theme-primary-default);\n  outline-offset: -1px;\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown {\n  background: var(--control-color);\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n  color: var(--text-trans-default);\n}\n\n._sd-select-all-bar {\n  display: flex;\n  padding: var(--gap-sm) var(--gap-default);\n  border-bottom: 1px solid var(--border-color-light);\n}"] }]
+                }, styles: ["sd-select {\n  display: block;\n  position: relative;\n  width: 100%;\n  min-width: 10em;\n}\nsd-select > sd-dropdown {\n  display: flex;\n  overflow: hidden;\n  border: 1px solid var(--sd-bd-field);\n  border-radius: var(--sd-radius-default);\n  background-color: var(--sd-bg-field);\n}\nsd-select > sd-dropdown:focus, sd-select > sd-dropdown:focus-within {\n  border-color: var(--sd-focus-ring-color);\n}\nsd-select > sd-dropdown > ._sd-select-control {\n  display: flex;\n  position: relative;\n  gap: var(--sd-gap-default);\n  flex-grow: 1;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  cursor: pointer;\n  font-family: var(--sd-font-family-field);\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-content {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n  opacity: 0.3;\n}\nsd-select > sd-dropdown > ._sd-select-control:hover > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:focus > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:active > ._sd-select-control-icon {\n  opacity: 1;\n}\nsd-select > sd-dropdown > sd-select-button {\n  padding: var(--sd-gap-sm);\n  border-left: 1px solid var(--sd-bd-hairline);\n}\nsd-select > sd-dropdown > sd-select-button:last-of-type {\n  border-top-right-radius: var(--sd-radius-default);\n  border-bottom-right-radius: var(--sd-radius-default);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown {\n  background-color: var(--sd-bg-disabled);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n  color: var(--sd-tx-disabled);\n  cursor: default;\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n  display: none;\n}\nsd-select[data-sd-inline=true] {\n  display: inline-block;\n  width: auto;\n  vertical-align: top;\n}\nsd-select[data-sd-size=sm] > sd-dropdown > ._sd-select-control {\n  padding: var(--sd-gap-xs) var(--sd-gap-sm);\n  gap: var(--sd-gap-sm);\n}\nsd-select[data-sd-size=sm] > sd-dropdown > sd-select-button {\n  padding: var(--sd-gap-xs);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > ._sd-select-control {\n  padding: var(--sd-gap-default) var(--sd-gap-lg);\n  gap: var(--sd-gap-lg);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > sd-select-button {\n  padding: var(--sd-gap-default);\n}\nsd-select[data-sd-inset=true] {\n  min-width: auto;\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown {\n  border: none;\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown > sd-select-button {\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus, sd-select[data-sd-inset=true] > sd-dropdown:focus-within {\n  outline: 1px solid var(--sd-focus-ring-color);\n  outline-offset: -1px;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus > sd-select-button, sd-select[data-sd-inset=true] > sd-dropdown:focus-within > sd-select-button {\n  outline: 1px solid var(--sd-focus-ring-color);\n  outline-offset: -1px;\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown {\n  background-color: var(--sd-bg-control);\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n  color: var(--sd-tx-default);\n}\n\n._sd-select-all-bar {\n  display: flex;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  border-bottom: 1px solid var(--sd-bd-default);\n}"] }]
     }], () => [], { selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hideSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSelectAll", required: false }] }], multiSelectionDisplayDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelectionDisplayDirection", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], getChildrenFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getChildrenFn", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], dropdownOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownOpen", required: false }] }, { type: i0.Output, args: ["dropdownOpenChange"] }], _itemControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdSelectItem), { isSignal: true }] }], _dropdownControl: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdDropdown), { isSignal: true }] }], _dropdownElRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdDropdown), { ...{ read: ElementRef }, isSignal: true }] }], _headerTpl: [{ type: i0.ContentChild, args: ["headerTpl", { isSignal: true }] }], _beforeTpl: [{ type: i0.ContentChild, args: ["beforeTpl", { isSignal: true }] }], _itemOfTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdItemOfTemplate), { ...{ read: TemplateRef }, isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelect, { className: "SdSelect", filePath: "packages/angular/src/controls/select/sd-select.ts", lineNumber: 258 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelect, { className: "SdSelect", filePath: "packages/angular/src/controls/select/sd-select.ts", lineNumber: 257 }); })();

package/dist/controls/tab/sd-tab-item.js

@@ -19,7 +19,7 @@ export class SdTabItem {
         } }, inputs: { value: [1, "value"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdTabItem_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["sd-tab-item {\n  display: inline-block;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  margin-bottom: -2px;\n  border-bottom: 2px solid transparent !important;\n  font-weight: bold;\n  color: var(--theme-gray-default);\n}\nsd-tab-item[data-sd-selected=true] {\n  border-bottom: 3px solid var(--theme-primary-default) !important;\n  color: var(--theme-primary-default);\n}"], encapsulation: 2 });
+        } }, styles: ["sd-tab-item {\n  display: inline-block;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  cursor: pointer;\n  margin-bottom: -2px;\n  border-bottom: 2px solid transparent !important;\n  font-weight: bold;\n  color: var(--sd-tx-gray);\n}\nsd-tab-item[data-sd-selected=true] {\n  border-bottom: 3px solid var(--sd-bd-primary-solid) !important;\n  color: var(--sd-tx-primary);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTabItem, [{
         type: Component,
@@ -28,6 +28,6 @@ export class SdTabItem {
                     "(click)": "onClick()",
                 }, template: `
     <ng-content></ng-content>
-  `, styles: ["sd-tab-item {\n  display: inline-block;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  margin-bottom: -2px;\n  border-bottom: 2px solid transparent !important;\n  font-weight: bold;\n  color: var(--theme-gray-default);\n}\nsd-tab-item[data-sd-selected=true] {\n  border-bottom: 3px solid var(--theme-primary-default) !important;\n  color: var(--theme-primary-default);\n}"] }]
+  `, styles: ["sd-tab-item {\n  display: inline-block;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  cursor: pointer;\n  margin-bottom: -2px;\n  border-bottom: 2px solid transparent !important;\n  font-weight: bold;\n  color: var(--sd-tx-gray);\n}\nsd-tab-item[data-sd-selected=true] {\n  border-bottom: 3px solid var(--sd-bd-primary-solid) !important;\n  color: var(--sd-tx-primary);\n}"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTabItem, { className: "SdTabItem", filePath: "packages/angular/src/controls/tab/sd-tab-item.ts", lineNumber: 45 }); })();

package/dist/controls/tab/sd-tab.js

@@ -8,12 +8,12 @@ export class SdTab {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdTab, selectors: [["sd-tab"]], inputs: { value: [1, "value"] }, outputs: { value: "valueChange" }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdTab_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["sd-tab {\n  display: block;\n  border-bottom: 2px solid var(--theme-gray-lighter);\n  padding: 0 calc(var(--gap-default) + 1px) 0 calc(var(--gap-default) - 1px);\n}"], encapsulation: 2 });
+        } }, styles: ["sd-tab {\n  display: block;\n  border-bottom: 2px solid var(--sd-bd-hairline);\n  padding: 0 calc(var(--sd-gap-default) + 1px) 0 calc(var(--sd-gap-default) - 1px);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTab, [{
         type: Component,
         args: [{ selector: "sd-tab", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: `
     <ng-content></ng-content>
-  `, styles: ["sd-tab {\n  display: block;\n  border-bottom: 2px solid var(--theme-gray-lighter);\n  padding: 0 calc(var(--gap-default) + 1px) 0 calc(var(--gap-default) - 1px);\n}"] }]
+  `, styles: ["sd-tab {\n  display: block;\n  border-bottom: 2px solid var(--sd-bd-hairline);\n  padding: 0 calc(var(--sd-gap-default) + 1px) 0 calc(var(--sd-gap-default) - 1px);\n}"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTab, { className: "SdTab", filePath: "packages/angular/src/controls/tab/sd-tab.ts", lineNumber: 23 }); })();

package/dist/core/busy/sd-busy-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-busy-container.d.ts","sourceRoot":"","sources":["../../../src/core/busy/sd-busy-container.ts"],"names":[],"mappings":"AASA,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;;AAErE,qBAgUa,eAAe;IAC1B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA0B;IAElD,IAAI,qEAAiD;IACrD,OAAO,0DAAwC;IAC/C,IAAI,8DAA4C;IAChD,eAAe,0DAAwC;IAEvD,QAAQ,6CAAsD;IAE9D,gBAAgB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;yCAVzB,eAAe;2CAAf,eAAe;CAgB3B"}
+{"version":3,"file":"sd-busy-container.d.ts","sourceRoot":"","sources":["../../../src/core/busy/sd-busy-container.ts"],"names":[],"mappings":"AASA,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;;AAErE,qBAiUa,eAAe;IAC1B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA0B;IAElD,IAAI,qEAAiD;IACrD,OAAO,0DAAwC;IAC/C,IAAI,8DAA4C;IAChD,eAAe,0DAAwC;IAEvD,QAAQ,6CAAsD;IAE9D,gBAAgB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;yCAVzB,eAAe;2CAAf,eAAe;CAgB3B"}

package/dist/core/busy/sd-busy-container.js

@@ -69,7 +69,7 @@ export class SdBusyContainer {
             i0.ɵɵconditional(ctx.message() != undefined ? 6 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.progressPercent() != null ? 7 : -1);
-        } }, styles: ["sd-busy-container {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  min-width: 70px;\n  min-height: 70px;\n  overflow: auto;\n}\nsd-busy-container > ._screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 9998;\n  visibility: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity var(--animation-duration);\n  transition-timing-function: linear;\n}\nsd-busy-container > ._screen > ._progress {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 4px;\n  width: 100%;\n  background-color: var(--background-color);\n}\nsd-busy-container > ._screen > ._progress > ._progress-bar {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: inline-block;\n  content: \"\";\n  height: 4px;\n  width: 100%;\n  transition: var(--animation-duration) ease-in;\n  transition-property: transform;\n  transform-origin: left;\n  transform: scaleX(0);\n  background-color: var(--theme-primary-default);\n}\nsd-busy-container[data-sd-busy=true] > ._screen {\n  visibility: visible;\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect {\n  transform: translateY(-100%);\n  transition: var(--animation-duration) ease-in;\n  transition-property: transform;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._indicator {\n  top: 0;\n  width: 30px;\n  height: 30px;\n  margin: 20px auto 0 auto;\n  border: 6px solid var(--background-color);\n  border-radius: 100%;\n  border-bottom-color: var(--theme-primary-default);\n  animation: sd-busy-spin 1s linear infinite;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._indicator > div {\n  display: none;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 55px;\n  width: 100%;\n  color: var(--background-color);\n  font-weight: bold;\n  text-align: center;\n  text-shadow: 0 0 2px var(--background-rev-color);\n}\nsd-busy-container[data-sd-type=spinner][data-sd-busy=true] > ._screen > ._rect {\n  transform: none;\n  transition: var(--animation-duration) ease-out;\n}\nsd-busy-container[data-sd-type=bar] {\n  min-height: 4px;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 4px;\n  width: 100%;\n  background-color: var(--background-color);\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:before, sd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: inline-block;\n  content: \"\";\n  height: 4px;\n  width: 100%;\n  transform-origin: left;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:before {\n  background-color: var(--theme-primary-default);\n  animation: sd-busy-bar-indicator-before 2s infinite ease-in;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:after {\n  background-color: var(--background-color);\n  animation: sd-busy-bar-indicator-after 2s infinite ease-out;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator > div {\n  display: none;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 4px;\n  right: 0;\n  display: inline-block;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator {\n  position: absolute;\n  top: calc(50% - 20px);\n  left: calc(50% - 20px);\n  width: 40px;\n  height: 40px;\n  transform: rotateZ(45deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube1,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4 {\n  float: left;\n  width: 50%;\n  height: 50%;\n  position: relative;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube1:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4:before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--trans-light);\n  animation: sd-busy-cube 2.4s infinite linear both;\n  transform-origin: 100% 100%;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2 {\n  transform: rotateZ(90deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2:before {\n  animation-delay: 0.3s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3 {\n  transform: rotateZ(180deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3:before {\n  animation-delay: 0.6s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4 {\n  transform: rotateZ(270deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4:before {\n  animation-delay: 0.9s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 4px;\n  right: 0;\n  display: inline-block;\n}\n\n@keyframes sd-busy-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes sd-busy-bar-indicator-before {\n  0% {\n    transform: scaleX(0);\n  }\n  60%, 100% {\n    transform: scaleX(1);\n  }\n}\n@keyframes sd-busy-bar-indicator-after {\n  0%, 50% {\n    transform: scaleX(0);\n  }\n  100% {\n    transform: scaleX(1);\n  }\n}\n@keyframes sd-busy-cube {\n  0%, 10% {\n    transform: perspective(140px) rotateX(-180deg);\n    opacity: 0;\n  }\n  25%, 75% {\n    transform: perspective(140px) rotateX(0deg);\n    opacity: 1;\n  }\n  90%, 100% {\n    transform: perspective(140px) rotateY(180deg);\n    opacity: 0;\n  }\n}"], encapsulation: 2 });
+        } }, styles: ["sd-busy-container {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  min-width: 70px;\n  min-height: 70px;\n  overflow: auto;\n}\nsd-busy-container > ._screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 9998;\n  visibility: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity var(--sd-animation-duration);\n  transition-timing-function: linear;\n}\nsd-busy-container > ._screen > ._progress {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 4px;\n  width: 100%;\n  background-color: var(--sd-bg-canvas);\n}\nsd-busy-container > ._screen > ._progress > ._progress-bar {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: inline-block;\n  content: \"\";\n  height: 4px;\n  width: 100%;\n  transition: var(--sd-animation-duration) ease-in;\n  transition-property: transform;\n  transform-origin: left;\n  transform: scaleX(0);\n  background-color: var(--sd-bg-primary-solid);\n}\nsd-busy-container[data-sd-busy=true] > ._screen {\n  visibility: visible;\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect {\n  transform: translateY(-100%);\n  transition: var(--sd-animation-duration) ease-in;\n  transition-property: transform;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._indicator {\n  top: 0;\n  width: 30px;\n  height: 30px;\n  margin: 20px auto 0 auto;\n  border: 6px solid var(--sd-bg-canvas);\n  border-radius: 100%;\n  border-bottom-color: var(--sd-bg-primary-solid);\n  animation: sd-busy-spin 1s linear infinite;\n  box-shadow: 0 2px 4px var(--sd-shadow-color);\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._indicator > div {\n  display: none;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 55px;\n  width: 100%;\n  color: var(--sd-bg-canvas);\n  font-weight: bold;\n  text-align: center;\n  text-shadow: 0 0 2px var(--sd-bg-inverse);\n}\nsd-busy-container[data-sd-type=spinner][data-sd-busy=true] > ._screen > ._rect {\n  transform: none;\n  transition: var(--sd-animation-duration) ease-out;\n}\nsd-busy-container[data-sd-type=bar] {\n  min-height: 4px;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 4px;\n  width: 100%;\n  background-color: var(--sd-bg-canvas);\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:before, sd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: inline-block;\n  content: \"\";\n  height: 4px;\n  width: 100%;\n  transform-origin: left;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:before {\n  background-color: var(--sd-bg-primary-solid);\n  animation: sd-busy-bar-indicator-before 2s infinite ease-in;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:after {\n  background-color: var(--sd-bg-canvas);\n  animation: sd-busy-bar-indicator-after 2s infinite ease-out;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator > div {\n  display: none;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 4px;\n  right: 0;\n  display: inline-block;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator {\n  position: absolute;\n  top: calc(50% - 20px);\n  left: calc(50% - 20px);\n  width: 40px;\n  height: 40px;\n  transform: rotateZ(45deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube1,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4 {\n  float: left;\n  width: 50%;\n  height: 50%;\n  position: relative;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube1:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4:before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sd-bg-busy-indicator);\n  animation: sd-busy-cube 2.4s infinite linear both;\n  transform-origin: 100% 100%;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2 {\n  transform: rotateZ(90deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2:before {\n  animation-delay: 0.3s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3 {\n  transform: rotateZ(180deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3:before {\n  animation-delay: 0.6s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4 {\n  transform: rotateZ(270deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4:before {\n  animation-delay: 0.9s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 4px;\n  right: 0;\n  display: inline-block;\n}\n\n@keyframes sd-busy-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes sd-busy-bar-indicator-before {\n  0% {\n    transform: scaleX(0);\n  }\n  60%, 100% {\n    transform: scaleX(1);\n  }\n}\n@keyframes sd-busy-bar-indicator-after {\n  0%, 50% {\n    transform: scaleX(0);\n  }\n  100% {\n    transform: scaleX(1);\n  }\n}\n@keyframes sd-busy-cube {\n  0%, 10% {\n    transform: perspective(140px) rotateX(-180deg);\n    opacity: 0;\n  }\n  25%, 75% {\n    transform: perspective(140px) rotateX(0deg);\n    opacity: 1;\n  }\n  90%, 100% {\n    transform: perspective(140px) rotateY(180deg);\n    opacity: 0;\n  }\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdBusyContainer, [{
         type: Component,
@@ -112,6 +112,6 @@ export class SdBusyContainer {
       }
     </div>
     <ng-content></ng-content>
-  `, styles: ["sd-busy-container {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  min-width: 70px;\n  min-height: 70px;\n  overflow: auto;\n}\nsd-busy-container > ._screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 9998;\n  visibility: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity var(--animation-duration);\n  transition-timing-function: linear;\n}\nsd-busy-container > ._screen > ._progress {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 4px;\n  width: 100%;\n  background-color: var(--background-color);\n}\nsd-busy-container > ._screen > ._progress > ._progress-bar {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: inline-block;\n  content: \"\";\n  height: 4px;\n  width: 100%;\n  transition: var(--animation-duration) ease-in;\n  transition-property: transform;\n  transform-origin: left;\n  transform: scaleX(0);\n  background-color: var(--theme-primary-default);\n}\nsd-busy-container[data-sd-busy=true] > ._screen {\n  visibility: visible;\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect {\n  transform: translateY(-100%);\n  transition: var(--animation-duration) ease-in;\n  transition-property: transform;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._indicator {\n  top: 0;\n  width: 30px;\n  height: 30px;\n  margin: 20px auto 0 auto;\n  border: 6px solid var(--background-color);\n  border-radius: 100%;\n  border-bottom-color: var(--theme-primary-default);\n  animation: sd-busy-spin 1s linear infinite;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._indicator > div {\n  display: none;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 55px;\n  width: 100%;\n  color: var(--background-color);\n  font-weight: bold;\n  text-align: center;\n  text-shadow: 0 0 2px var(--background-rev-color);\n}\nsd-busy-container[data-sd-type=spinner][data-sd-busy=true] > ._screen > ._rect {\n  transform: none;\n  transition: var(--animation-duration) ease-out;\n}\nsd-busy-container[data-sd-type=bar] {\n  min-height: 4px;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 4px;\n  width: 100%;\n  background-color: var(--background-color);\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:before, sd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: inline-block;\n  content: \"\";\n  height: 4px;\n  width: 100%;\n  transform-origin: left;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:before {\n  background-color: var(--theme-primary-default);\n  animation: sd-busy-bar-indicator-before 2s infinite ease-in;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:after {\n  background-color: var(--background-color);\n  animation: sd-busy-bar-indicator-after 2s infinite ease-out;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator > div {\n  display: none;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 4px;\n  right: 0;\n  display: inline-block;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator {\n  position: absolute;\n  top: calc(50% - 20px);\n  left: calc(50% - 20px);\n  width: 40px;\n  height: 40px;\n  transform: rotateZ(45deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube1,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4 {\n  float: left;\n  width: 50%;\n  height: 50%;\n  position: relative;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube1:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4:before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--trans-light);\n  animation: sd-busy-cube 2.4s infinite linear both;\n  transform-origin: 100% 100%;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2 {\n  transform: rotateZ(90deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2:before {\n  animation-delay: 0.3s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3 {\n  transform: rotateZ(180deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3:before {\n  animation-delay: 0.6s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4 {\n  transform: rotateZ(270deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4:before {\n  animation-delay: 0.9s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 4px;\n  right: 0;\n  display: inline-block;\n}\n\n@keyframes sd-busy-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes sd-busy-bar-indicator-before {\n  0% {\n    transform: scaleX(0);\n  }\n  60%, 100% {\n    transform: scaleX(1);\n  }\n}\n@keyframes sd-busy-bar-indicator-after {\n  0%, 50% {\n    transform: scaleX(0);\n  }\n  100% {\n    transform: scaleX(1);\n  }\n}\n@keyframes sd-busy-cube {\n  0%, 10% {\n    transform: perspective(140px) rotateX(-180deg);\n    opacity: 0;\n  }\n  25%, 75% {\n    transform: perspective(140px) rotateX(0deg);\n    opacity: 1;\n  }\n  90%, 100% {\n    transform: perspective(140px) rotateY(180deg);\n    opacity: 0;\n  }\n}"] }]
+  `, styles: ["sd-busy-container {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  min-width: 70px;\n  min-height: 70px;\n  overflow: auto;\n}\nsd-busy-container > ._screen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 9998;\n  visibility: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity var(--sd-animation-duration);\n  transition-timing-function: linear;\n}\nsd-busy-container > ._screen > ._progress {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 4px;\n  width: 100%;\n  background-color: var(--sd-bg-canvas);\n}\nsd-busy-container > ._screen > ._progress > ._progress-bar {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: inline-block;\n  content: \"\";\n  height: 4px;\n  width: 100%;\n  transition: var(--sd-animation-duration) ease-in;\n  transition-property: transform;\n  transform-origin: left;\n  transform: scaleX(0);\n  background-color: var(--sd-bg-primary-solid);\n}\nsd-busy-container[data-sd-busy=true] > ._screen {\n  visibility: visible;\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect {\n  transform: translateY(-100%);\n  transition: var(--sd-animation-duration) ease-in;\n  transition-property: transform;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._indicator {\n  top: 0;\n  width: 30px;\n  height: 30px;\n  margin: 20px auto 0 auto;\n  border: 6px solid var(--sd-bg-canvas);\n  border-radius: 100%;\n  border-bottom-color: var(--sd-bg-primary-solid);\n  animation: sd-busy-spin 1s linear infinite;\n  box-shadow: 0 2px 4px var(--sd-shadow-color);\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._indicator > div {\n  display: none;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 55px;\n  width: 100%;\n  color: var(--sd-bg-canvas);\n  font-weight: bold;\n  text-align: center;\n  text-shadow: 0 0 2px var(--sd-bg-inverse);\n}\nsd-busy-container[data-sd-type=spinner][data-sd-busy=true] > ._screen > ._rect {\n  transform: none;\n  transition: var(--sd-animation-duration) ease-out;\n}\nsd-busy-container[data-sd-type=bar] {\n  min-height: 4px;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 4px;\n  width: 100%;\n  background-color: var(--sd-bg-canvas);\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:before, sd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: inline-block;\n  content: \"\";\n  height: 4px;\n  width: 100%;\n  transform-origin: left;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:before {\n  background-color: var(--sd-bg-primary-solid);\n  animation: sd-busy-bar-indicator-before 2s infinite ease-in;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:after {\n  background-color: var(--sd-bg-canvas);\n  animation: sd-busy-bar-indicator-after 2s infinite ease-out;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator > div {\n  display: none;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 4px;\n  right: 0;\n  display: inline-block;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator {\n  position: absolute;\n  top: calc(50% - 20px);\n  left: calc(50% - 20px);\n  width: 40px;\n  height: 40px;\n  transform: rotateZ(45deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube1,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4 {\n  float: left;\n  width: 50%;\n  height: 50%;\n  position: relative;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube1:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4:before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sd-bg-busy-indicator);\n  animation: sd-busy-cube 2.4s infinite linear both;\n  transform-origin: 100% 100%;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2 {\n  transform: rotateZ(90deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2:before {\n  animation-delay: 0.3s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3 {\n  transform: rotateZ(180deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3:before {\n  animation-delay: 0.6s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4 {\n  transform: rotateZ(270deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4:before {\n  animation-delay: 0.9s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._message {\n  position: absolute;\n  top: 4px;\n  right: 0;\n  display: inline-block;\n}\n\n@keyframes sd-busy-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes sd-busy-bar-indicator-before {\n  0% {\n    transform: scaleX(0);\n  }\n  60%, 100% {\n    transform: scaleX(1);\n  }\n}\n@keyframes sd-busy-bar-indicator-after {\n  0%, 50% {\n    transform: scaleX(0);\n  }\n  100% {\n    transform: scaleX(1);\n  }\n}\n@keyframes sd-busy-cube {\n  0%, 10% {\n    transform: perspective(140px) rotateX(-180deg);\n    opacity: 0;\n  }\n  25%, 75% {\n    transform: perspective(140px) rotateX(0deg);\n    opacity: 1;\n  }\n  90%, 100% {\n    transform: perspective(140px) rotateY(180deg);\n    opacity: 0;\n  }\n}"] }]
     }], null, { busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], progressPercent: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressPercent", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdBusyContainer, { className: "SdBusyContainer", filePath: "packages/angular/src/core/busy/sd-busy-container.ts", lineNumber: 332 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdBusyContainer, { className: "SdBusyContainer", filePath: "packages/angular/src/core/busy/sd-busy-container.ts", lineNumber: 333 }); })();

package/dist/core/modal/sd-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-modal.d.ts","sourceRoot":"","sources":["../../../src/core/modal/sd-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAWL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AASvB,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,wBAAwB,CAAC;;;AAEhC,qBA2Sa,OAAO;IAClB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAwD;IAC1F,OAAO,CAAC,QAAQ,CAAC,eAAe,CAEc;IAC9C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAwB;IACtD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAqB;IAEhD,SAAS,CAAC,QAAQ,CAAC,OAAO,yVAAW;IAErC,IAAI,+CAAgB;IACpB,GAAG,0DAAwC;IAC3C,KAAK,8CAAa;IAClB,UAAU,+CAAgB;IAC1B,eAAe,+CAAgB;IAC/B,WAAW,0DAAwC;IACnD,kBAAkB,+CAAe;IACjC,mBAAmB,+CAAe;IAClC,KAAK,+CAAgB;IACrB,IAAI,+CAAgB;IACpB,SAAS,+CAAgB;IACzB,OAAO,+CAAgB;IACvB,QAAQ,gFAA8D;IACtE,WAAW,0DAAwC;IACnD,UAAU,0DAAwC;IAClD,QAAQ,0DAAwC;IAChD,OAAO,0DAAwC;IAC/C,YAAY,oEAAkD;IAE9D,YAAY,iDAAkB;IAE9B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAKzB;;IAoCH,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAKvD,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAO1C,eAAe,IAAI,IAAI;IAKvB,kBAAkB,IAAI,IAAI;IAI1B,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAS3C,aAAa,IAAI,IAAI;IAIrB,YAAY,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAKxC,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAK1C,cAAc,IAAI,IAAI;IAYtB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;YAIN,WAAW;YAgBX,cAAc;yCAjMjB,OAAO;2CAAP,OAAO;CAiNnB"}
+{"version":3,"file":"sd-modal.d.ts","sourceRoot":"","sources":["../../../src/core/modal/sd-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAWL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AASvB,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,wBAAwB,CAAC;;;AAEhC,qBAkTa,OAAO;IAClB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAwD;IAC1F,OAAO,CAAC,QAAQ,CAAC,eAAe,CAEc;IAC9C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAwB;IACtD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAqB;IAEhD,SAAS,CAAC,QAAQ,CAAC,OAAO,yVAAW;IAErC,IAAI,+CAAgB;IACpB,GAAG,0DAAwC;IAC3C,KAAK,8CAAa;IAClB,UAAU,+CAAgB;IAC1B,eAAe,+CAAgB;IAC/B,WAAW,0DAAwC;IACnD,kBAAkB,+CAAe;IACjC,mBAAmB,+CAAe;IAClC,KAAK,+CAAgB;IACrB,IAAI,+CAAgB;IACpB,SAAS,+CAAgB;IACzB,OAAO,+CAAgB;IACvB,QAAQ,gFAA8D;IACtE,WAAW,0DAAwC;IACnD,UAAU,0DAAwC;IAClD,QAAQ,0DAAwC;IAChD,OAAO,0DAAwC;IAC/C,YAAY,oEAAkD;IAE9D,YAAY,iDAAkB;IAE9B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAKzB;;IAoCH,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAKvD,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAO1C,eAAe,IAAI,IAAI;IAKvB,kBAAkB,IAAI,IAAI;IAI1B,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAS3C,aAAa,IAAI,IAAI;IAIrB,YAAY,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAKxC,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAK1C,cAAc,IAAI,IAAI;IAYtB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;YAIN,WAAW;YAgBX,cAAc;yCAjMjB,OAAO;2CAAP,OAAO;CAgNnB"}

package/dist/core/modal/sd-modal.js

@@ -326,7 +326,7 @@ export class SdModal {
             i0.ɵɵconditional(!ctx.hideHeader() ? 2 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.resizable() ? 5 : -1);
-        } }, dependencies: [NgTemplateOutlet, NgIcon, SdAnchor, SdResizeDirective], styles: ["sd-modal {\n  display: block;\n  position: fixed;\n  z-index: var(--z-index-modal);\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  padding-top: calc(var(--topbar-height) + var(--gap-sm));\n  opacity: 0;\n  transition: opacity var(--animation-duration) ease-in-out;\n  pointer-events: none;\n}\nsd-modal > ._backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--trans-default);\n}\nsd-modal > ._dialog {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n  width: fit-content;\n  min-width: 200px;\n  background: var(--control-color);\n  overflow: hidden;\n  box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  transform: translateY(-25px);\n  transition: transform var(--animation-duration) ease-in-out;\n}\nsd-modal > ._dialog:focus {\n  outline: none;\n}\nsd-modal > ._dialog > ._header {\n  display: flex;\n  align-items: center;\n  user-select: none;\n  border-bottom: 1px solid var(--theme-gray-lighter);\n  background: var(--theme-gray-lightest);\n}\nsd-modal > ._dialog > ._header > ._title {\n  flex: 1;\n  padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._header > ._close-btn {\n  padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._content {\n  flex: 1;\n  overflow: auto;\n}\nsd-modal > ._dialog > ._resize-handle {\n  position: absolute;\n}\nsd-modal > ._dialog > ._resize-handle._resize-left {\n  top: 0;\n  left: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-right {\n  top: 0;\n  right: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-right {\n  right: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nesw-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-left {\n  left: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nwse-resize;\n  z-index: 1;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-right {\n  right: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nwse-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-left {\n  left: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nesw-resize;\n  z-index: 1;\n}\nsd-modal[data-sd-open][data-sd-init] {\n  opacity: 1;\n  pointer-events: auto;\n}\nsd-modal[data-sd-open][data-sd-init] > ._dialog {\n  transform: none;\n}\nsd-modal[data-sd-float] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float] > ._backdrop {\n  display: none;\n}\nsd-modal[data-sd-float] > ._dialog {\n  pointer-events: auto;\n  opacity: 0;\n  box-shadow: 0 calc(4 * var(--elevation-size)) calc(4 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n  border: 1px solid var(--theme-gray-lighter);\n}\nsd-modal[data-sd-float] > ._dialog:focus {\n  box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] > ._dialog {\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-modal[data-sd-position=bottom-right] > ._dialog {\n  position: absolute;\n  right: calc(var(--gap-xxl) * 2);\n  bottom: var(--gap-xxl);\n}\nsd-modal[data-sd-position=top-right] > ._dialog {\n  position: absolute;\n  right: var(--gap-xxl);\n  top: var(--gap-xxl);\n}\nsd-modal[data-sd-fill] {\n  padding-top: 0;\n}\nsd-modal[data-sd-fill] > ._dialog {\n  width: 100%;\n  height: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-modal[data-sd-fill] > ._dialog > ._header {\n  background: transparent;\n  color: var(--text-trans-lighter);\n}"], encapsulation: 2 });
+        } }, dependencies: [NgTemplateOutlet, NgIcon, SdAnchor, SdResizeDirective], styles: ["sd-modal {\n  display: block;\n  position: fixed;\n  z-index: var(--sd-z-modal);\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  padding-top: calc(var(--sd-topbar-height) + var(--sd-gap-sm));\n  opacity: 0;\n  transition: opacity var(--sd-animation-duration) ease-in-out;\n  pointer-events: none;\n}\nsd-modal > ._backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sd-bg-backdrop);\n}\nsd-modal > ._dialog {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n  width: fit-content;\n  min-width: 200px;\n  background-color: var(--sd-bg-elevated);\n  border: 1px solid var(--sd-modal-bd);\n  overflow: hidden;\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  border-radius: var(--sd-radius-default);\n  transform: translateY(-25px);\n  transition: transform var(--sd-animation-duration) ease-in-out;\n}\nsd-modal > ._dialog:focus {\n  outline: none;\n}\nsd-modal > ._dialog > ._header {\n  display: flex;\n  align-items: center;\n  user-select: none;\n  border-bottom: 1px solid var(--sd-bd-hairline);\n  background-color: var(--sd-modal-header-bg);\n  color: var(--sd-modal-header-tx);\n}\nsd-modal > ._dialog > ._header > ._title {\n  flex: 1;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n}\nsd-modal > ._dialog > ._header > ._close-btn {\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  color: var(--sd-modal-header-tx-muted);\n}\nsd-modal > ._dialog > ._header > ._close-btn:hover {\n  color: var(--sd-modal-header-tx);\n}\nsd-modal > ._dialog > ._content {\n  flex: 1;\n  overflow: auto;\n}\nsd-modal > ._dialog > ._resize-handle {\n  position: absolute;\n}\nsd-modal > ._dialog > ._resize-handle._resize-left {\n  top: 0;\n  left: 0;\n  width: var(--sd-gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-right {\n  top: 0;\n  right: 0;\n  width: var(--sd-gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--sd-gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-right {\n  right: 0;\n  top: 0;\n  width: var(--sd-gap-sm);\n  height: var(--sd-gap-sm);\n  z-index: 1;\n  cursor: nesw-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-left {\n  left: 0;\n  top: 0;\n  width: var(--sd-gap-sm);\n  height: var(--sd-gap-sm);\n  cursor: nwse-resize;\n  z-index: 1;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--sd-gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-right {\n  right: 0;\n  bottom: 0;\n  width: var(--sd-gap-sm);\n  height: var(--sd-gap-sm);\n  z-index: 1;\n  cursor: nwse-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-left {\n  left: 0;\n  bottom: 0;\n  width: var(--sd-gap-sm);\n  height: var(--sd-gap-sm);\n  cursor: nesw-resize;\n  z-index: 1;\n}\nsd-modal[data-sd-open][data-sd-init] {\n  opacity: 1;\n  pointer-events: auto;\n}\nsd-modal[data-sd-open][data-sd-init] > ._dialog {\n  transform: none;\n}\nsd-modal[data-sd-float] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float] > ._backdrop {\n  display: none;\n}\nsd-modal[data-sd-float] > ._dialog {\n  pointer-events: auto;\n  opacity: 0;\n  box-shadow: 0 calc(4 * var(--sd-shadow-size)) calc(4 * 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  border: 1px solid var(--sd-bd-hairline);\n}\nsd-modal[data-sd-float] > ._dialog:focus {\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}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] > ._dialog {\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-modal[data-sd-position=bottom-right] > ._dialog {\n  position: absolute;\n  right: calc(var(--sd-gap-xxl) * 2);\n  bottom: var(--sd-gap-xxl);\n}\nsd-modal[data-sd-position=top-right] > ._dialog {\n  position: absolute;\n  right: var(--sd-gap-xxl);\n  top: var(--sd-gap-xxl);\n}\nsd-modal[data-sd-fill] {\n  padding-top: 0;\n}\nsd-modal[data-sd-fill] > ._dialog {\n  width: 100%;\n  height: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-modal[data-sd-fill] > ._dialog > ._header {\n  background-color: transparent;\n  color: var(--sd-tx-faint);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdModal, [{
         type: Component,
@@ -409,6 +409,6 @@ export class SdModal {
         ></div>
       }
     </div>
-  `, styles: ["sd-modal {\n  display: block;\n  position: fixed;\n  z-index: var(--z-index-modal);\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  padding-top: calc(var(--topbar-height) + var(--gap-sm));\n  opacity: 0;\n  transition: opacity var(--animation-duration) ease-in-out;\n  pointer-events: none;\n}\nsd-modal > ._backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--trans-default);\n}\nsd-modal > ._dialog {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n  width: fit-content;\n  min-width: 200px;\n  background: var(--control-color);\n  overflow: hidden;\n  box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  transform: translateY(-25px);\n  transition: transform var(--animation-duration) ease-in-out;\n}\nsd-modal > ._dialog:focus {\n  outline: none;\n}\nsd-modal > ._dialog > ._header {\n  display: flex;\n  align-items: center;\n  user-select: none;\n  border-bottom: 1px solid var(--theme-gray-lighter);\n  background: var(--theme-gray-lightest);\n}\nsd-modal > ._dialog > ._header > ._title {\n  flex: 1;\n  padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._header > ._close-btn {\n  padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._content {\n  flex: 1;\n  overflow: auto;\n}\nsd-modal > ._dialog > ._resize-handle {\n  position: absolute;\n}\nsd-modal > ._dialog > ._resize-handle._resize-left {\n  top: 0;\n  left: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-right {\n  top: 0;\n  right: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-right {\n  right: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nesw-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-left {\n  left: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nwse-resize;\n  z-index: 1;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-right {\n  right: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nwse-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-left {\n  left: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nesw-resize;\n  z-index: 1;\n}\nsd-modal[data-sd-open][data-sd-init] {\n  opacity: 1;\n  pointer-events: auto;\n}\nsd-modal[data-sd-open][data-sd-init] > ._dialog {\n  transform: none;\n}\nsd-modal[data-sd-float] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float] > ._backdrop {\n  display: none;\n}\nsd-modal[data-sd-float] > ._dialog {\n  pointer-events: auto;\n  opacity: 0;\n  box-shadow: 0 calc(4 * var(--elevation-size)) calc(4 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n  border: 1px solid var(--theme-gray-lighter);\n}\nsd-modal[data-sd-float] > ._dialog:focus {\n  box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] > ._dialog {\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-modal[data-sd-position=bottom-right] > ._dialog {\n  position: absolute;\n  right: calc(var(--gap-xxl) * 2);\n  bottom: var(--gap-xxl);\n}\nsd-modal[data-sd-position=top-right] > ._dialog {\n  position: absolute;\n  right: var(--gap-xxl);\n  top: var(--gap-xxl);\n}\nsd-modal[data-sd-fill] {\n  padding-top: 0;\n}\nsd-modal[data-sd-fill] > ._dialog {\n  width: 100%;\n  height: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-modal[data-sd-fill] > ._dialog > ._header {\n  background: transparent;\n  color: var(--text-trans-lighter);\n}"] }]
+  `, styles: ["sd-modal {\n  display: block;\n  position: fixed;\n  z-index: var(--sd-z-modal);\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  padding-top: calc(var(--sd-topbar-height) + var(--sd-gap-sm));\n  opacity: 0;\n  transition: opacity var(--sd-animation-duration) ease-in-out;\n  pointer-events: none;\n}\nsd-modal > ._backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--sd-bg-backdrop);\n}\nsd-modal > ._dialog {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n  width: fit-content;\n  min-width: 200px;\n  background-color: var(--sd-bg-elevated);\n  border: 1px solid var(--sd-modal-bd);\n  overflow: hidden;\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  border-radius: var(--sd-radius-default);\n  transform: translateY(-25px);\n  transition: transform var(--sd-animation-duration) ease-in-out;\n}\nsd-modal > ._dialog:focus {\n  outline: none;\n}\nsd-modal > ._dialog > ._header {\n  display: flex;\n  align-items: center;\n  user-select: none;\n  border-bottom: 1px solid var(--sd-bd-hairline);\n  background-color: var(--sd-modal-header-bg);\n  color: var(--sd-modal-header-tx);\n}\nsd-modal > ._dialog > ._header > ._title {\n  flex: 1;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n}\nsd-modal > ._dialog > ._header > ._close-btn {\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  color: var(--sd-modal-header-tx-muted);\n}\nsd-modal > ._dialog > ._header > ._close-btn:hover {\n  color: var(--sd-modal-header-tx);\n}\nsd-modal > ._dialog > ._content {\n  flex: 1;\n  overflow: auto;\n}\nsd-modal > ._dialog > ._resize-handle {\n  position: absolute;\n}\nsd-modal > ._dialog > ._resize-handle._resize-left {\n  top: 0;\n  left: 0;\n  width: var(--sd-gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-right {\n  top: 0;\n  right: 0;\n  width: var(--sd-gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--sd-gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-right {\n  right: 0;\n  top: 0;\n  width: var(--sd-gap-sm);\n  height: var(--sd-gap-sm);\n  z-index: 1;\n  cursor: nesw-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-left {\n  left: 0;\n  top: 0;\n  width: var(--sd-gap-sm);\n  height: var(--sd-gap-sm);\n  cursor: nwse-resize;\n  z-index: 1;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--sd-gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-right {\n  right: 0;\n  bottom: 0;\n  width: var(--sd-gap-sm);\n  height: var(--sd-gap-sm);\n  z-index: 1;\n  cursor: nwse-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-left {\n  left: 0;\n  bottom: 0;\n  width: var(--sd-gap-sm);\n  height: var(--sd-gap-sm);\n  cursor: nesw-resize;\n  z-index: 1;\n}\nsd-modal[data-sd-open][data-sd-init] {\n  opacity: 1;\n  pointer-events: auto;\n}\nsd-modal[data-sd-open][data-sd-init] > ._dialog {\n  transform: none;\n}\nsd-modal[data-sd-float] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float] > ._backdrop {\n  display: none;\n}\nsd-modal[data-sd-float] > ._dialog {\n  pointer-events: auto;\n  opacity: 0;\n  box-shadow: 0 calc(4 * var(--sd-shadow-size)) calc(4 * 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  border: 1px solid var(--sd-bd-hairline);\n}\nsd-modal[data-sd-float] > ._dialog:focus {\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}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] > ._dialog {\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-modal[data-sd-position=bottom-right] > ._dialog {\n  position: absolute;\n  right: calc(var(--sd-gap-xxl) * 2);\n  bottom: var(--sd-gap-xxl);\n}\nsd-modal[data-sd-position=top-right] > ._dialog {\n  position: absolute;\n  right: var(--sd-gap-xxl);\n  top: var(--sd-gap-xxl);\n}\nsd-modal[data-sd-fill] {\n  padding-top: 0;\n}\nsd-modal[data-sd-fill] > ._dialog {\n  width: 100%;\n  height: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-modal[data-sd-fill] > ._dialog > ._header {\n  background-color: transparent;\n  color: var(--sd-tx-faint);\n}"] }]
     }], () => [], { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], hideHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideHeader", required: false }] }], hideCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCloseButton", required: false }] }], headerStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerStyle", required: false }] }], useCloseByBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "useCloseByBackdrop", required: false }] }], useCloseByEscapeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "useCloseByEscapeKey", required: false }] }], float: [{ type: i0.Input, args: [{ isSignal: true, alias: "float", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], movable: [{ type: i0.Input, args: [{ isSignal: true, alias: "movable", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], minHeightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeightPx", required: false }] }], minWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidthPx", required: false }] }], heightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightPx", required: false }] }], widthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthPx", required: false }] }], actionTplRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionTplRef", required: false }] }], closeRequest: [{ type: i0.Output, args: ["closeRequest"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdModal, { className: "SdModal", filePath: "packages/angular/src/core/modal/sd-modal.ts", lineNumber: 325 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdModal, { className: "SdModal", filePath: "packages/angular/src/core/modal/sd-modal.ts", lineNumber: 332 }); })();

package/dist/core/provideSdAngular.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provideSdAngular.d.ts","sourceRoot":"","sources":["../../src/core/provideSdAngular.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAmC1D,wBAAgB,gBAAgB,CAAC,GAAG,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,GAAG,oBAAoB,CAqJlF"}
+{"version":3,"file":"provideSdAngular.d.ts","sourceRoot":"","sources":["../../src/core/provideSdAngular.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAoC1D,wBAAgB,gBAAgB,CAAC,GAAG,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,GAAG,oBAAoB,CA4KlF"}

package/dist/core/provideSdAngular.js

@@ -7,12 +7,13 @@ import { SwUpdate } from "@angular/service-worker";
 import { provideNgIconsConfig } from "@ng-icons/core";
 import { SdBusyProvider } from "./busy/sd-busy.provider";
 import { SdAngularConfigProvider } from "./config/sd-angular-config.provider";
-import { SdThemeProvider } from "../features/theme/sd-theme-provider";
+import { SD_THEMES, SdThemeProvider } from "../features/theme/sd-theme-provider";
 import { SdLocalStorageProvider } from "./config/sd-local-storage.provider";
 import { SdGlobalErrorHandlerPlugin } from "./error-handler/sd-global-error-handler.plugin";
 import { SdOptionEventPlugin } from "./events/sd-option-event.plugin";
 import { createLogger } from "@simplysm/core-common";
 const logger = createLogger("angular:sw-update");
+const themeLogger = createLogger("angular:theme");
 export function provideSdAngular(opt) {
     return makeEnvironmentProviders([
         {
@@ -22,9 +23,10 @@ export function provideSdAngular(opt) {
                 disableImageLazyLoadWarning: true,
             },
         },
+        // size 는 지정하지 않음 — 인라인 스타일로 박혀 styles.scss 의
+        // line-height 연동 calc(--ng-icon__size)를 덮어버림.
         provideNgIconsConfig({
             strokeWidth: 1.5,
-            size: "1.33em",
         }),
         provideEnvironmentInitializer(() => {
             // SSR(프리렌더) 가드: 테마 저장·복원은 브라우저 전용
@@ -32,16 +34,35 @@ export function provideSdAngular(opt) {
                 return;
             const sdTheme = inject(SdThemeProvider);
             const sdLocalStorage = inject(SdLocalStorageProvider);
-            const savedBlueprint = sdLocalStorage.get("sd-theme-blueprint");
-            if (savedBlueprint != null) {
-                sdTheme.blueprint.set(savedBlueprint);
+            const savedTheme = sdLocalStorage.get("sd-theme");
+            if (savedTheme != null) {
+                const matched = SD_THEMES.find((def) => def.value === savedTheme);
+                if (matched != null) {
+                    sdTheme.theme.set(matched.value);
+                }
+                else {
+                    // 저장된 테마가 내장 목록에 없음(구버전 제거 등) — 기본 테마 유지 + 사용자 인지용 경고
+                    themeLogger.warn(`저장된 테마 '${String(savedTheme)}' 가 내장 테마 목록에 없어 기본 테마로 표시합니다.`);
+                }
+            }
+            let prevTheme = sdTheme.theme();
+            effect(() => {
+                const theme = sdTheme.theme();
+                if (theme !== prevTheme) {
+                    sdLocalStorage.set("sd-theme", theme);
+                    prevTheme = theme;
+                }
+            });
+            const savedDensity = sdLocalStorage.get("sd-theme-density");
+            if (savedDensity === "compact" || savedDensity === "normal") {
+                sdTheme.density.set(savedDensity);
             }
-            let prevBlueprint = sdTheme.blueprint();
+            let prevDensity = sdTheme.density();
             effect(() => {
-                const blueprint = sdTheme.blueprint();
-                if (blueprint !== prevBlueprint) {
-                    sdLocalStorage.set("sd-theme-blueprint", blueprint);
-                    prevBlueprint = blueprint;
+                const density = sdTheme.density();
+                if (density !== prevDensity) {
+                    sdLocalStorage.set("sd-theme-density", density);
+                    prevDensity = density;
                 }
             });
             const savedFontSize = sdLocalStorage.get("sd-theme-font-size");

package/dist/core/ripple/setupRipple.js

@@ -27,12 +27,12 @@ export function setupRipple(enableFn) {
                 position: "absolute",
                 pointerEvents: "none",
                 borderRadius: "100%",
-                background: "var(--trans-light)",
+                backgroundColor: "var(--sd-bg-state-active)",
                 width: size * 2 + "px",
                 height: size * 2 + "px",
                 top: y - size + "px",
                 left: x - size + "px",
-                transition: "calc(2 * var(--animation-duration)) linear",
+                transition: "calc(2 * var(--sd-animation-duration)) linear",
                 transitionProperty: "transform, opacity",
                 transform: "scale(0.1)",
             });

package/dist/core/setupBgTheme.d.ts

@@ -1,5 +1,4 @@
 export declare function setupBgTheme(options?: {
     theme?: "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray";
-    lightness?: "lightest" | "lighter";
 }): void;
 //# sourceMappingURL=setupBgTheme.d.ts.map

package/dist/core/setupBgTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setupBgTheme.d.ts","sourceRoot":"","sources":["../../src/core/setupBgTheme.ts"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE;IACrC,KAAK,CAAC,EACF,SAAS,GACT,WAAW,GACX,MAAM,GACN,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,WAAW,CAAC;IAChB,SAAS,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;CACpC,GAAG,IAAI,CAgBP"}
+{"version":3,"file":"setupBgTheme.d.ts","sourceRoot":"","sources":["../../src/core/setupBgTheme.ts"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE;IACrC,KAAK,CAAC,EACJ,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAC;CAC9F,GAAG,IAAI,CAeP"}

package/dist/core/setupBgTheme.js

@@ -5,11 +5,10 @@ export function setupBgTheme(options) {
     if (!isPlatformBrowser(inject(PLATFORM_ID)))
         return;
     effect((onCleanup) => {
-        document.body.style.setProperty("--background-color", options?.theme
-            ? `var(--theme-${options.theme}-${options.lightness ?? "lightest"})`
-            : "");
+        // 앱 배경(body 가 소비하는 --sd-bg-canvas)을 시맨틱 subtle 면으로 덮는다.
+        document.body.style.setProperty("--sd-bg-canvas", options?.theme ? `var(--sd-bg-${options.theme}-subtle)` : "");
         onCleanup(() => {
-            document.body.style.setProperty("--background-color", "");
+            document.body.style.setProperty("--sd-bg-canvas", "");
         });
     });
 }

package/dist/core/show-effect/setupRevealOnShow.js

@@ -19,7 +19,7 @@ export function setupRevealOnShow(optFn) {
                 Object.assign(el.style, {
                     opacity: "1",
                     transform: "none",
-                    transitionDuration: "var(--animation-duration)",
+                    transitionDuration: "var(--sd-animation-duration)",
                     transitionTimingFunction: "ease-out",
                     transitionProperty: "opacity, transform",
                 });

package/dist/core/toast/sd-toast-container.js

@@ -5,12 +5,12 @@ export class SdToastContainer {
     static ɵfac = function SdToastContainer_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdToastContainer)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdToastContainer, selectors: [["sd-toast-container"]], hostVars: 1, hostBindings: function SdToastContainer_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-overlap", ctx.overlap() || undefined);
-        } }, inputs: { overlap: [1, "overlap"] }, decls: 0, vars: 0, template: function SdToastContainer_Template(rf, ctx) { }, styles: ["sd-toast-container {\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  pointer-events: none;\n  padding: var(--gap-xxl);\n  z-index: 9999;\n  flex-direction: column;\n}\n@supports not (appearance: auto) {\n  sd-toast-container.gap-xxs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxs > * + * {\n    margin-top: var(--gap-xxs);\n  }\n  sd-toast-container.gap-xs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xs > * + * {\n    margin-top: var(--gap-xs);\n  }\n  sd-toast-container.gap-sm {\n    gap: 0;\n  }\n  sd-toast-container.gap-sm > * + * {\n    margin-top: var(--gap-sm);\n  }\n  sd-toast-container.gap-default {\n    gap: 0;\n  }\n  sd-toast-container.gap-default > * + * {\n    margin-top: var(--gap-default);\n  }\n  sd-toast-container.gap-lg {\n    gap: 0;\n  }\n  sd-toast-container.gap-lg > * + * {\n    margin-top: var(--gap-lg);\n  }\n  sd-toast-container.gap-xl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xl > * + * {\n    margin-top: var(--gap-xl);\n  }\n  sd-toast-container.gap-xxl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxl > * + * {\n    margin-top: var(--gap-xxl);\n  }\n  sd-toast-container.gap-0 {\n    gap: 0;\n  }\n  sd-toast-container.gap-0 > * + * {\n    margin-top: var(--gap-0);\n  }\n  sd-toast-container.gap-auto {\n    gap: 0;\n  }\n  sd-toast-container.gap-auto > * + * {\n    margin-top: var(--gap-auto);\n  }\n}\n@media all and (max-width: 520px) {\n  sd-toast-container {\n    flex-direction: column-reverse;\n  }\n}\nsd-toast-container[data-sd-overlap] {\n  display: block;\n}\nsd-toast-container[data-sd-overlap] > sd-toast {\n  position: absolute;\n  bottom: var(--gap-xxl);\n  left: var(--gap-xxl);\n  right: var(--gap-xxl);\n  width: auto;\n}"], encapsulation: 2 });
+        } }, inputs: { overlap: [1, "overlap"] }, decls: 0, vars: 0, template: function SdToastContainer_Template(rf, ctx) { }, styles: ["sd-toast-container {\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  pointer-events: none;\n  padding: var(--sd-gap-xxl);\n  z-index: 9999;\n  flex-direction: column;\n}\n@supports not (appearance: auto) {\n  sd-toast-container.gap-xxs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxs > * + * {\n    margin-top: var(--sd-gap-xxs);\n  }\n  sd-toast-container.gap-xs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xs > * + * {\n    margin-top: var(--sd-gap-xs);\n  }\n  sd-toast-container.gap-sm {\n    gap: 0;\n  }\n  sd-toast-container.gap-sm > * + * {\n    margin-top: var(--sd-gap-sm);\n  }\n  sd-toast-container.gap-default {\n    gap: 0;\n  }\n  sd-toast-container.gap-default > * + * {\n    margin-top: var(--sd-gap-default);\n  }\n  sd-toast-container.gap-lg {\n    gap: 0;\n  }\n  sd-toast-container.gap-lg > * + * {\n    margin-top: var(--sd-gap-lg);\n  }\n  sd-toast-container.gap-xl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xl > * + * {\n    margin-top: var(--sd-gap-xl);\n  }\n  sd-toast-container.gap-xxl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxl > * + * {\n    margin-top: var(--sd-gap-xxl);\n  }\n  sd-toast-container.gap-0 {\n    gap: 0;\n  }\n  sd-toast-container.gap-0 > * + * {\n    margin-top: var(--sd-gap-0);\n  }\n  sd-toast-container.gap-auto {\n    gap: 0;\n  }\n  sd-toast-container.gap-auto > * + * {\n    margin-top: var(--sd-gap-auto);\n  }\n}\n@media all and (max-width: 520px) {\n  sd-toast-container {\n    flex-direction: column-reverse;\n  }\n}\nsd-toast-container[data-sd-overlap] {\n  display: block;\n}\nsd-toast-container[data-sd-overlap] > sd-toast {\n  position: absolute;\n  bottom: var(--sd-gap-xxl);\n  left: var(--sd-gap-xxl);\n  right: var(--sd-gap-xxl);\n  width: auto;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdToastContainer, [{
         type: Component,
         args: [{ selector: "sd-toast-container", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, host: {
                     "[attr.data-sd-overlap]": "overlap() || undefined",
-                }, template: "", styles: ["sd-toast-container {\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  pointer-events: none;\n  padding: var(--gap-xxl);\n  z-index: 9999;\n  flex-direction: column;\n}\n@supports not (appearance: auto) {\n  sd-toast-container.gap-xxs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxs > * + * {\n    margin-top: var(--gap-xxs);\n  }\n  sd-toast-container.gap-xs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xs > * + * {\n    margin-top: var(--gap-xs);\n  }\n  sd-toast-container.gap-sm {\n    gap: 0;\n  }\n  sd-toast-container.gap-sm > * + * {\n    margin-top: var(--gap-sm);\n  }\n  sd-toast-container.gap-default {\n    gap: 0;\n  }\n  sd-toast-container.gap-default > * + * {\n    margin-top: var(--gap-default);\n  }\n  sd-toast-container.gap-lg {\n    gap: 0;\n  }\n  sd-toast-container.gap-lg > * + * {\n    margin-top: var(--gap-lg);\n  }\n  sd-toast-container.gap-xl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xl > * + * {\n    margin-top: var(--gap-xl);\n  }\n  sd-toast-container.gap-xxl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxl > * + * {\n    margin-top: var(--gap-xxl);\n  }\n  sd-toast-container.gap-0 {\n    gap: 0;\n  }\n  sd-toast-container.gap-0 > * + * {\n    margin-top: var(--gap-0);\n  }\n  sd-toast-container.gap-auto {\n    gap: 0;\n  }\n  sd-toast-container.gap-auto > * + * {\n    margin-top: var(--gap-auto);\n  }\n}\n@media all and (max-width: 520px) {\n  sd-toast-container {\n    flex-direction: column-reverse;\n  }\n}\nsd-toast-container[data-sd-overlap] {\n  display: block;\n}\nsd-toast-container[data-sd-overlap] > sd-toast {\n  position: absolute;\n  bottom: var(--gap-xxl);\n  left: var(--gap-xxl);\n  right: var(--gap-xxl);\n  width: auto;\n}"] }]
+                }, template: "", styles: ["sd-toast-container {\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  pointer-events: none;\n  padding: var(--sd-gap-xxl);\n  z-index: 9999;\n  flex-direction: column;\n}\n@supports not (appearance: auto) {\n  sd-toast-container.gap-xxs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxs > * + * {\n    margin-top: var(--sd-gap-xxs);\n  }\n  sd-toast-container.gap-xs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xs > * + * {\n    margin-top: var(--sd-gap-xs);\n  }\n  sd-toast-container.gap-sm {\n    gap: 0;\n  }\n  sd-toast-container.gap-sm > * + * {\n    margin-top: var(--sd-gap-sm);\n  }\n  sd-toast-container.gap-default {\n    gap: 0;\n  }\n  sd-toast-container.gap-default > * + * {\n    margin-top: var(--sd-gap-default);\n  }\n  sd-toast-container.gap-lg {\n    gap: 0;\n  }\n  sd-toast-container.gap-lg > * + * {\n    margin-top: var(--sd-gap-lg);\n  }\n  sd-toast-container.gap-xl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xl > * + * {\n    margin-top: var(--sd-gap-xl);\n  }\n  sd-toast-container.gap-xxl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxl > * + * {\n    margin-top: var(--sd-gap-xxl);\n  }\n  sd-toast-container.gap-0 {\n    gap: 0;\n  }\n  sd-toast-container.gap-0 > * + * {\n    margin-top: var(--sd-gap-0);\n  }\n  sd-toast-container.gap-auto {\n    gap: 0;\n  }\n  sd-toast-container.gap-auto > * + * {\n    margin-top: var(--sd-gap-auto);\n  }\n}\n@media all and (max-width: 520px) {\n  sd-toast-container {\n    flex-direction: column-reverse;\n  }\n}\nsd-toast-container[data-sd-overlap] {\n  display: block;\n}\nsd-toast-container[data-sd-overlap] > sd-toast {\n  position: absolute;\n  bottom: var(--sd-gap-xxl);\n  left: var(--sd-gap-xxl);\n  right: var(--sd-gap-xxl);\n  width: auto;\n}"] }]
     }], null, { overlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlap", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdToastContainer, { className: "SdToastContainer", filePath: "packages/angular/src/core/toast/sd-toast-container.ts", lineNumber: 56 }); })();

package/dist/core/toast/sd-toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-toast.d.ts","sourceRoot":"","sources":["../../../src/core/toast/sd-toast.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;;AAKxD,qBA4Ha,OAAO;IAClB,IAAI,+CAAgB;IACpB,WAAW,qEAAiD;IAC5D,KAAK,oDAA+B;IACpC,QAAQ,8CAAY;IACpB,OAAO,0DAAwC;IAE/C,QAAQ,iEAKL;IAEH,QAAQ,qEAKL;yCAnBQ,OAAO;2CAAP,OAAO;CAoBnB"}
+{"version":3,"file":"sd-toast.d.ts","sourceRoot":"","sources":["../../../src/core/toast/sd-toast.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;;AAKxD,qBA2Ha,OAAO;IAClB,IAAI,+CAAgB;IACpB,WAAW,qEAAiD;IAC5D,KAAK,oDAA+B;IACpC,QAAQ,8CAAY;IACpB,OAAO,0DAAwC;IAE/C,QAAQ,iEAKL;IAEH,QAAQ,qEAKL;yCAnBQ,OAAO;2CAAP,OAAO;CAoBnB"}