@simplysm/angular 14.0.39 → 14.0.40

package/dist/controls/collapse/sd-collapse.d.ts

@@ -4,8 +4,9 @@ export declare class SdCollapse {
     open: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     private readonly _contentElRef;
     contentHeight: import("@angular/core").WritableSignal<number>;
+    private readonly _initialized;
     contentMarginTop: import("@angular/core").Signal<string>;
-    contentTransition: import("@angular/core").Signal<"margin-top 0.1s ease-out" | "margin-top 0.1s ease-in">;
+    contentTransition: import("@angular/core").Signal<"" | "margin-top 0.1s ease-out" | "margin-top 0.1s ease-in">;
     constructor();
     onContentResize(event: SdResizeEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdCollapse, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"sd-collapse.d.ts","sourceRoot":"","sources":["../../../src/controls/collapse/sd-collapse.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;;AAE9E,qBA0Ba,UAAU;IACrB,IAAI,qEAAiD;IAErD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAC6B;IAE3D,aAAa,iDAAa;IAE1B,gBAAgB,yCAEb;IAEH,iBAAiB,yFAEd;;IAcH,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;yCA5BhC,UAAU;2CAAV,UAAU;CAiCtB"}
+{"version":3,"file":"sd-collapse.d.ts","sourceRoot":"","sources":["../../../src/controls/collapse/sd-collapse.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;;AAE9E,qBA0Ba,UAAU;IACrB,IAAI,qEAAiD;IAErD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAC6B;IAE3D,aAAa,iDAAa;IAE1B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAiB;IAE9C,gBAAgB,yCAEb;IAEH,iBAAiB,8FAGd;;IAiBH,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;yCAlChC,UAAU;2CAAV,UAAU;CAuCtB"}

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

@@ -6,15 +6,21 @@ export class SdCollapse {
     open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     _contentElRef = viewChild.required("contentEl");
     contentHeight = signal(0, ...(ngDevMode ? [{ debugName: "contentHeight" }] : /* istanbul ignore next */ []));
+    _initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : /* istanbul ignore next */ []));
     contentMarginTop = computed(() => {
         return this.open() ? "" : `-${this.contentHeight()}px`;
     }, ...(ngDevMode ? [{ debugName: "contentMarginTop" }] : /* istanbul ignore next */ []));
     contentTransition = computed(() => {
+        if (!this._initialized())
+            return "";
         return this.open() ? "margin-top 0.1s ease-out" : "margin-top 0.1s ease-in";
     }, ...(ngDevMode ? [{ debugName: "contentTransition" }] : /* istanbul ignore next */ []));
     constructor() {
         afterNextRender(() => {
             this.contentHeight.set(this._contentElRef().nativeElement.offsetHeight);
+            requestAnimationFrame(() => {
+                this._initialized.set(true);
+            });
         });
         effect(() => {
             // Re-measure height on open transition to handle stale values from closed state

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

@@ -89,11 +89,11 @@ export class SdDropdown {
             }
             else {
                 const popupEl = this.popupElRef().nativeElement;
-                const focusable = popupEl.findFirstFocusableChild();
-                if (focusable) {
+                const tabbable = popupEl.findFirstTabbableChild();
+                if (tabbable) {
                     event.preventDefault();
                     event.stopPropagation();
-                    focusable.focus();
+                    tabbable.focus();
                 }
             }
         }
@@ -204,9 +204,9 @@ export class SdDropdown {
         if (relatedTarget == null &&
             mouseoverEl instanceof HTMLElement &&
             (contentEl.contains(mouseoverEl) === true || popupEl.contains(mouseoverEl) === true)) {
-            const focusable = popupEl.findFirstFocusableChild();
-            if (focusable != null) {
-                focusable.focus();
+            const tabbable = popupEl.findFirstTabbableChild();
+            if (tabbable != null) {
+                tabbable.focus();
             }
             else {
                 contentEl.focus();

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

@@ -1 +1 @@
-{"version":3,"file":"sd-list-item.d.ts","sourceRoot":"","sources":["../../../src/controls/list/sd-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,WAAW,EAEZ,MAAM,eAAe,CAAC;;AAQvB,qBAgGa,UAAU;IACrB,MAAM,4DAA4C;IAClD,IAAI,+CAAgB;IACpB,QAAQ,qEAAiD;IACzD,YAAY,0DAAmB;IAC/B,QAAQ,qEAAiD;IACzD,YAAY,0DAAmB;IAC/B,YAAY,0DAAmB;IAE/B,OAAO,gEAA8C;IAErD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA2B;IAEvD,WAAW,0CAAiD;IAE5D,YAAY,0CAET;;IAMH,cAAc,IAAI,IAAI;yCAvBX,UAAU;2CAAV,UAAU;CA6BtB"}
+{"version":3,"file":"sd-list-item.d.ts","sourceRoot":"","sources":["../../../src/controls/list/sd-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,WAAW,EAEZ,MAAM,eAAe,CAAC;;AAQvB,qBA0Fa,UAAU;IACrB,MAAM,4DAA4C;IAClD,IAAI,+CAAgB;IACpB,QAAQ,qEAAiD;IACzD,YAAY,0DAAmB;IAC/B,QAAQ,qEAAiD;IACzD,YAAY,0DAAmB;IAC/B,YAAY,0DAAmB;IAE/B,OAAO,gEAA8C;IAErD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA2B;IAEvD,WAAW,0CAAiD;IAE5D,YAAY,0CAET;;IAMH,cAAc,IAAI,IAAI;yCAvBX,UAAU;2CAAV,UAAU;CA6BtB"}

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

@@ -94,7 +94,7 @@ export class SdListItem {
             i0.ɵɵconditional(ctx.toolTpl() ? 5 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.hasChildren() ? 6 : -1);
-        } }, dependencies: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon], styles: ["sd-list-item {\n  display: block;\n}\nsd-list-item > ._content {\n  display: flex;\n  align-items: center;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  gap: var(--gap-sm);\n}\nsd-list-item > ._content > ._label {\n  flex: 1;\n}\nsd-list-item:hover > ._content {\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n  background: var(--trans-lighter);\n  font-weight: bold;\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n  cursor: default;\n}\nsd-list-item[data-sd-readonly=true]:hover > ._content {\n  background: transparent;\n}\nsd-list-item[data-sd-layout=flat] > ._content {\n  font-size: 0.85em;\n  opacity: 0.7;\n  cursor: default;\n}\nsd-list-item[data-sd-layout=flat]:hover > ._content {\n  background: transparent;\n}\nsd-list-item[data-sd-has-children=false] > ._content {\n  padding-left: calc(var(--gap-default) + var(--gap-sm) + 0.75em);\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon], styles: ["sd-list-item {\n  display: block;\n}\nsd-list-item > ._content {\n  display: flex;\n  align-items: center;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  gap: var(--gap-sm);\n}\nsd-list-item > ._content > ._label {\n  flex: 1;\n}\nsd-list-item:hover > ._content {\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n  background: var(--trans-lighter);\n  font-weight: bold;\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n  cursor: default;\n}\nsd-list-item[data-sd-readonly=true]:hover > ._content {\n  background: transparent;\n}\nsd-list-item[data-sd-layout=flat] > ._content {\n  font-size: 0.85em;\n  opacity: 0.7;\n  cursor: default;\n}\nsd-list-item[data-sd-layout=flat]:hover > ._content {\n  background: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdListItem, [{
         type: Component,
@@ -129,6 +129,6 @@ export class SdListItem {
                     "[attr.data-sd-selected]": "selected()",
                     "[attr.data-sd-readonly]": "readonly()",
                     "[attr.data-sd-has-children]": "hasChildren()",
-                }, styles: ["sd-list-item {\n  display: block;\n}\nsd-list-item > ._content {\n  display: flex;\n  align-items: center;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  gap: var(--gap-sm);\n}\nsd-list-item > ._content > ._label {\n  flex: 1;\n}\nsd-list-item:hover > ._content {\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n  background: var(--trans-lighter);\n  font-weight: bold;\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n  cursor: default;\n}\nsd-list-item[data-sd-readonly=true]:hover > ._content {\n  background: transparent;\n}\nsd-list-item[data-sd-layout=flat] > ._content {\n  font-size: 0.85em;\n  opacity: 0.7;\n  cursor: default;\n}\nsd-list-item[data-sd-layout=flat]:hover > ._content {\n  background: transparent;\n}\nsd-list-item[data-sd-has-children=false] > ._content {\n  padding-left: calc(var(--gap-default) + var(--gap-sm) + 0.75em);\n}"] }]
+                }, styles: ["sd-list-item {\n  display: block;\n}\nsd-list-item > ._content {\n  display: flex;\n  align-items: center;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  gap: var(--gap-sm);\n}\nsd-list-item > ._content > ._label {\n  flex: 1;\n}\nsd-list-item:hover > ._content {\n  background: var(--trans-lighter);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n  background: var(--trans-lighter);\n  font-weight: bold;\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n  cursor: default;\n}\nsd-list-item[data-sd-readonly=true]:hover > ._content {\n  background: transparent;\n}\nsd-list-item[data-sd-layout=flat] > ._content {\n  font-size: 0.85em;\n  opacity: 0.7;\n  cursor: default;\n}\nsd-list-item[data-sd-layout=flat]:hover > ._content {\n  background: transparent;\n}"] }]
     }], () => [], { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIcon", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }], toolTpl: [{ type: i0.ContentChild, args: ["toolTpl", { isSignal: true }] }], _childLists: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdList), { isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdListItem, { className: "SdListItem", filePath: "packages/angular/src/controls/list/sd-list-item.ts", lineNumber: 116, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdListItem, { className: "SdListItem", filePath: "packages/angular/src/controls/list/sd-list-item.ts", lineNumber: 110, forbidOrphanRendering: true }); })();

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,EAIZ,MAAM,eAAe,CAAC;AAIvB,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,qBAmJa,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,aAAa,8CAAgB,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,eAAI;IAEtD,YAAY,0DAAmB;IAC/B,YAAY,0DAAmB;IAE/B,YAAY,kDAAiB;IAE7B,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,wBAAwB,6DAAyC;IAEjE,UAAU;cAIY,CAAC;eAAS,MAAM;eAAS,MAAM;SAelD;;IAkIH,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI;IAO9B,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI;IAI9B,OAAO,CAAC,YAAY;IAepB,WAAW,IAAI,IAAI;IAQnB,aAAa,IAAI,IAAI;IAIrB,aAAa,IAAI,IAAI;IAIrB,YAAY,IAAI,IAAI;yCAnOT,QAAQ;2CAAR,QAAQ;CAuOpB"}
+{"version":3,"file":"sd-select.d.ts","sourceRoot":"","sources":["../../../src/controls/select/sd-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAYL,WAAW,EAIZ,MAAM,eAAe,CAAC;AAIvB,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,qBAmJa,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,aAAa,8CAAgB,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,eAAI;IAEtD,YAAY,0DAAmB;IAC/B,YAAY,0DAAmB;IAE/B,YAAY,kDAAiB;IAE7B,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,wBAAwB,6DAAyC;IAEjE,UAAU;cAIY,CAAC;eAAS,MAAM;eAAS,MAAM;SAelD;;IA6HH,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI;IAO9B,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI;IAI9B,OAAO,CAAC,YAAY;IAepB,WAAW,IAAI,IAAI;IAQnB,aAAa,IAAI,IAAI;IAIrB,aAAa,IAAI,IAAI;IAIrB,YAAY,IAAI,IAAI;yCA9NT,QAAQ;2CAAR,QAAQ;CAkOpB"}

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

@@ -182,14 +182,14 @@ export class SdSelect {
                     if (event.key === "ArrowDown" || event.key === "ArrowUp") {
                         event.preventDefault();
                         event.stopPropagation();
-                        const focusableEls = tabbable(popupEl);
-                        if (focusableEls.length === 0)
+                        const tabbableEls = tabbable(popupEl);
+                        if (tabbableEls.length === 0)
                             return;
-                        const currIndex = focusableEls.indexOf(document.activeElement);
+                        const currIndex = tabbableEls.indexOf(document.activeElement);
                         if (event.key === "ArrowDown") {
                             const nextIndex = currIndex + 1;
-                            if (nextIndex < focusableEls.length) {
-                                focusableEls[nextIndex].focus();
+                            if (nextIndex < tabbableEls.length) {
+                                tabbableEls[nextIndex].focus();
                             }
                         }
                         else {
@@ -199,7 +199,7 @@ export class SdSelect {
                                 this._dropdownElRef().nativeElement.focus();
                             }
                             else {
-                                focusableEls[currIndex - 1].focus();
+                                tabbableEls[currIndex - 1].focus();
                             }
                         }
                     }
@@ -222,13 +222,9 @@ export class SdSelect {
         effect(() => {
             const items = this._itemControls();
             const currentValue = this.value();
-            if (currentValue == null) {
-                this._selectedItemContentHTML.set(undefined);
-                return;
-            }
             if (this.selectMode() === "multi") {
                 const arr = currentValue;
-                if (arr.length === 0) {
+                if (arr == null || arr.length === 0) {
                     this._selectedItemContentHTML.set(undefined);
                     return;
                 }

package/dist/core/modal/injectFocusTrap.js

@@ -16,11 +16,11 @@ export function injectFocusTrap() {
     }
     function handleTabTrap(event) {
         const hostEl = elRef.nativeElement;
-        const focusableElements = getTabbableElements(hostEl);
-        if (focusableElements.length === 0)
+        const tabbableElements = getTabbableElements(hostEl);
+        if (tabbableElements.length === 0)
             return;
-        const first = focusableElements[0];
-        const last = focusableElements[focusableElements.length - 1];
+        const first = tabbableElements[0];
+        const last = tabbableElements[tabbableElements.length - 1];
         if (event.shiftKey) {
             if (document.activeElement === first) {
                 event.preventDefault();

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

@@ -89,11 +89,11 @@ export class SdModalProvider {
                     dialogEl.focus();
                 }
                 else {
-                    // 컨텐츠 영역에서 첫 포커스 가능 요소 검색
+                    // 컨텐츠 영역에서 첫 탭 이동 가능 요소 검색
                     const contentEl = modalEl.querySelector("._content");
-                    const firstFocusable = contentEl?.findFirstFocusableChild();
-                    if (firstFocusable !== undefined) {
-                        firstFocusable.focus();
+                    const firstTabbable = contentEl?.findFirstTabbableChild();
+                    if (firstTabbable !== undefined) {
+                        firstTabbable.focus();
                     }
                     else {
                         dialogEl.focus();

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

@@ -9,12 +9,12 @@ export class SdToastContainer {
         } }, inputs: { overlap: [1, "overlap"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdToastContainer_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["sd-toast-container {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  z-index: 9999;\n  pointer-events: none;\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  bottom: 0;\n  height: 100%;\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  max-width: none;\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, 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, changeDetection: 0 });
 }
 (() => { (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: `<ng-content />`, styles: ["sd-toast-container {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  z-index: 9999;\n  pointer-events: none;\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  bottom: 0;\n  height: 100%;\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  max-width: none;\n}"] }]
+                }, template: `<ng-content />`, 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}"] }]
     }], 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, forbidOrphanRendering: true }); })();

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,qBAwFa,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,qBAyHa,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"}

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

@@ -1,8 +1,8 @@
 import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, model, ViewEncapsulation, } from "@angular/core";
 import * as i0 from "@angular/core";
 const _c0 = ["*"];
-function SdToast_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 0);
+function SdToast_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 1);
     i0.ɵɵtext(1);
     i0.ɵɵdomElementEnd();
 } if (rf & 2) {
@@ -10,9 +10,9 @@ function SdToast_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.message());
 } }
-function SdToast_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 1);
-    i0.ɵɵdomElement(1, "div", 2);
+function SdToast_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 2);
+    i0.ɵɵdomElement(1, "div", 3);
     i0.ɵɵdomElementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -45,35 +45,40 @@ export class SdToast {
     }, ...(ngDevMode ? [{ debugName: "ariaLive" }] : /* istanbul ignore next */ []));
     static ɵfac = function SdToast_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdToast)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdToast, selectors: [["sd-toast"]], hostVars: 4, hostBindings: function SdToast_HostBindings(rf, ctx) { if (rf & 2) {
-            i0.ɵɵattribute("data-sd-open", ctx.open() || undefined)("data-sd-theme", ctx.theme())("role", ctx.ariaRole())("aria-live", ctx.ariaLive());
-        } }, inputs: { open: [1, "open"], useProgress: [1, "useProgress"], theme: [1, "theme"], progress: [1, "progress"], message: [1, "message"] }, outputs: { open: "openChange", progress: "progressChange", message: "messageChange" }, ngContentSelectors: _c0, decls: 3, vars: 2, consts: [[1, "_message"], [1, "_progress"], [1, "_progress-bar"]], template: function SdToast_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵattribute("data-sd-open", ctx.open())("data-sd-theme", ctx.theme())("role", ctx.ariaRole())("aria-live", ctx.ariaLive());
+        } }, inputs: { open: [1, "open"], useProgress: [1, "useProgress"], theme: [1, "theme"], progress: [1, "progress"], message: [1, "message"] }, outputs: { open: "openChange", progress: "progressChange", message: "messageChange" }, ngContentSelectors: _c0, decls: 4, vars: 2, consts: [[1, "_block"], [1, "_message"], [1, "_progress"], [1, "_progress-bar"]], template: function SdToast_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
-            i0.ɵɵconditionalCreate(0, SdToast_Conditional_0_Template, 2, 1, "div", 0);
-            i0.ɵɵprojection(1);
-            i0.ɵɵconditionalCreate(2, SdToast_Conditional_2_Template, 2, 2, "div", 1);
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵconditionalCreate(1, SdToast_Conditional_1_Template, 2, 1, "div", 1);
+            i0.ɵɵprojection(2);
+            i0.ɵɵconditionalCreate(3, SdToast_Conditional_3_Template, 2, 2, "div", 2);
+            i0.ɵɵdomElementEnd();
         } if (rf & 2) {
-            i0.ɵɵconditional(ctx.message() !== undefined ? 0 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.message() !== undefined ? 1 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.useProgress() ? 2 : -1);
-        } }, styles: ["sd-toast {\n  display: block;\n  position: relative;\n  max-width: 32.5rem;\n  width: 100%;\n  margin: var(--gap-sm);\n  padding: var(--gap-default) var(--gap-lg);\n  border-radius: var(--border-radius-default);\n  color: var(--text-trans-rev-default);\n  pointer-events: auto;\n  transform: translateY(-100%);\n  opacity: 0;\n  transition: transform var(--animation-duration) ease, opacity var(--animation-duration) ease;\n  box-shadow: 0 calc(12 * var(--elevation-size)) calc(12 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n}\nsd-toast[data-sd-open] {\n  transform: translateY(0);\n  opacity: 1;\n}\nsd-toast[data-sd-theme=gray] {\n  background: rgb(153.0022463699, 161.0057700366, 174.7317580236);\n}\nsd-toast[data-sd-theme=blue-gray] {\n  background: rgb(144.0364277624, 161.0825504589, 184.9359809919);\n}\nsd-toast[data-sd-theme=primary] {\n  background: hsl(212.7907636992, 106.3271487689%, 66.8390389975%);\n}\nsd-toast[data-sd-theme=secondary] {\n  background: hsl(212.7907636992, 106.3271487689%, 66.8390389975%);\n}\nsd-toast[data-sd-theme=info] {\n  background: hsl(186.1271591177, 175.0224558865%, 34.577706736%);\n}\nsd-toast[data-sd-theme=success] {\n  background: hsl(76.4778453101, 152.6473732821%, 35.6889214867%);\n}\nsd-toast[data-sd-theme=warning] {\n  background: hsl(31.4330872217, 102.5675912326%, 51.3170331393%);\n}\nsd-toast[data-sd-theme=danger] {\n  background: hsl(358.7593862564, 101.8439024907%, 69.8357359211%);\n}\nsd-toast > ._message {\n  word-break: break-all;\n  white-space: pre-wrap;\n}\nsd-toast > ._progress {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 0.25rem;\n  background: var(--trans-lighter);\n  border-radius: 0 0 var(--border-radius-default) var(--border-radius-default);\n  overflow: hidden;\n}\nsd-toast > ._progress > ._progress-bar {\n  height: 100%;\n  background: var(--trans-default);\n  transition: width 0.3s ease;\n}\n@media all and (max-width: 520px) {\n  sd-toast {\n    max-width: none;\n    margin: var(--gap-xs);\n    border-radius: 0;\n  }\n}"], encapsulation: 2, changeDetection: 0 });
+            i0.ɵɵconditional(ctx.useProgress() ? 3 : -1);
+        } }, styles: ["sd-toast {\n  display: block;\n  margin-bottom: var(--gap-sm);\n  text-align: center;\n  width: 100%;\n  pointer-events: none;\n}\nsd-toast > ._block {\n  display: inline-block;\n  text-align: left;\n  color: var(--text-trans-rev-default);\n  transform: translateY(-100%);\n  border-radius: var(--border-radius-lg);\n  opacity: 0;\n  box-shadow: 0 calc(12 * var(--elevation-size)) calc(12 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  pointer-events: auto;\n}\nsd-toast > ._block > ._message {\n  padding: var(--gap-default) var(--gap-lg);\n  word-break: break-all;\n  white-space: pre-wrap;\n}\nsd-toast > ._block > ._progress {\n  background: var(--theme-gray-default);\n  height: 4px;\n  border-radius: var(--border-radius-xl);\n  margin: 0 4px 4px 4px;\n}\nsd-toast > ._block > ._progress > ._progress-bar {\n  border-radius: var(--border-radius-xl);\n  height: 4px;\n  transition: width 1s ease-out;\n}\nsd-toast[data-sd-theme=gray] > ._block {\n  background: rgb(153.0022463699, 161.0057700366, 174.7317580236);\n}\nsd-toast[data-sd-theme=gray] > ._block > ._progress {\n  background: rgb(101.0316959931, 111.1055377773, 128.3821070824);\n}\nsd-toast[data-sd-theme=gray] > ._block > ._progress > ._progress-bar {\n  background: rgb(224.400673911, 226.801731011, 230.9195274071);\n}\nsd-toast[data-sd-theme=blue-gray] > ._block {\n  background: rgb(144.0364277624, 161.0825504589, 184.9359809919);\n}\nsd-toast[data-sd-theme=blue-gray] > ._block > ._progress {\n  background: rgb(95.4928842953, 118.7256854589, 151.2364222704);\n}\nsd-toast[data-sd-theme=blue-gray] > ._block > ._progress > ._progress-bar {\n  background: rgb(227.2591069406, 231.5206376147, 237.483995248);\n}\nsd-toast[data-sd-theme=primary] > ._block {\n  background: hsl(212.7907636992, 106.3271487689%, 66.8390389975%);\n}\nsd-toast[data-sd-theme=primary] > ._block > ._progress {\n  background: hsl(212.7907636992, 106.3271487689%, 50.1292792481%);\n}\nsd-toast[data-sd-theme=primary] > ._block > ._progress > ._progress-bar {\n  background: hsl(212.7907636992, 106.3271487689%, 91.7097597494%);\n}\nsd-toast[data-sd-theme=secondary] > ._block {\n  background: hsl(212.7907636992, 106.3271487689%, 66.8390389975%);\n}\nsd-toast[data-sd-theme=secondary] > ._block > ._progress {\n  background: hsl(212.7907636992, 106.3271487689%, 50.1292792481%);\n}\nsd-toast[data-sd-theme=secondary] > ._block > ._progress > ._progress-bar {\n  background: hsl(212.7907636992, 106.3271487689%, 91.7097597494%);\n}\nsd-toast[data-sd-theme=info] > ._block {\n  background: hsl(186.1271591177, 175.0224558865%, 34.577706736%);\n}\nsd-toast[data-sd-theme=info] > ._block > ._progress {\n  background: hsl(186.1271591177, 175.0224558865%, 25.933280052%);\n}\nsd-toast[data-sd-theme=info] > ._block > ._progress > ._progress-bar {\n  background: hsl(186.1271591177, 175.0224558865%, 83.644426684%);\n}\nsd-toast[data-sd-theme=success] > ._block {\n  background: hsl(76.4778453101, 152.6473732821%, 35.6889214867%);\n}\nsd-toast[data-sd-theme=success] > ._block > ._progress {\n  background: hsl(76.4778453101, 152.6473732821%, 26.766691115%);\n}\nsd-toast[data-sd-theme=success] > ._block > ._progress > ._progress-bar {\n  background: hsl(76.4778453101, 152.6473732821%, 83.9222303717%);\n}\nsd-toast[data-sd-theme=warning] > ._block {\n  background: hsl(31.4330872217, 102.5675912326%, 51.3170331393%);\n}\nsd-toast[data-sd-theme=warning] > ._block > ._progress {\n  background: hsl(31.4330872217, 102.5675912326%, 38.4877748545%);\n}\nsd-toast[data-sd-theme=warning] > ._block > ._progress > ._progress-bar {\n  background: hsl(31.4330872217, 102.5675912326%, 87.8292582848%);\n}\nsd-toast[data-sd-theme=danger] > ._block {\n  background: hsl(358.7593862564, 101.8439024907%, 69.8357359211%);\n}\nsd-toast[data-sd-theme=danger] > ._block > ._progress {\n  background: hsl(358.7593862564, 101.8439024907%, 52.3768019408%);\n}\nsd-toast[data-sd-theme=danger] > ._block > ._progress > ._progress-bar {\n  background: hsl(358.7593862564, 101.8439024907%, 92.4589339803%);\n}\nsd-toast[data-sd-open=true] > ._block {\n  transform: none;\n  transition: var(--animation-duration) ease-out;\n  transition-property: transform, opacity;\n  opacity: 1;\n}\nsd-toast[data-sd-open=false] > ._block {\n  transform: translateY(-100%);\n  transition: var(--animation-duration) ease-in;\n  transition-property: transform, opacity;\n  opacity: 0;\n}\n@media all and (max-width: 520px) {\n  sd-toast > ._block {\n    border-radius: calc(var(--line-height) / 2);\n    transform: translateY(100%);\n  }\n  sd-toast > ._block > ._message {\n    padding: var(--gap-xs) var(--gap-default);\n  }\n  sd-toast[data-sd-open=false] > ._block {\n    transform: translateY(100%);\n  }\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdToast, [{
         type: Component,
         args: [{ selector: "sd-toast", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, host: {
-                    "[attr.data-sd-open]": "open() || undefined",
+                    "[attr.data-sd-open]": "open()",
                     "[attr.data-sd-theme]": "theme()",
                     "[attr.role]": "ariaRole()",
                     "[attr.aria-live]": "ariaLive()",
                 }, template: `
-    @if (message() !== undefined) {
-      <div class="_message">{{ message() }}</div>
-    }
-    <ng-content />
-    @if (useProgress()) {
-      <div class="_progress">
-        <div class="_progress-bar" [style.width.%]="progress()"></div>
-      </div>
-    }
-  `, styles: ["sd-toast {\n  display: block;\n  position: relative;\n  max-width: 32.5rem;\n  width: 100%;\n  margin: var(--gap-sm);\n  padding: var(--gap-default) var(--gap-lg);\n  border-radius: var(--border-radius-default);\n  color: var(--text-trans-rev-default);\n  pointer-events: auto;\n  transform: translateY(-100%);\n  opacity: 0;\n  transition: transform var(--animation-duration) ease, opacity var(--animation-duration) ease;\n  box-shadow: 0 calc(12 * var(--elevation-size)) calc(12 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n}\nsd-toast[data-sd-open] {\n  transform: translateY(0);\n  opacity: 1;\n}\nsd-toast[data-sd-theme=gray] {\n  background: rgb(153.0022463699, 161.0057700366, 174.7317580236);\n}\nsd-toast[data-sd-theme=blue-gray] {\n  background: rgb(144.0364277624, 161.0825504589, 184.9359809919);\n}\nsd-toast[data-sd-theme=primary] {\n  background: hsl(212.7907636992, 106.3271487689%, 66.8390389975%);\n}\nsd-toast[data-sd-theme=secondary] {\n  background: hsl(212.7907636992, 106.3271487689%, 66.8390389975%);\n}\nsd-toast[data-sd-theme=info] {\n  background: hsl(186.1271591177, 175.0224558865%, 34.577706736%);\n}\nsd-toast[data-sd-theme=success] {\n  background: hsl(76.4778453101, 152.6473732821%, 35.6889214867%);\n}\nsd-toast[data-sd-theme=warning] {\n  background: hsl(31.4330872217, 102.5675912326%, 51.3170331393%);\n}\nsd-toast[data-sd-theme=danger] {\n  background: hsl(358.7593862564, 101.8439024907%, 69.8357359211%);\n}\nsd-toast > ._message {\n  word-break: break-all;\n  white-space: pre-wrap;\n}\nsd-toast > ._progress {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 0.25rem;\n  background: var(--trans-lighter);\n  border-radius: 0 0 var(--border-radius-default) var(--border-radius-default);\n  overflow: hidden;\n}\nsd-toast > ._progress > ._progress-bar {\n  height: 100%;\n  background: var(--trans-default);\n  transition: width 0.3s ease;\n}\n@media all and (max-width: 520px) {\n  sd-toast {\n    max-width: none;\n    margin: var(--gap-xs);\n    border-radius: 0;\n  }\n}"] }]
+    <div class="_block">
+      @if (message() !== undefined) {
+        <div class="_message">{{ message() }}</div>
+      }
+      <ng-content />
+      @if (useProgress()) {
+        <div class="_progress">
+          <div class="_progress-bar" [style.width.%]="progress()"></div>
+        </div>
+      }
+    </div>
+  `, styles: ["sd-toast {\n  display: block;\n  margin-bottom: var(--gap-sm);\n  text-align: center;\n  width: 100%;\n  pointer-events: none;\n}\nsd-toast > ._block {\n  display: inline-block;\n  text-align: left;\n  color: var(--text-trans-rev-default);\n  transform: translateY(-100%);\n  border-radius: var(--border-radius-lg);\n  opacity: 0;\n  box-shadow: 0 calc(12 * var(--elevation-size)) calc(12 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  pointer-events: auto;\n}\nsd-toast > ._block > ._message {\n  padding: var(--gap-default) var(--gap-lg);\n  word-break: break-all;\n  white-space: pre-wrap;\n}\nsd-toast > ._block > ._progress {\n  background: var(--theme-gray-default);\n  height: 4px;\n  border-radius: var(--border-radius-xl);\n  margin: 0 4px 4px 4px;\n}\nsd-toast > ._block > ._progress > ._progress-bar {\n  border-radius: var(--border-radius-xl);\n  height: 4px;\n  transition: width 1s ease-out;\n}\nsd-toast[data-sd-theme=gray] > ._block {\n  background: rgb(153.0022463699, 161.0057700366, 174.7317580236);\n}\nsd-toast[data-sd-theme=gray] > ._block > ._progress {\n  background: rgb(101.0316959931, 111.1055377773, 128.3821070824);\n}\nsd-toast[data-sd-theme=gray] > ._block > ._progress > ._progress-bar {\n  background: rgb(224.400673911, 226.801731011, 230.9195274071);\n}\nsd-toast[data-sd-theme=blue-gray] > ._block {\n  background: rgb(144.0364277624, 161.0825504589, 184.9359809919);\n}\nsd-toast[data-sd-theme=blue-gray] > ._block > ._progress {\n  background: rgb(95.4928842953, 118.7256854589, 151.2364222704);\n}\nsd-toast[data-sd-theme=blue-gray] > ._block > ._progress > ._progress-bar {\n  background: rgb(227.2591069406, 231.5206376147, 237.483995248);\n}\nsd-toast[data-sd-theme=primary] > ._block {\n  background: hsl(212.7907636992, 106.3271487689%, 66.8390389975%);\n}\nsd-toast[data-sd-theme=primary] > ._block > ._progress {\n  background: hsl(212.7907636992, 106.3271487689%, 50.1292792481%);\n}\nsd-toast[data-sd-theme=primary] > ._block > ._progress > ._progress-bar {\n  background: hsl(212.7907636992, 106.3271487689%, 91.7097597494%);\n}\nsd-toast[data-sd-theme=secondary] > ._block {\n  background: hsl(212.7907636992, 106.3271487689%, 66.8390389975%);\n}\nsd-toast[data-sd-theme=secondary] > ._block > ._progress {\n  background: hsl(212.7907636992, 106.3271487689%, 50.1292792481%);\n}\nsd-toast[data-sd-theme=secondary] > ._block > ._progress > ._progress-bar {\n  background: hsl(212.7907636992, 106.3271487689%, 91.7097597494%);\n}\nsd-toast[data-sd-theme=info] > ._block {\n  background: hsl(186.1271591177, 175.0224558865%, 34.577706736%);\n}\nsd-toast[data-sd-theme=info] > ._block > ._progress {\n  background: hsl(186.1271591177, 175.0224558865%, 25.933280052%);\n}\nsd-toast[data-sd-theme=info] > ._block > ._progress > ._progress-bar {\n  background: hsl(186.1271591177, 175.0224558865%, 83.644426684%);\n}\nsd-toast[data-sd-theme=success] > ._block {\n  background: hsl(76.4778453101, 152.6473732821%, 35.6889214867%);\n}\nsd-toast[data-sd-theme=success] > ._block > ._progress {\n  background: hsl(76.4778453101, 152.6473732821%, 26.766691115%);\n}\nsd-toast[data-sd-theme=success] > ._block > ._progress > ._progress-bar {\n  background: hsl(76.4778453101, 152.6473732821%, 83.9222303717%);\n}\nsd-toast[data-sd-theme=warning] > ._block {\n  background: hsl(31.4330872217, 102.5675912326%, 51.3170331393%);\n}\nsd-toast[data-sd-theme=warning] > ._block > ._progress {\n  background: hsl(31.4330872217, 102.5675912326%, 38.4877748545%);\n}\nsd-toast[data-sd-theme=warning] > ._block > ._progress > ._progress-bar {\n  background: hsl(31.4330872217, 102.5675912326%, 87.8292582848%);\n}\nsd-toast[data-sd-theme=danger] > ._block {\n  background: hsl(358.7593862564, 101.8439024907%, 69.8357359211%);\n}\nsd-toast[data-sd-theme=danger] > ._block > ._progress {\n  background: hsl(358.7593862564, 101.8439024907%, 52.3768019408%);\n}\nsd-toast[data-sd-theme=danger] > ._block > ._progress > ._progress-bar {\n  background: hsl(358.7593862564, 101.8439024907%, 92.4589339803%);\n}\nsd-toast[data-sd-open=true] > ._block {\n  transform: none;\n  transition: var(--animation-duration) ease-out;\n  transition-property: transform, opacity;\n  opacity: 1;\n}\nsd-toast[data-sd-open=false] > ._block {\n  transform: translateY(-100%);\n  transition: var(--animation-duration) ease-in;\n  transition-property: transform, opacity;\n  opacity: 0;\n}\n@media all and (max-width: 520px) {\n  sd-toast > ._block {\n    border-radius: calc(var(--line-height) / 2);\n    transform: translateY(100%);\n  }\n  sd-toast > ._block > ._message {\n    padding: var(--gap-xs) var(--gap-default);\n  }\n  sd-toast[data-sd-open=false] > ._block {\n    transform: translateY(100%);\n  }\n}"] }]
     }], null, { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], useProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "useProgress", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }, { type: i0.Output, args: ["progressChange"] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }, { type: i0.Output, args: ["messageChange"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdToast, { className: "SdToast", filePath: "packages/angular/src/core/toast/sd-toast.ts", lineNumber: 103, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdToast, { className: "SdToast", filePath: "packages/angular/src/core/toast/sd-toast.ts", lineNumber: 136, forbidOrphanRendering: true }); })();

package/dist/core/validation/setupInvalid.js

@@ -1,7 +1,7 @@
 import { DestroyRef, effect, ElementRef, inject, Renderer2 } from "@angular/core";
 import { setSafeStyle } from "../setSafeStyle";
 import { Uuid } from "@simplysm/core-common";
-import { isFocusable } from "tabbable";
+import { isTabbable } from "tabbable";
 export function setupInvalid(getInvalidMessage) {
     const elRef = inject(ElementRef);
     const renderer = inject(Renderer2);
@@ -52,6 +52,7 @@ function createInputHiddenEl(renderer, hostEl) {
     newEl.type = "text";
     newEl.name = Uuid.generate().toString();
     newEl.className = "sd-invalid-input";
+    newEl.tabIndex = -1;
     setSafeStyle(renderer, newEl, {
         position: "absolute",
         left: "2px",
@@ -64,10 +65,10 @@ function createInputHiddenEl(renderer, hostEl) {
         userSelect: "none",
     });
     renderer.listen(newEl, "focus", () => {
-        const focusableElement = (isFocusable(hostEl) ? hostEl : hostEl.findFirstFocusableChild()) ??
-            hostEl.findFocusableParent();
-        if (focusableElement !== undefined) {
-            focusableElement.focus();
+        const tabbableElement = (isTabbable(hostEl) ? hostEl : hostEl.findFirstTabbableChild()) ??
+            hostEl.findTabbableParent();
+        if (tabbableElement !== undefined) {
+            tabbableElement.focus();
         }
     });
     renderer.appendChild(hostEl, newEl);

package/dist/data/sheet/useSheetCellAgent.js

@@ -20,9 +20,9 @@ export function useSheetCellAgent(options) {
             const cell = options.domAccessor.getCell(r, c);
             if (cell == null)
                 return;
-            const focusable = cell.findFirstFocusableChild();
-            if (focusable !== undefined) {
-                focusable.focus();
+            const tabbable = cell.findFirstTabbableChild();
+            if (tabbable !== undefined) {
+                tabbable.focus();
             }
         });
     }
@@ -45,9 +45,9 @@ export function useSheetCellAgent(options) {
                 const targetCell = options.domAccessor.getCell(r, c);
                 if (targetCell == null)
                     return;
-                const focusable = targetCell.findFirstFocusableChild();
-                if (focusable !== undefined) {
-                    focusable.focus();
+                const tabbable = targetCell.findFirstTabbableChild();
+                if (tabbable !== undefined) {
+                    tabbable.focus();
                 }
             });
         }

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

@@ -45,7 +45,7 @@ function SdSidebarMenu_ng_template_4_For_1_Template(rf, ctx) { if (rf & 1) {
     const menu_r2 = ctx.$implicit;
     const depth_r4 = i0.ɵɵnextContext().depth;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("padding-left", depth_r4 > 0 ? (depth_r4 + 1) * 0.5 : undefined, "em");
+    i0.ɵɵstyleProp("text-indent", depth_r4 > 0 ? (depth_r4 + 1) * 0.5 : undefined, "em");
     i0.ɵɵproperty("sdRouterLink", ctx_r2.getMenuRouterLinkOption(menu_r2))("selected", ctx_r2.getIsMenuSelected(menu_r2))("layout", depth_r4 === 0 ? ctx_r2.rootLayout() : "accordion");
     i0.ɵɵadvance();
     i0.ɵɵconditional(menu_r2.icon ? 1 : -1);
@@ -81,7 +81,7 @@ export class SdSidebarMenu {
     static ɵfac = function SdSidebarMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdSidebarMenu)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSidebarMenu, selectors: [["sd-sidebar-menu"]], hostAttrs: [1, "flex-column", "fill"], hostVars: 1, hostBindings: function SdSidebarMenu_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-root-layout", ctx.rootLayout());
-        } }, inputs: { menus: [1, "menus"], layout: [1, "layout"], getMenuIsSelectedFn: [1, "getMenuIsSelectedFn"] }, decls: 6, vars: 6, consts: [["itemTpl", ""], [1, "control-header", "p-default"], [1, "flex-fill", 3, "inset"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "typed"], [3, "padding-left", "sdRouterLink", "selected", "layout"], [3, "click", "sdRouterLink", "selected", "layout"], [3, "inset"], [3, "svg"]], template: function SdSidebarMenu_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { menus: [1, "menus"], layout: [1, "layout"], getMenuIsSelectedFn: [1, "getMenuIsSelectedFn"] }, decls: 6, vars: 6, consts: [["itemTpl", ""], [1, "control-header", "p-default"], [1, "flex-fill", 3, "inset"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "typed"], [3, "text-indent", "sdRouterLink", "selected", "layout"], [3, "click", "sdRouterLink", "selected", "layout"], [3, "inset"], [3, "svg"]], template: function SdSidebarMenu_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵtext(1, "MENU");
             i0.ɵɵelementEnd();
@@ -129,7 +129,7 @@ export class SdSidebarMenu {
     <ng-template #itemTpl [typed]="itemTemplateType" let-currMenus="menus" let-depth="depth">
       @for (menu of currMenus; track menu.codeChain.join(".")) {
         <sd-list-item
-          [style.padding-left.em]="depth > 0 ? (depth + 1) * 0.5 : undefined"
+          [style.text-indent.em]="depth > 0 ? (depth + 1) * 0.5 : undefined"
           [sdRouterLink]="getMenuRouterLinkOption(menu)"
           (click)="onMenuClick(menu)"
           [selected]="getIsMenuSelected(menu)"

package/dist/styles.css

@@ -283,7 +283,7 @@
     border: 2px solid transparent;
   }
   *::-webkit-scrollbar-track:hover {
-    background-color: var(--theme-gray-lighter);
+    background-color: var(--theme-gray-lightest);
     border-radius: 0.6667rem;
     background-clip: padding-box;
     border: 2px solid transparent;

package/package.json

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

package/scss/commons/_styles.scss

@@ -55,7 +55,7 @@
 
   *::-webkit-scrollbar-track {
     &:hover {
-      background-color: var(--theme-gray-lighter);
+      background-color: var(--theme-gray-lightest);
       border-radius: 0.6667rem;
       background-clip: padding-box;
       border: 2px solid transparent;

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

@@ -47,17 +47,23 @@ export class SdCollapse {
 
   contentHeight = signal(0);
 
+  private readonly _initialized = signal(false);
+
   contentMarginTop = computed(() => {
     return this.open() ? "" : `-${this.contentHeight()}px`;
   });
 
   contentTransition = computed(() => {
+    if (!this._initialized()) return "";
     return this.open() ? "margin-top 0.1s ease-out" : "margin-top 0.1s ease-in";
   });
 
   constructor() {
     afterNextRender(() => {
       this.contentHeight.set(this._contentElRef().nativeElement.offsetHeight);
+      requestAnimationFrame(() => {
+        this._initialized.set(true);
+      });
     });
 
     effect(() => {

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

@@ -129,11 +129,11 @@ export class SdDropdown {
         this._openPopup();
       } else {
         const popupEl = this.popupElRef().nativeElement;
-        const focusable = popupEl.findFirstFocusableChild();
-        if (focusable) {
+        const tabbable = popupEl.findFirstTabbableChild();
+        if (tabbable) {
           event.preventDefault();
           event.stopPropagation();
-          focusable.focus();
+          tabbable.focus();
         }
       }
     }
@@ -261,9 +261,9 @@ export class SdDropdown {
       mouseoverEl instanceof HTMLElement &&
       (contentEl.contains(mouseoverEl) === true || popupEl.contains(mouseoverEl) === true)
     ) {
-      const focusable = popupEl.findFirstFocusableChild();
-      if (focusable != null) {
-        focusable.focus();
+      const tabbable = popupEl.findFirstTabbableChild();
+      if (tabbable != null) {
+        tabbable.focus();
       } else {
         contentEl.focus();
       }

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

@@ -97,12 +97,6 @@ import { setupRipple } from "../../core/ripple/setupRipple";
             background: transparent;
           }
         }
-
-        &[data-sd-has-children="false"] {
-          > ._content {
-            padding-left: calc(var(--gap-default) + var(--gap-sm) + 0.75em);
-          }
-        }
       }
     `,
   ],

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

@@ -279,15 +279,15 @@ export class SdSelect<M extends "single" | "multi", T> {
             event.preventDefault();
             event.stopPropagation();
 
-            const focusableEls = tabbable(popupEl);
-            if (focusableEls.length === 0) return;
+            const tabbableEls = tabbable(popupEl);
+            if (tabbableEls.length === 0) return;
 
-            const currIndex = focusableEls.indexOf(document.activeElement as HTMLElement);
+            const currIndex = tabbableEls.indexOf(document.activeElement as HTMLElement);
 
             if (event.key === "ArrowDown") {
               const nextIndex = currIndex + 1;
-              if (nextIndex < focusableEls.length) {
-                focusableEls[nextIndex].focus();
+              if (nextIndex < tabbableEls.length) {
+                tabbableEls[nextIndex].focus();
               }
             } else {
               // ArrowUp
@@ -295,7 +295,7 @@ export class SdSelect<M extends "single" | "multi", T> {
                 // Return focus to dropdown trigger
                 this._dropdownElRef().nativeElement.focus();
               } else {
-                focusableEls[currIndex - 1].focus();
+                tabbableEls[currIndex - 1].focus();
               }
             }
           }
@@ -321,14 +321,9 @@ export class SdSelect<M extends "single" | "multi", T> {
       const items = this._itemControls();
       const currentValue = this.value();
 
-      if (currentValue == null) {
-        this._selectedItemContentHTML.set(undefined);
-        return;
-      }
-
       if (this.selectMode() === "multi") {
-        const arr = currentValue as T[];
-        if (arr.length === 0) {
+        const arr = currentValue as T[] | undefined;
+        if (arr == null || arr.length === 0) {
           this._selectedItemContentHTML.set(undefined);
           return;
         }

package/src/core/modal/injectFocusTrap.ts

@@ -21,11 +21,11 @@ export function injectFocusTrap(): {
 
   function handleTabTrap(event: KeyboardEvent): void {
     const hostEl = elRef.nativeElement;
-    const focusableElements = getTabbableElements(hostEl);
-    if (focusableElements.length === 0) return;
+    const tabbableElements = getTabbableElements(hostEl);
+    if (tabbableElements.length === 0) return;
 
-    const first = focusableElements[0];
-    const last = focusableElements[focusableElements.length - 1];
+    const first = tabbableElements[0];
+    const last = tabbableElements[tabbableElements.length - 1];
 
     if (event.shiftKey) {
       if (document.activeElement === first) {

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

@@ -170,11 +170,11 @@ export class SdModalProvider {
         if (options?.noFirstControlFocusing === true) {
           dialogEl.focus();
         } else {
-          // 컨텐츠 영역에서 첫 포커스 가능 요소 검색
+          // 컨텐츠 영역에서 첫 탭 이동 가능 요소 검색
           const contentEl = modalEl.querySelector("._content");
-          const firstFocusable = contentEl?.findFirstFocusableChild();
-          if (firstFocusable !== undefined) {
-            firstFocusable.focus();
+          const firstTabbable = contentEl?.findFirstTabbableChild();
+          if (firstTabbable !== undefined) {
+            firstTabbable.focus();
           } else {
             dialogEl.focus();
           }

package/src/core/toast/sd-toast-container.ts

@@ -18,18 +18,21 @@ import {
   styles: [
     /* language=SCSS */ `
       @use "../../../scss/commons/variables";
+      @use "../../../scss/commons/mixins";
       @use "sass:map";
 
       sd-toast-container {
+        display: flex;
         position: fixed;
         top: 0;
         left: 0;
-        right: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        z-index: map.get(variables.$vars, z-index, toast);
+        height: 100%;
+        width: 100%;
         pointer-events: none;
+        padding: var(--gap-xxl);
+        z-index: map.get(variables.$vars, z-index, toast);
+
+        @include mixins.flex-direction(column);
 
         @media all and (max-width: variables.$breakpoint-mobile) {
           flex-direction: column-reverse;
@@ -37,8 +40,6 @@ import {
 
         &[data-sd-overlap] {
           display: block;
-          bottom: 0;
-          height: 100%;
 
           > sd-toast {
             position: absolute;
@@ -46,7 +47,6 @@ import {
             left: var(--gap-xxl);
             right: var(--gap-xxl);
             width: auto;
-            max-width: none;
           }
         }
       }

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

@@ -18,21 +18,23 @@ const ASSERTIVE_THEMES: ReadonlySet<string> = new Set(["warning", "danger"]);
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   host: {
-    "[attr.data-sd-open]": "open() || undefined",
+    "[attr.data-sd-open]": "open()",
     "[attr.data-sd-theme]": "theme()",
     "[attr.role]": "ariaRole()",
     "[attr.aria-live]": "ariaLive()",
   },
   template: `
-    @if (message() !== undefined) {
-      <div class="_message">{{ message() }}</div>
-    }
-    <ng-content />
-    @if (useProgress()) {
-      <div class="_progress">
-        <div class="_progress-bar" [style.width.%]="progress()"></div>
-      </div>
-    }
+    <div class="_block">
+      @if (message() !== undefined) {
+        <div class="_message">{{ message() }}</div>
+      }
+      <ng-content />
+      @if (useProgress()) {
+        <div class="_progress">
+          <div class="_progress-bar" [style.width.%]="progress()"></div>
+        </div>
+      }
+    </div>
   `,
   styles: [
     /* language=SCSS */ `
@@ -42,59 +44,90 @@ const ASSERTIVE_THEMES: ReadonlySet<string> = new Set(["warning", "danger"]);
 
       sd-toast {
         display: block;
-        position: relative;
-        max-width: 32.5rem;
+        margin-bottom: var(--gap-sm);
+        text-align: center;
         width: 100%;
-        margin: var(--gap-sm);
-        padding: var(--gap-default) var(--gap-lg);
-        border-radius: var(--border-radius-default);
-        color: var(--text-trans-rev-default);
-        pointer-events: auto;
-        transform: translateY(-100%);
-        opacity: 0;
-        transition:
-          transform var(--animation-duration) ease,
-          opacity var(--animation-duration) ease;
-
-        @include mixins.elevation(12);
-
-        &[data-sd-open] {
-          transform: translateY(0);
-          opacity: 1;
+        pointer-events: none;
+
+        > ._block {
+          display: inline-block;
+          text-align: left;
+          color: var(--text-trans-rev-default);
+          transform: translateY(-100%);
+          border-radius: var(--border-radius-lg);
+          opacity: 0;
+          @include mixins.elevation(12);
+          pointer-events: auto;
+
+          > ._message {
+            padding: var(--gap-default) var(--gap-lg);
+            word-break: break-all;
+            white-space: pre-wrap;
+          }
+
+          > ._progress {
+            background: var(--theme-gray-default);
+            height: 4px;
+            border-radius: var(--border-radius-xl);
+            margin: 0 4px 4px 4px;
+
+            > ._progress-bar {
+              border-radius: var(--border-radius-xl);
+              height: 4px;
+              transition: width 1s ease-out;
+            }
+          }
         }
 
         @each $theme-name, $theme-map in map.get(variables.$vars, theme) {
           &[data-sd-theme="#{$theme-name}"] {
-            background: map.get($theme-map, default);
+            > ._block {
+              background: map.get($theme-map, default);
+
+              > ._progress {
+                background: map.get($theme-map, darker);
+
+                > ._progress-bar {
+                  background: map.get($theme-map, lighter);
+                }
+              }
+            }
           }
         }
 
-        > ._message {
-          word-break: break-all;
-          white-space: pre-wrap;
+        &[data-sd-open="true"] {
+          > ._block {
+            transform: none;
+            transition: var(--animation-duration) ease-out;
+            transition-property: transform, opacity;
+            opacity: 1;
+          }
         }
 
-        > ._progress {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          height: 0.25rem;
-          background: var(--trans-lighter);
-          border-radius: 0 0 var(--border-radius-default) var(--border-radius-default);
-          overflow: hidden;
-
-          > ._progress-bar {
-            height: 100%;
-            background: var(--trans-default);
-            transition: width 0.3s ease;
+        &[data-sd-open="false"] {
+          > ._block {
+            transform: translateY(-100%);
+            transition: var(--animation-duration) ease-in;
+            transition-property: transform, opacity;
+            opacity: 0;
           }
         }
 
         @media all and (max-width: variables.$breakpoint-mobile) {
-          max-width: none;
-          margin: var(--gap-xs);
-          border-radius: 0;
+          > ._block {
+            border-radius: calc(var(--line-height) / 2);
+            transform: translateY(100%);
+
+            > ._message {
+              padding: var(--gap-xs) var(--gap-default);
+            }
+          }
+
+          &[data-sd-open="false"] {
+            > ._block {
+              transform: translateY(100%);
+            }
+          }
         }
       }
     `,

package/src/core/validation/setupInvalid.ts

@@ -1,7 +1,7 @@
 import { DestroyRef, effect, ElementRef, inject, Renderer2 } from "@angular/core";
 import { setSafeStyle } from "../setSafeStyle";
 import { Uuid } from "@simplysm/core-common";
-import { isFocusable } from "tabbable";
+import { isTabbable } from "tabbable";
 
 export function setupInvalid(getInvalidMessage: () => string): void {
   const elRef = inject<ElementRef<HTMLElement>>(ElementRef);
@@ -65,6 +65,7 @@ function createInputHiddenEl(renderer: Renderer2, hostEl: HTMLElement): HTMLInpu
   newEl.type = "text";
   newEl.name = Uuid.generate().toString();
   newEl.className = "sd-invalid-input";
+  newEl.tabIndex = -1;
   setSafeStyle(renderer, newEl, {
     position: "absolute",
     left: "2px",
@@ -79,11 +80,11 @@ function createInputHiddenEl(renderer: Renderer2, hostEl: HTMLElement): HTMLInpu
   });
 
   renderer.listen(newEl, "focus", () => {
-    const focusableElement =
-      (isFocusable(hostEl) ? hostEl : hostEl.findFirstFocusableChild()) ??
-      hostEl.findFocusableParent();
-    if (focusableElement !== undefined) {
-      focusableElement.focus();
+    const tabbableElement =
+      (isTabbable(hostEl) ? hostEl : hostEl.findFirstTabbableChild()) ??
+      hostEl.findTabbableParent();
+    if (tabbableElement !== undefined) {
+      tabbableElement.focus();
     }
   });
 

package/src/data/sheet/useSheetCellAgent.ts

@@ -25,9 +25,9 @@ export function useSheetCellAgent(options: {
     queueMicrotask(() => {
       const cell = options.domAccessor.getCell(r, c);
       if (cell == null) return;
-      const focusable = cell.findFirstFocusableChild();
-      if (focusable !== undefined) {
-        focusable.focus();
+      const tabbable =cell.findFirstTabbableChild();
+      if (tabbable !== undefined) {
+        tabbable.focus();
       }
     });
   }
@@ -51,9 +51,9 @@ export function useSheetCellAgent(options: {
         _isTransitioning = false;
         const targetCell = options.domAccessor.getCell(r, c);
         if (targetCell == null) return;
-        const focusable = targetCell.findFirstFocusableChild();
-        if (focusable !== undefined) {
-          focusable.focus();
+        const tabbable =targetCell.findFirstTabbableChild();
+        if (tabbable !== undefined) {
+          tabbable.focus();
         }
       });
     } else {

package/src/layout/sidebar/sd-sidebar-menu.ts

@@ -42,7 +42,7 @@ import { NgIcon } from "@ng-icons/core";
     <ng-template #itemTpl [typed]="itemTemplateType" let-currMenus="menus" let-depth="depth">
       @for (menu of currMenus; track menu.codeChain.join(".")) {
         <sd-list-item
-          [style.padding-left.em]="depth > 0 ? (depth + 1) * 0.5 : undefined"
+          [style.text-indent.em]="depth > 0 ? (depth + 1) * 0.5 : undefined"
           [sdRouterLink]="getMenuRouterLinkOption(menu)"
           (click)="onMenuClick(menu)"
           [selected]="getIsMenuSelected(menu)"