@simplysm/angular 14.1.20 → 14.2.1

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

@@ -1 +1 @@
-{"version":3,"file":"sd-gap.d.ts","sourceRoot":"","sources":["../../../src/controls/gap/sd-gap.ts"],"names":[],"mappings":";AAEA,qBAkCa,KAAK;IAChB,MAAM,yGAAkE;IACxE,QAAQ,0DAAmB;IAC3B,KAAK,yGAAkE;IACvE,OAAO,0DAAmB;IAC1B,OAAO,0DAAmB;IAE1B,aAAa,gFAcV;yCArBQ,KAAK;2CAAL,KAAK;CAsBjB"}
+{"version":3,"file":"sd-gap.d.ts","sourceRoot":"","sources":["../../../src/controls/gap/sd-gap.ts"],"names":[],"mappings":";AAQA,qBAkCa,KAAK;IAChB,MAAM,yGAAkE;IACxE,QAAQ,0DAAmB;IAC3B,KAAK,yGAAkE;IACvE,OAAO,0DAAmB;IAC1B,OAAO,0DAAmB;IAE1B,aAAa,gFAUV;yCAjBQ,KAAK;2CAAL,KAAK;CAkBjB"}

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation, } from "@angular/core";
 import * as i0 from "@angular/core";
 export class SdGap {
     height = input(/* @ts-ignore */
@@ -15,9 +15,7 @@ export class SdGap {
         if (this.widthPx() === 0 || this.heightPx() === 0 || this.widthEm() === 0) {
             return "none";
         }
-        else if (this.width() != null ||
-            this.widthPx() != null ||
-            this.widthEm() != null) {
+        else if (this.width() != null || this.widthPx() != null || this.widthEm() != null) {
             return "inline-block";
         }
         else if (this.height() != null || this.heightPx() != null) {
@@ -32,7 +30,7 @@ export class SdGap {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdGap, selectors: [["sd-gap"]], hostVars: 10, hostBindings: function SdGap_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-height", ctx.height())("data-sd-width", ctx.width());
             i0.ɵɵstyleProp("height", ctx.heightPx(), "px")("width", ctx.widthPx(), "px")("width", ctx.widthEm(), "em")("display", ctx._displayStyle());
-        } }, inputs: { height: [1, "height"], heightPx: [1, "heightPx"], width: [1, "width"], widthPx: [1, "widthPx"], widthEm: [1, "widthEm"] }, decls: 0, vars: 0, template: function SdGap_Template(rf, ctx) { }, styles: ["sd-gap[data-sd-height=xxs] {\n  height: var(--gap-xxs);\n}\nsd-gap[data-sd-width=xxs] {\n  width: var(--gap-xxs);\n}\nsd-gap[data-sd-height=xs] {\n  height: var(--gap-xs);\n}\nsd-gap[data-sd-width=xs] {\n  width: var(--gap-xs);\n}\nsd-gap[data-sd-height=sm] {\n  height: var(--gap-sm);\n}\nsd-gap[data-sd-width=sm] {\n  width: var(--gap-sm);\n}\nsd-gap[data-sd-height=default] {\n  height: var(--gap-default);\n}\nsd-gap[data-sd-width=default] {\n  width: var(--gap-default);\n}\nsd-gap[data-sd-height=lg] {\n  height: var(--gap-lg);\n}\nsd-gap[data-sd-width=lg] {\n  width: var(--gap-lg);\n}\nsd-gap[data-sd-height=xl] {\n  height: var(--gap-xl);\n}\nsd-gap[data-sd-width=xl] {\n  width: var(--gap-xl);\n}\nsd-gap[data-sd-height=xxl] {\n  height: var(--gap-xxl);\n}\nsd-gap[data-sd-width=xxl] {\n  width: var(--gap-xxl);\n}\nsd-gap[data-sd-height=\"0\"] {\n  height: var(--gap-0);\n}\nsd-gap[data-sd-width=\"0\"] {\n  width: var(--gap-0);\n}\nsd-gap[data-sd-height=auto] {\n  height: var(--gap-auto);\n}\nsd-gap[data-sd-width=auto] {\n  width: var(--gap-auto);\n}"], encapsulation: 2 });
+        } }, inputs: { height: [1, "height"], heightPx: [1, "heightPx"], width: [1, "width"], widthPx: [1, "widthPx"], widthEm: [1, "widthEm"] }, decls: 0, vars: 0, template: function SdGap_Template(rf, ctx) { }, styles: ["sd-gap[data-sd-height=xxs] {\n  height: var(--sd-gap-xxs);\n}\nsd-gap[data-sd-width=xxs] {\n  width: var(--sd-gap-xxs);\n}\nsd-gap[data-sd-height=xs] {\n  height: var(--sd-gap-xs);\n}\nsd-gap[data-sd-width=xs] {\n  width: var(--sd-gap-xs);\n}\nsd-gap[data-sd-height=sm] {\n  height: var(--sd-gap-sm);\n}\nsd-gap[data-sd-width=sm] {\n  width: var(--sd-gap-sm);\n}\nsd-gap[data-sd-height=default] {\n  height: var(--sd-gap-default);\n}\nsd-gap[data-sd-width=default] {\n  width: var(--sd-gap-default);\n}\nsd-gap[data-sd-height=lg] {\n  height: var(--sd-gap-lg);\n}\nsd-gap[data-sd-width=lg] {\n  width: var(--sd-gap-lg);\n}\nsd-gap[data-sd-height=xl] {\n  height: var(--sd-gap-xl);\n}\nsd-gap[data-sd-width=xl] {\n  width: var(--sd-gap-xl);\n}\nsd-gap[data-sd-height=xxl] {\n  height: var(--sd-gap-xxl);\n}\nsd-gap[data-sd-width=xxl] {\n  width: var(--sd-gap-xxl);\n}\nsd-gap[data-sd-height=\"0\"] {\n  height: var(--sd-gap-0);\n}\nsd-gap[data-sd-width=\"0\"] {\n  width: var(--sd-gap-0);\n}\nsd-gap[data-sd-height=auto] {\n  height: var(--sd-gap-auto);\n}\nsd-gap[data-sd-width=auto] {\n  width: var(--sd-gap-auto);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdGap, [{
         type: Component,
@@ -43,6 +41,6 @@ export class SdGap {
                     "[style.width.px]": "widthPx()",
                     "[style.width.em]": "widthEm()",
                     "[style.display]": "_displayStyle()",
-                }, styles: ["sd-gap[data-sd-height=xxs] {\n  height: var(--gap-xxs);\n}\nsd-gap[data-sd-width=xxs] {\n  width: var(--gap-xxs);\n}\nsd-gap[data-sd-height=xs] {\n  height: var(--gap-xs);\n}\nsd-gap[data-sd-width=xs] {\n  width: var(--gap-xs);\n}\nsd-gap[data-sd-height=sm] {\n  height: var(--gap-sm);\n}\nsd-gap[data-sd-width=sm] {\n  width: var(--gap-sm);\n}\nsd-gap[data-sd-height=default] {\n  height: var(--gap-default);\n}\nsd-gap[data-sd-width=default] {\n  width: var(--gap-default);\n}\nsd-gap[data-sd-height=lg] {\n  height: var(--gap-lg);\n}\nsd-gap[data-sd-width=lg] {\n  width: var(--gap-lg);\n}\nsd-gap[data-sd-height=xl] {\n  height: var(--gap-xl);\n}\nsd-gap[data-sd-width=xl] {\n  width: var(--gap-xl);\n}\nsd-gap[data-sd-height=xxl] {\n  height: var(--gap-xxl);\n}\nsd-gap[data-sd-width=xxl] {\n  width: var(--gap-xxl);\n}\nsd-gap[data-sd-height=\"0\"] {\n  height: var(--gap-0);\n}\nsd-gap[data-sd-width=\"0\"] {\n  width: var(--gap-0);\n}\nsd-gap[data-sd-height=auto] {\n  height: var(--gap-auto);\n}\nsd-gap[data-sd-width=auto] {\n  width: var(--gap-auto);\n}"] }]
+                }, styles: ["sd-gap[data-sd-height=xxs] {\n  height: var(--sd-gap-xxs);\n}\nsd-gap[data-sd-width=xxs] {\n  width: var(--sd-gap-xxs);\n}\nsd-gap[data-sd-height=xs] {\n  height: var(--sd-gap-xs);\n}\nsd-gap[data-sd-width=xs] {\n  width: var(--sd-gap-xs);\n}\nsd-gap[data-sd-height=sm] {\n  height: var(--sd-gap-sm);\n}\nsd-gap[data-sd-width=sm] {\n  width: var(--sd-gap-sm);\n}\nsd-gap[data-sd-height=default] {\n  height: var(--sd-gap-default);\n}\nsd-gap[data-sd-width=default] {\n  width: var(--sd-gap-default);\n}\nsd-gap[data-sd-height=lg] {\n  height: var(--sd-gap-lg);\n}\nsd-gap[data-sd-width=lg] {\n  width: var(--sd-gap-lg);\n}\nsd-gap[data-sd-height=xl] {\n  height: var(--sd-gap-xl);\n}\nsd-gap[data-sd-width=xl] {\n  width: var(--sd-gap-xl);\n}\nsd-gap[data-sd-height=xxl] {\n  height: var(--sd-gap-xxl);\n}\nsd-gap[data-sd-width=xxl] {\n  width: var(--sd-gap-xxl);\n}\nsd-gap[data-sd-height=\"0\"] {\n  height: var(--sd-gap-0);\n}\nsd-gap[data-sd-width=\"0\"] {\n  width: var(--sd-gap-0);\n}\nsd-gap[data-sd-height=auto] {\n  height: var(--sd-gap-auto);\n}\nsd-gap[data-sd-width=auto] {\n  width: var(--sd-gap-auto);\n}"] }]
     }], null, { height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], heightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightPx", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], widthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthPx", required: false }] }], widthEm: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthEm", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdGap, { className: "SdGap", filePath: "packages/angular/src/controls/gap/sd-gap.ts", lineNumber: 37 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdGap, { className: "SdGap", filePath: "packages/angular/src/controls/gap/sd-gap.ts", lineNumber: 43 }); })();

package/dist/controls/input/sd-date-range-picker.js

@@ -95,7 +95,7 @@ export class SdDateRangePicker {
             i0.ɵɵproperty("value", "\uBC94\uC704");
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.periodType() === "\uBC94\uC704" ? 7 : 8);
-        } }, dependencies: [SdSelect, SdSelectItem, SdRange, SdTextfield], styles: ["sd-date-range-picker {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-date-range-picker {\n    gap: 0;\n  }\n  sd-date-range-picker > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-date-range-picker.gap-xxs {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xxs > * + * {\n    margin-left: var(--gap-xxs);\n  }\n  sd-date-range-picker.gap-xs {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xs > * + * {\n    margin-left: var(--gap-xs);\n  }\n  sd-date-range-picker.gap-sm {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-sm > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-date-range-picker.gap-default {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-default > * + * {\n    margin-left: var(--gap-default);\n  }\n  sd-date-range-picker.gap-lg {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-lg > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-date-range-picker.gap-xl {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xl > * + * {\n    margin-left: var(--gap-xl);\n  }\n  sd-date-range-picker.gap-xxl {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xxl > * + * {\n    margin-left: var(--gap-xxl);\n  }\n  sd-date-range-picker.gap-0 {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-0 > * + * {\n    margin-left: var(--gap-0);\n  }\n  sd-date-range-picker.gap-auto {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-auto > * + * {\n    margin-left: var(--gap-auto);\n  }\n}"], encapsulation: 2 });
+        } }, dependencies: [SdSelect, SdSelectItem, SdRange, SdTextfield], styles: ["sd-date-range-picker {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--sd-gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-date-range-picker {\n    gap: 0;\n  }\n  sd-date-range-picker > * + * {\n    margin-left: var(--sd-gap-sm);\n  }\n  sd-date-range-picker.gap-xxs {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xxs > * + * {\n    margin-left: var(--sd-gap-xxs);\n  }\n  sd-date-range-picker.gap-xs {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xs > * + * {\n    margin-left: var(--sd-gap-xs);\n  }\n  sd-date-range-picker.gap-sm {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-sm > * + * {\n    margin-left: var(--sd-gap-sm);\n  }\n  sd-date-range-picker.gap-default {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-default > * + * {\n    margin-left: var(--sd-gap-default);\n  }\n  sd-date-range-picker.gap-lg {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-lg > * + * {\n    margin-left: var(--sd-gap-lg);\n  }\n  sd-date-range-picker.gap-xl {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xl > * + * {\n    margin-left: var(--sd-gap-xl);\n  }\n  sd-date-range-picker.gap-xxl {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xxl > * + * {\n    margin-left: var(--sd-gap-xxl);\n  }\n  sd-date-range-picker.gap-0 {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-0 > * + * {\n    margin-left: var(--sd-gap-0);\n  }\n  sd-date-range-picker.gap-auto {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-auto > * + * {\n    margin-left: var(--sd-gap-auto);\n  }\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdDateRangePicker, [{
         type: Component,
@@ -126,6 +126,6 @@ export class SdDateRangePicker {
         (valueChange)="handleFromDateChanged()"
       />
     }
-  `, styles: ["sd-date-range-picker {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-date-range-picker {\n    gap: 0;\n  }\n  sd-date-range-picker > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-date-range-picker.gap-xxs {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xxs > * + * {\n    margin-left: var(--gap-xxs);\n  }\n  sd-date-range-picker.gap-xs {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xs > * + * {\n    margin-left: var(--gap-xs);\n  }\n  sd-date-range-picker.gap-sm {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-sm > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-date-range-picker.gap-default {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-default > * + * {\n    margin-left: var(--gap-default);\n  }\n  sd-date-range-picker.gap-lg {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-lg > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-date-range-picker.gap-xl {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xl > * + * {\n    margin-left: var(--gap-xl);\n  }\n  sd-date-range-picker.gap-xxl {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xxl > * + * {\n    margin-left: var(--gap-xxl);\n  }\n  sd-date-range-picker.gap-0 {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-0 > * + * {\n    margin-left: var(--gap-0);\n  }\n  sd-date-range-picker.gap-auto {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-auto > * + * {\n    margin-left: var(--gap-auto);\n  }\n}"] }]
+  `, styles: ["sd-date-range-picker {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--sd-gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-date-range-picker {\n    gap: 0;\n  }\n  sd-date-range-picker > * + * {\n    margin-left: var(--sd-gap-sm);\n  }\n  sd-date-range-picker.gap-xxs {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xxs > * + * {\n    margin-left: var(--sd-gap-xxs);\n  }\n  sd-date-range-picker.gap-xs {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xs > * + * {\n    margin-left: var(--sd-gap-xs);\n  }\n  sd-date-range-picker.gap-sm {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-sm > * + * {\n    margin-left: var(--sd-gap-sm);\n  }\n  sd-date-range-picker.gap-default {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-default > * + * {\n    margin-left: var(--sd-gap-default);\n  }\n  sd-date-range-picker.gap-lg {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-lg > * + * {\n    margin-left: var(--sd-gap-lg);\n  }\n  sd-date-range-picker.gap-xl {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xl > * + * {\n    margin-left: var(--sd-gap-xl);\n  }\n  sd-date-range-picker.gap-xxl {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xxl > * + * {\n    margin-left: var(--sd-gap-xxl);\n  }\n  sd-date-range-picker.gap-0 {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-0 > * + * {\n    margin-left: var(--sd-gap-0);\n  }\n  sd-date-range-picker.gap-auto {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-auto > * + * {\n    margin-left: var(--sd-gap-auto);\n  }\n}"] }]
     }], null, { periodType: [{ type: i0.Input, args: [{ isSignal: true, alias: "periodType", required: false }] }, { type: i0.Output, args: ["periodTypeChange"] }], from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: false }] }, { type: i0.Output, args: ["fromChange"] }], to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: false }] }, { type: i0.Output, args: ["toChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdDateRangePicker, { className: "SdDateRangePicker", filePath: "packages/angular/src/controls/input/sd-date-range-picker.ts", lineNumber: 62 }); })();

package/dist/controls/input/sd-numpad.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-numpad.d.ts","sourceRoot":"","sources":["../../../src/controls/input/sd-numpad.ts"],"names":[],"mappings":";AAkBA,qBAuGa,QAAQ;IACnB,IAAI,6DAAyC;IAE7C,WAAW,0DAAmB;IAC9B,KAAK,0DAAmB;IAExB,QAAQ,qEAAiD;IACzD,aAAa,qEAAiD;IAC9D,cAAc,qEAAiD;IAC/D,cAAc,qEAAiD;IAE/D,gBAAgB,iDAAY;;IAoB5B,aAAa,CAAC,GAAG,EAAE,MAAM;IAuBzB,SAAS,CAAC,QAAQ,CAAC,YAAY,obAAgB;IAC/C,SAAS,CAAC,QAAQ,CAAC,eAAe,oXAAmB;yCAvD1C,QAAQ;2CAAR,QAAQ;CAwDpB"}
+{"version":3,"file":"sd-numpad.d.ts","sourceRoot":"","sources":["../../../src/controls/input/sd-numpad.ts"],"names":[],"mappings":";AAkBA,qBA+Fa,QAAQ;IACnB,IAAI,6DAAyC;IAE7C,WAAW,0DAAmB;IAC9B,KAAK,0DAAmB;IAExB,QAAQ,qEAAiD;IACzD,aAAa,qEAAiD;IAC9D,cAAc,qEAAiD;IAC/D,cAAc,qEAAiD;IAE/D,gBAAgB,iDAAY;;IAoB5B,aAAa,CAAC,GAAG,EAAE,MAAM;IAuBzB,SAAS,CAAC,QAAQ,CAAC,YAAY,obAAgB;IAC/C,SAAS,CAAC,QAAQ,CAAC,eAAe,oXAAmB;yCAvD1C,QAAQ;2CAAR,QAAQ;CAwDpB"}

package/dist/controls/input/sd-numpad.js

@@ -146,11 +146,11 @@ export class SdNumpad {
             i0.ɵɵadvance();
             i0.ɵɵattribute("colspan", ctx.useMinusButton() ? 1 : 2);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("size", "lg")("buttonClass", "tx-theme-danger-default");
+            i0.ɵɵproperty("size", "lg")("buttonClass", "tx-danger");
             i0.ɵɵadvance();
             i0.ɵɵproperty("svg", ctx.tablerEraser);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("size", "lg")("buttonClass", "tx-theme-warning-default");
+            i0.ɵɵproperty("size", "lg")("buttonClass", "tx-warning");
             i0.ɵɵadvance();
             i0.ɵɵproperty("svg", ctx.tablerArrowLeft);
             i0.ɵɵadvance();
@@ -159,7 +159,7 @@ export class SdNumpad {
             i0.ɵɵproperty("size", "lg");
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("size", "lg");
-        } }, dependencies: [SdTextfield, SdButton, NgIcon], styles: ["sd-numpad table {\n  width: 100%;\n  border-collapse: collapse;\n}\nsd-numpad table > * > tr > * {\n  border: none;\n  padding: var(--gap-xxs);\n}\nsd-numpad table > * > tr > * > sd-button {\n  border: none;\n}"], encapsulation: 2 });
+        } }, dependencies: [SdTextfield, SdButton, NgIcon], styles: ["sd-numpad table {\n  width: 100%;\n  border-collapse: collapse;\n}\nsd-numpad table > * > tr > * {\n  border: none;\n  padding: var(--sd-gap-xxs);\n}\nsd-numpad table > * > tr > * > sd-button {\n  border: none;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdNumpad, [{
         type: Component,
@@ -200,20 +200,12 @@ export class SdNumpad {
             </td>
           }
           <td [attr.colspan]="useMinusButton() ? 1 : 2">
-            <sd-button
-              [size]="'lg'"
-              [buttonClass]="'tx-theme-danger-default'"
-              (click)="onButtonClick('C')"
-            >
+            <sd-button [size]="'lg'" [buttonClass]="'tx-danger'" (click)="onButtonClick('C')">
               <ng-icon [svg]="tablerEraser" />
             </sd-button>
           </td>
           <td>
-            <sd-button
-              [size]="'lg'"
-              [buttonClass]="'tx-theme-warning-default'"
-              (click)="onButtonClick('BS')"
-            >
+            <sd-button [size]="'lg'" [buttonClass]="'tx-warning'" (click)="onButtonClick('BS')">
               <ng-icon [svg]="tablerArrowLeft" />
             </sd-button>
           </td>
@@ -239,6 +231,6 @@ export class SdNumpad {
         </tr>
       </tbody>
     </table>
-  `, styles: ["sd-numpad table {\n  width: 100%;\n  border-collapse: collapse;\n}\nsd-numpad table > * > tr > * {\n  border: none;\n  padding: var(--gap-xxs);\n}\nsd-numpad table > * > tr > * > sd-button {\n  border: none;\n}"] }]
+  `, styles: ["sd-numpad table {\n  width: 100%;\n  border-collapse: collapse;\n}\nsd-numpad table > * > tr > * {\n  border: none;\n  padding: var(--sd-gap-xxs);\n}\nsd-numpad table > * > tr > * > sd-button {\n  border: none;\n}"] }]
     }], () => [], { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], useEnterButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "useEnterButton", required: false }] }], useMinusButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "useMinusButton", required: false }] }], enterButtonClick: [{ type: i0.Output, args: ["enterButtonClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdNumpad, { className: "SdNumpad", filePath: "packages/angular/src/controls/input/sd-numpad.ts", lineNumber: 122 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdNumpad, { className: "SdNumpad", filePath: "packages/angular/src/controls/input/sd-numpad.ts", lineNumber: 114 }); })();

package/dist/controls/input/sd-range.js

@@ -31,7 +31,7 @@ export class SdRange {
             i0.ɵɵproperty("type", ctx.type());
             i0.ɵɵtwoWayProperty("value", ctx.to);
             i0.ɵɵproperty("min", ctx.from())("required", ctx.required())("disabled", ctx.disabled())("inputStyle", ctx.inputStyle());
-        } }, dependencies: [SdTextfield], styles: ["sd-range {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-range {\n    gap: 0;\n  }\n  sd-range > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-range.gap-xxs {\n    gap: 0;\n  }\n  sd-range.gap-xxs > * + * {\n    margin-left: var(--gap-xxs);\n  }\n  sd-range.gap-xs {\n    gap: 0;\n  }\n  sd-range.gap-xs > * + * {\n    margin-left: var(--gap-xs);\n  }\n  sd-range.gap-sm {\n    gap: 0;\n  }\n  sd-range.gap-sm > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-range.gap-default {\n    gap: 0;\n  }\n  sd-range.gap-default > * + * {\n    margin-left: var(--gap-default);\n  }\n  sd-range.gap-lg {\n    gap: 0;\n  }\n  sd-range.gap-lg > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-range.gap-xl {\n    gap: 0;\n  }\n  sd-range.gap-xl > * + * {\n    margin-left: var(--gap-xl);\n  }\n  sd-range.gap-xxl {\n    gap: 0;\n  }\n  sd-range.gap-xxl > * + * {\n    margin-left: var(--gap-xxl);\n  }\n  sd-range.gap-0 {\n    gap: 0;\n  }\n  sd-range.gap-0 > * + * {\n    margin-left: var(--gap-0);\n  }\n  sd-range.gap-auto {\n    gap: 0;\n  }\n  sd-range.gap-auto > * + * {\n    margin-left: var(--gap-auto);\n  }\n}"], encapsulation: 2 });
+        } }, dependencies: [SdTextfield], styles: ["sd-range {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--sd-gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-range {\n    gap: 0;\n  }\n  sd-range > * + * {\n    margin-left: var(--sd-gap-sm);\n  }\n  sd-range.gap-xxs {\n    gap: 0;\n  }\n  sd-range.gap-xxs > * + * {\n    margin-left: var(--sd-gap-xxs);\n  }\n  sd-range.gap-xs {\n    gap: 0;\n  }\n  sd-range.gap-xs > * + * {\n    margin-left: var(--sd-gap-xs);\n  }\n  sd-range.gap-sm {\n    gap: 0;\n  }\n  sd-range.gap-sm > * + * {\n    margin-left: var(--sd-gap-sm);\n  }\n  sd-range.gap-default {\n    gap: 0;\n  }\n  sd-range.gap-default > * + * {\n    margin-left: var(--sd-gap-default);\n  }\n  sd-range.gap-lg {\n    gap: 0;\n  }\n  sd-range.gap-lg > * + * {\n    margin-left: var(--sd-gap-lg);\n  }\n  sd-range.gap-xl {\n    gap: 0;\n  }\n  sd-range.gap-xl > * + * {\n    margin-left: var(--sd-gap-xl);\n  }\n  sd-range.gap-xxl {\n    gap: 0;\n  }\n  sd-range.gap-xxl > * + * {\n    margin-left: var(--sd-gap-xxl);\n  }\n  sd-range.gap-0 {\n    gap: 0;\n  }\n  sd-range.gap-0 > * + * {\n    margin-left: var(--sd-gap-0);\n  }\n  sd-range.gap-auto {\n    gap: 0;\n  }\n  sd-range.gap-auto > * + * {\n    margin-left: var(--sd-gap-auto);\n  }\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdRange, [{
         type: Component,
@@ -52,6 +52,6 @@ export class SdRange {
       [disabled]="disabled()"
       [inputStyle]="inputStyle()"
     />
-  `, styles: ["sd-range {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-range {\n    gap: 0;\n  }\n  sd-range > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-range.gap-xxs {\n    gap: 0;\n  }\n  sd-range.gap-xxs > * + * {\n    margin-left: var(--gap-xxs);\n  }\n  sd-range.gap-xs {\n    gap: 0;\n  }\n  sd-range.gap-xs > * + * {\n    margin-left: var(--gap-xs);\n  }\n  sd-range.gap-sm {\n    gap: 0;\n  }\n  sd-range.gap-sm > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-range.gap-default {\n    gap: 0;\n  }\n  sd-range.gap-default > * + * {\n    margin-left: var(--gap-default);\n  }\n  sd-range.gap-lg {\n    gap: 0;\n  }\n  sd-range.gap-lg > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-range.gap-xl {\n    gap: 0;\n  }\n  sd-range.gap-xl > * + * {\n    margin-left: var(--gap-xl);\n  }\n  sd-range.gap-xxl {\n    gap: 0;\n  }\n  sd-range.gap-xxl > * + * {\n    margin-left: var(--gap-xxl);\n  }\n  sd-range.gap-0 {\n    gap: 0;\n  }\n  sd-range.gap-0 > * + * {\n    margin-left: var(--gap-0);\n  }\n  sd-range.gap-auto {\n    gap: 0;\n  }\n  sd-range.gap-auto > * + * {\n    margin-left: var(--gap-auto);\n  }\n}"] }]
+  `, styles: ["sd-range {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--sd-gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-range {\n    gap: 0;\n  }\n  sd-range > * + * {\n    margin-left: var(--sd-gap-sm);\n  }\n  sd-range.gap-xxs {\n    gap: 0;\n  }\n  sd-range.gap-xxs > * + * {\n    margin-left: var(--sd-gap-xxs);\n  }\n  sd-range.gap-xs {\n    gap: 0;\n  }\n  sd-range.gap-xs > * + * {\n    margin-left: var(--sd-gap-xs);\n  }\n  sd-range.gap-sm {\n    gap: 0;\n  }\n  sd-range.gap-sm > * + * {\n    margin-left: var(--sd-gap-sm);\n  }\n  sd-range.gap-default {\n    gap: 0;\n  }\n  sd-range.gap-default > * + * {\n    margin-left: var(--sd-gap-default);\n  }\n  sd-range.gap-lg {\n    gap: 0;\n  }\n  sd-range.gap-lg > * + * {\n    margin-left: var(--sd-gap-lg);\n  }\n  sd-range.gap-xl {\n    gap: 0;\n  }\n  sd-range.gap-xl > * + * {\n    margin-left: var(--sd-gap-xl);\n  }\n  sd-range.gap-xxl {\n    gap: 0;\n  }\n  sd-range.gap-xxl > * + * {\n    margin-left: var(--sd-gap-xxl);\n  }\n  sd-range.gap-0 {\n    gap: 0;\n  }\n  sd-range.gap-0 > * + * {\n    margin-left: var(--sd-gap-0);\n  }\n  sd-range.gap-auto {\n    gap: 0;\n  }\n  sd-range.gap-auto > * + * {\n    margin-left: var(--sd-gap-auto);\n  }\n}"] }]
     }], null, { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: false }] }, { type: i0.Output, args: ["fromChange"] }], to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: false }] }, { type: i0.Output, args: ["toChange"] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdRange, { className: "SdRange", filePath: "packages/angular/src/controls/input/sd-range.ts", lineNumber: 49 }); })();

package/dist/controls/input/sd-textarea.js

@@ -86,7 +86,7 @@ export class SdTextarea {
     static ɵfac = function SdTextarea_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdTextarea)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdTextarea, selectors: [["sd-textarea"]], hostVars: 6, hostBindings: function SdTextarea_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-disabled", ctx.disabled())("data-sd-readonly", ctx.readonly())("data-sd-inline", ctx.inline())("data-sd-inset", ctx.inset())("data-sd-size", ctx.size())("data-sd-theme", ctx.theme());
-        } }, inputs: { value: [1, "value"], placeholder: [1, "placeholder"], title: [1, "title"], minRows: [1, "minRows"], disabled: [1, "disabled"], readonly: [1, "readonly"], required: [1, "required"], inline: [1, "inline"], inset: [1, "inset"], size: [1, "size"], validatorFn: [1, "validatorFn"], theme: [1, "theme"], inputStyle: [1, "inputStyle"], inputClass: [1, "inputClass"] }, outputs: { value: "valueChange" }, decls: 5, vars: 9, consts: [[1, "tx-trans-lighter"], [3, "value", "style", "class"], [3, "input", "value"]], template: function SdTextarea_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { value: [1, "value"], placeholder: [1, "placeholder"], title: [1, "title"], minRows: [1, "minRows"], disabled: [1, "disabled"], readonly: [1, "readonly"], required: [1, "required"], inline: [1, "inline"], inset: [1, "inset"], size: [1, "size"], validatorFn: [1, "validatorFn"], theme: [1, "theme"], inputStyle: [1, "inputStyle"], inputClass: [1, "inputClass"] }, outputs: { value: "valueChange" }, decls: 5, vars: 9, consts: [[1, "tx-faint"], [3, "value", "style", "class"], [3, "input", "value"]], template: function SdTextarea_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "div");
             i0.ɵɵconditionalCreate(1, SdTextarea_Conditional_1_Template, 2, 1, "pre")(2, SdTextarea_Conditional_2_Template, 2, 1, "span", 0)(3, SdTextarea_Conditional_3_Template, 2, 0, "span");
             i0.ɵɵdomElementEnd();
@@ -100,7 +100,7 @@ export class SdTextarea {
             i0.ɵɵconditional(ctx.value() ? 1 : ctx.placeholder() ? 2 : 3);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(!ctx.readonly() && !ctx.disabled() ? 4 : -1);
-        } }, styles: ["sd-textarea {\n  display: block;\n  position: relative;\n}\nsd-textarea > textarea,\nsd-textarea > ._contents {\n  display: block;\n  padding: var(--gap-sm) var(--gap-default);\n  border: 1px solid transparent;\n  font-size: var(--font-size-default);\n  font-family: var(--font-family);\n  font-variant-numeric: tabular-nums;\n  line-height: var(--line-height);\n  color: var(--text-trans-default);\n  font-family: var(--font-family-field);\n  resize: none;\n  overflow: auto;\n  width: 100%;\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-textarea > textarea:focus,\nsd-textarea > ._contents:focus {\n  outline: none;\n  border-color: var(--theme-primary-default);\n}\nsd-textarea > textarea::-webkit-scrollbar,\nsd-textarea > ._contents::-webkit-scrollbar {\n  display: none;\n}\nsd-textarea > textarea::-webkit-input-placeholder,\nsd-textarea > ._contents::-webkit-input-placeholder {\n  color: var(--text-trans-lighter);\n}\nsd-textarea > ._contents > pre {\n  font-family: inherit;\n}\nsd-textarea:not([data-sd-inset=true]):not([data-sd-disabled=true]) > ._contents {\n  height: 0;\n  max-height: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n}\nsd-textarea[data-sd-theme=gray] > textarea,\nsd-textarea[data-sd-theme=gray] > ._contents {\n  background: var(--theme-gray-lightest);\n}\nsd-textarea[data-sd-theme=blue-gray] > textarea,\nsd-textarea[data-sd-theme=blue-gray] > ._contents {\n  background: var(--theme-blue-gray-lightest);\n}\nsd-textarea[data-sd-theme=primary] > textarea,\nsd-textarea[data-sd-theme=primary] > ._contents {\n  background: var(--theme-primary-lightest);\n}\nsd-textarea[data-sd-theme=secondary] > textarea,\nsd-textarea[data-sd-theme=secondary] > ._contents {\n  background: var(--theme-secondary-lightest);\n}\nsd-textarea[data-sd-theme=info] > textarea,\nsd-textarea[data-sd-theme=info] > ._contents {\n  background: var(--theme-info-lightest);\n}\nsd-textarea[data-sd-theme=success] > textarea,\nsd-textarea[data-sd-theme=success] > ._contents {\n  background: var(--theme-success-lightest);\n}\nsd-textarea[data-sd-theme=warning] > textarea,\nsd-textarea[data-sd-theme=warning] > ._contents {\n  background: var(--theme-warning-lightest);\n}\nsd-textarea[data-sd-theme=danger] > textarea,\nsd-textarea[data-sd-theme=danger] > ._contents {\n  background: var(--theme-danger-lightest);\n}\nsd-textarea[data-sd-size=sm] > textarea,\nsd-textarea[data-sd-size=sm] > ._contents {\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-textarea[data-sd-size=lg] > textarea,\nsd-textarea[data-sd-size=lg] > ._contents {\n  padding: var(--gap-default) var(--gap-lg);\n}\nsd-textarea[data-sd-inline=true] {\n  display: inline-block;\n  vertical-align: top;\n}\nsd-textarea[data-sd-inline=true] > textarea,\nsd-textarea[data-sd-inline=true] > ._contents {\n  width: auto;\n  vertical-align: top;\n}\nsd-textarea[data-sd-inset=true] > ._contents {\n  display: block;\n}\nsd-textarea[data-sd-inset=true] > textarea {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\nsd-textarea[data-sd-inset=true] > textarea,\nsd-textarea[data-sd-inset=true] > ._contents {\n  width: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-textarea[data-sd-inset=true] > textarea:focus {\n  outline: 1px solid var(--theme-primary-default);\n  outline-offset: -1px;\n}\nsd-textarea[data-sd-disabled=true] > ._contents {\n  display: block;\n  background: var(--theme-gray-lightest);\n  color: var(--text-trans-light);\n}\nsd-textarea[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n  background: var(--control-color);\n  color: var(--text-trans-default);\n}"], encapsulation: 2 });
+        } }, styles: ["sd-textarea {\n  display: block;\n  position: relative;\n}\nsd-textarea > textarea,\nsd-textarea > ._contents {\n  display: block;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  border: 1px solid transparent;\n  font-size: var(--sd-font-size-default);\n  font-family: var(--sd-font-family);\n  font-variant-numeric: tabular-nums;\n  line-height: var(--sd-line-height);\n  color: var(--sd-tx-default);\n  font-family: var(--sd-font-family-field);\n  resize: none;\n  overflow: auto;\n  width: 100%;\n  border: 1px solid var(--sd-bd-field);\n  border-radius: var(--sd-radius-default);\n  background-color: var(--sd-bg-field);\n}\nsd-textarea > textarea:focus,\nsd-textarea > ._contents:focus {\n  outline: none;\n  border-color: var(--sd-focus-ring-color);\n}\nsd-textarea > textarea::-webkit-scrollbar,\nsd-textarea > ._contents::-webkit-scrollbar {\n  display: none;\n}\nsd-textarea > textarea::-webkit-input-placeholder,\nsd-textarea > ._contents::-webkit-input-placeholder {\n  color: var(--sd-tx-faint);\n}\nsd-textarea > ._contents > pre {\n  font-family: inherit;\n}\nsd-textarea:not([data-sd-inset=true]):not([data-sd-disabled=true]) > ._contents {\n  height: 0;\n  max-height: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n}\nsd-textarea[data-sd-theme=gray] > textarea,\nsd-textarea[data-sd-theme=gray] > ._contents {\n  background-color: var(--sd-bg-gray-subtle);\n}\nsd-textarea[data-sd-theme=blue-gray] > textarea,\nsd-textarea[data-sd-theme=blue-gray] > ._contents {\n  background-color: var(--sd-bg-blue-gray-subtle);\n}\nsd-textarea[data-sd-theme=primary] > textarea,\nsd-textarea[data-sd-theme=primary] > ._contents {\n  background-color: var(--sd-bg-primary-subtle);\n}\nsd-textarea[data-sd-theme=secondary] > textarea,\nsd-textarea[data-sd-theme=secondary] > ._contents {\n  background-color: var(--sd-bg-secondary-subtle);\n}\nsd-textarea[data-sd-theme=info] > textarea,\nsd-textarea[data-sd-theme=info] > ._contents {\n  background-color: var(--sd-bg-info-subtle);\n}\nsd-textarea[data-sd-theme=success] > textarea,\nsd-textarea[data-sd-theme=success] > ._contents {\n  background-color: var(--sd-bg-success-subtle);\n}\nsd-textarea[data-sd-theme=warning] > textarea,\nsd-textarea[data-sd-theme=warning] > ._contents {\n  background-color: var(--sd-bg-warning-subtle);\n}\nsd-textarea[data-sd-theme=danger] > textarea,\nsd-textarea[data-sd-theme=danger] > ._contents {\n  background-color: var(--sd-bg-danger-subtle);\n}\nsd-textarea[data-sd-size=sm] > textarea,\nsd-textarea[data-sd-size=sm] > ._contents {\n  padding: var(--sd-gap-xs) var(--sd-gap-sm);\n}\nsd-textarea[data-sd-size=lg] > textarea,\nsd-textarea[data-sd-size=lg] > ._contents {\n  padding: var(--sd-gap-default) var(--sd-gap-lg);\n}\nsd-textarea[data-sd-inline=true] {\n  display: inline-block;\n  vertical-align: top;\n}\nsd-textarea[data-sd-inline=true] > textarea,\nsd-textarea[data-sd-inline=true] > ._contents {\n  width: auto;\n  vertical-align: top;\n}\nsd-textarea[data-sd-inset=true] > ._contents {\n  display: block;\n}\nsd-textarea[data-sd-inset=true] > textarea {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\nsd-textarea[data-sd-inset=true] > textarea,\nsd-textarea[data-sd-inset=true] > ._contents {\n  width: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-textarea[data-sd-inset=true] > textarea:focus {\n  outline: 1px solid var(--sd-focus-ring-color);\n  outline-offset: -1px;\n}\nsd-textarea[data-sd-disabled=true] > ._contents {\n  display: block;\n  background-color: var(--sd-bg-disabled);\n  color: var(--sd-tx-disabled);\n}\nsd-textarea[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n  background-color: var(--sd-bg-control);\n  color: var(--sd-tx-default);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTextarea, [{
         type: Component,
@@ -114,7 +114,7 @@ export class SdTextarea {
       @if (value()) {
         <pre>{{ value() }} </pre>
       } @else if (placeholder()) {
-        <span class="tx-trans-lighter">{{ placeholder() }}</span>
+        <span class="tx-faint">{{ placeholder() }}</span>
       } @else {
         <span>&nbsp;</span>
       }
@@ -137,6 +137,6 @@ export class SdTextarea {
                     "[attr.data-sd-inset]": "inset()",
                     "[attr.data-sd-size]": "size()",
                     "[attr.data-sd-theme]": "theme()",
-                }, styles: ["sd-textarea {\n  display: block;\n  position: relative;\n}\nsd-textarea > textarea,\nsd-textarea > ._contents {\n  display: block;\n  padding: var(--gap-sm) var(--gap-default);\n  border: 1px solid transparent;\n  font-size: var(--font-size-default);\n  font-family: var(--font-family);\n  font-variant-numeric: tabular-nums;\n  line-height: var(--line-height);\n  color: var(--text-trans-default);\n  font-family: var(--font-family-field);\n  resize: none;\n  overflow: auto;\n  width: 100%;\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-textarea > textarea:focus,\nsd-textarea > ._contents:focus {\n  outline: none;\n  border-color: var(--theme-primary-default);\n}\nsd-textarea > textarea::-webkit-scrollbar,\nsd-textarea > ._contents::-webkit-scrollbar {\n  display: none;\n}\nsd-textarea > textarea::-webkit-input-placeholder,\nsd-textarea > ._contents::-webkit-input-placeholder {\n  color: var(--text-trans-lighter);\n}\nsd-textarea > ._contents > pre {\n  font-family: inherit;\n}\nsd-textarea:not([data-sd-inset=true]):not([data-sd-disabled=true]) > ._contents {\n  height: 0;\n  max-height: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n}\nsd-textarea[data-sd-theme=gray] > textarea,\nsd-textarea[data-sd-theme=gray] > ._contents {\n  background: var(--theme-gray-lightest);\n}\nsd-textarea[data-sd-theme=blue-gray] > textarea,\nsd-textarea[data-sd-theme=blue-gray] > ._contents {\n  background: var(--theme-blue-gray-lightest);\n}\nsd-textarea[data-sd-theme=primary] > textarea,\nsd-textarea[data-sd-theme=primary] > ._contents {\n  background: var(--theme-primary-lightest);\n}\nsd-textarea[data-sd-theme=secondary] > textarea,\nsd-textarea[data-sd-theme=secondary] > ._contents {\n  background: var(--theme-secondary-lightest);\n}\nsd-textarea[data-sd-theme=info] > textarea,\nsd-textarea[data-sd-theme=info] > ._contents {\n  background: var(--theme-info-lightest);\n}\nsd-textarea[data-sd-theme=success] > textarea,\nsd-textarea[data-sd-theme=success] > ._contents {\n  background: var(--theme-success-lightest);\n}\nsd-textarea[data-sd-theme=warning] > textarea,\nsd-textarea[data-sd-theme=warning] > ._contents {\n  background: var(--theme-warning-lightest);\n}\nsd-textarea[data-sd-theme=danger] > textarea,\nsd-textarea[data-sd-theme=danger] > ._contents {\n  background: var(--theme-danger-lightest);\n}\nsd-textarea[data-sd-size=sm] > textarea,\nsd-textarea[data-sd-size=sm] > ._contents {\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-textarea[data-sd-size=lg] > textarea,\nsd-textarea[data-sd-size=lg] > ._contents {\n  padding: var(--gap-default) var(--gap-lg);\n}\nsd-textarea[data-sd-inline=true] {\n  display: inline-block;\n  vertical-align: top;\n}\nsd-textarea[data-sd-inline=true] > textarea,\nsd-textarea[data-sd-inline=true] > ._contents {\n  width: auto;\n  vertical-align: top;\n}\nsd-textarea[data-sd-inset=true] > ._contents {\n  display: block;\n}\nsd-textarea[data-sd-inset=true] > textarea {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\nsd-textarea[data-sd-inset=true] > textarea,\nsd-textarea[data-sd-inset=true] > ._contents {\n  width: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-textarea[data-sd-inset=true] > textarea:focus {\n  outline: 1px solid var(--theme-primary-default);\n  outline-offset: -1px;\n}\nsd-textarea[data-sd-disabled=true] > ._contents {\n  display: block;\n  background: var(--theme-gray-lightest);\n  color: var(--text-trans-light);\n}\nsd-textarea[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n  background: var(--control-color);\n  color: var(--text-trans-default);\n}"] }]
+                }, styles: ["sd-textarea {\n  display: block;\n  position: relative;\n}\nsd-textarea > textarea,\nsd-textarea > ._contents {\n  display: block;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  border: 1px solid transparent;\n  font-size: var(--sd-font-size-default);\n  font-family: var(--sd-font-family);\n  font-variant-numeric: tabular-nums;\n  line-height: var(--sd-line-height);\n  color: var(--sd-tx-default);\n  font-family: var(--sd-font-family-field);\n  resize: none;\n  overflow: auto;\n  width: 100%;\n  border: 1px solid var(--sd-bd-field);\n  border-radius: var(--sd-radius-default);\n  background-color: var(--sd-bg-field);\n}\nsd-textarea > textarea:focus,\nsd-textarea > ._contents:focus {\n  outline: none;\n  border-color: var(--sd-focus-ring-color);\n}\nsd-textarea > textarea::-webkit-scrollbar,\nsd-textarea > ._contents::-webkit-scrollbar {\n  display: none;\n}\nsd-textarea > textarea::-webkit-input-placeholder,\nsd-textarea > ._contents::-webkit-input-placeholder {\n  color: var(--sd-tx-faint);\n}\nsd-textarea > ._contents > pre {\n  font-family: inherit;\n}\nsd-textarea:not([data-sd-inset=true]):not([data-sd-disabled=true]) > ._contents {\n  height: 0;\n  max-height: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n}\nsd-textarea[data-sd-theme=gray] > textarea,\nsd-textarea[data-sd-theme=gray] > ._contents {\n  background-color: var(--sd-bg-gray-subtle);\n}\nsd-textarea[data-sd-theme=blue-gray] > textarea,\nsd-textarea[data-sd-theme=blue-gray] > ._contents {\n  background-color: var(--sd-bg-blue-gray-subtle);\n}\nsd-textarea[data-sd-theme=primary] > textarea,\nsd-textarea[data-sd-theme=primary] > ._contents {\n  background-color: var(--sd-bg-primary-subtle);\n}\nsd-textarea[data-sd-theme=secondary] > textarea,\nsd-textarea[data-sd-theme=secondary] > ._contents {\n  background-color: var(--sd-bg-secondary-subtle);\n}\nsd-textarea[data-sd-theme=info] > textarea,\nsd-textarea[data-sd-theme=info] > ._contents {\n  background-color: var(--sd-bg-info-subtle);\n}\nsd-textarea[data-sd-theme=success] > textarea,\nsd-textarea[data-sd-theme=success] > ._contents {\n  background-color: var(--sd-bg-success-subtle);\n}\nsd-textarea[data-sd-theme=warning] > textarea,\nsd-textarea[data-sd-theme=warning] > ._contents {\n  background-color: var(--sd-bg-warning-subtle);\n}\nsd-textarea[data-sd-theme=danger] > textarea,\nsd-textarea[data-sd-theme=danger] > ._contents {\n  background-color: var(--sd-bg-danger-subtle);\n}\nsd-textarea[data-sd-size=sm] > textarea,\nsd-textarea[data-sd-size=sm] > ._contents {\n  padding: var(--sd-gap-xs) var(--sd-gap-sm);\n}\nsd-textarea[data-sd-size=lg] > textarea,\nsd-textarea[data-sd-size=lg] > ._contents {\n  padding: var(--sd-gap-default) var(--sd-gap-lg);\n}\nsd-textarea[data-sd-inline=true] {\n  display: inline-block;\n  vertical-align: top;\n}\nsd-textarea[data-sd-inline=true] > textarea,\nsd-textarea[data-sd-inline=true] > ._contents {\n  width: auto;\n  vertical-align: top;\n}\nsd-textarea[data-sd-inset=true] > ._contents {\n  display: block;\n}\nsd-textarea[data-sd-inset=true] > textarea {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\nsd-textarea[data-sd-inset=true] > textarea,\nsd-textarea[data-sd-inset=true] > ._contents {\n  width: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-textarea[data-sd-inset=true] > textarea:focus {\n  outline: 1px solid var(--sd-focus-ring-color);\n  outline-offset: -1px;\n}\nsd-textarea[data-sd-disabled=true] > ._contents {\n  display: block;\n  background-color: var(--sd-bg-disabled);\n  color: var(--sd-tx-disabled);\n}\nsd-textarea[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n  background-color: var(--sd-bg-control);\n  color: var(--sd-tx-default);\n}"] }]
     }], () => [], { 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 }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", 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 }] }], validatorFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "validatorFn", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTextarea, { className: "SdTextarea", filePath: "packages/angular/src/controls/input/sd-textarea.ts", lineNumber: 180 }); })();

package/dist/controls/input/sd-textfield.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-textfield.d.ts","sourceRoot":"","sources":["../../../src/controls/input/sd-textfield.ts"],"names":[],"mappings":"AAiBA,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,8BAA8B,CAAC;;AAEtC,qBAqRa,WAAW,CAAC,CAAC,SAAS,MAAM,gBAAgB;IACvD,KAAK,uEAAgC;IAErC,IAAI,yCAAuB;IAC3B,WAAW,0DAAmB;IAC9B,KAAK,0DAAmB;IACxB,UAAU,0DAAmB;IAC7B,UAAU,0DAAmB;IAE7B,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IAEzD,QAAQ,qEAAiD;IACzD,GAAG,uEAAgC;IACnC,GAAG,uEAAgC;IACnC,SAAS,0DAAmB;IAC5B,SAAS,0DAAmB;IAC5B,OAAO,0DAAmB;IAC1B,WAAW,+CAAiB,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,eAAI;IACtF,MAAM,0DAAmB;IAEzB,IAAI,0DAAmB;IACvB,YAAY,0DAAmB;IAC/B,cAAc,qEAAgD;IAC9D,SAAS,0DAAmB;IAE5B,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,KAAK,8IAED;IAEJ,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsD;IAGlF,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAc;IAGpD,OAAO,CAAC,UAAU,CAAS;IAE3B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAsD;IAE/E,WAAW,yCAA+C;IAE1D,WAAW,kDAA+D;IAE1E,YAAY,yCAOT;IAEH,gBAAgB,qDAMb;;IAuEH,kBAAkB,IAAI,IAAI;IAI1B,gBAAgB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI;IAK/C,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAO3B,OAAO,CAAC,WAAW;IAiBnB,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAU/B,OAAO,CAAC,mBAAmB;yCAhLhB,WAAW;2CAAX,WAAW;CAoLvB"}
+{"version":3,"file":"sd-textfield.d.ts","sourceRoot":"","sources":["../../../src/controls/input/sd-textfield.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAE5F,qBAwRa,WAAW,CAAC,CAAC,SAAS,MAAM,gBAAgB;IACvD,KAAK,uEAAgC;IAErC,IAAI,yCAAuB;IAC3B,WAAW,0DAAmB;IAC9B,KAAK,0DAAmB;IACxB,UAAU,0DAAmB;IAC7B,UAAU,0DAAmB;IAE7B,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IAEzD,QAAQ,qEAAiD;IACzD,GAAG,uEAAgC;IACnC,GAAG,uEAAgC;IACnC,SAAS,0DAAmB;IAC5B,SAAS,0DAAmB;IAC5B,OAAO,0DAAmB;IAC1B,WAAW,+CAAiB,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,eAAI;IACtF,MAAM,0DAAmB;IAEzB,IAAI,0DAAmB;IACvB,YAAY,0DAAmB;IAC/B,cAAc,qEAAgD;IAC9D,SAAS,0DAAmB;IAE5B,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,KAAK,8IAED;IAEJ,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsD;IAGlF,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAc;IAGpD,OAAO,CAAC,UAAU,CAAS;IAE3B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAsD;IAE/E,WAAW,yCAA+C;IAE1D,WAAW,kDAA+D;IAE1E,YAAY,yCAOT;IAEH,gBAAgB,qDAQb;;IAuEH,kBAAkB,IAAI,IAAI;IAI1B,gBAAgB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI;IAK/C,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAO3B,OAAO,CAAC,WAAW;IAiBnB,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAU/B,OAAO,CAAC,mBAAmB;yCAlLhB,WAAW;2CAAX,WAAW;CAsLvB"}

package/dist/controls/input/sd-textfield.js

@@ -1,7 +1,7 @@
 import { isPlatformBrowser } from "@angular/common";
 import { booleanAttribute, ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input, model, PLATFORM_ID, signal, viewChild, ViewEncapsulation, } from "@angular/core";
 import { setupInvalid } from "../../core/validation/setupInvalid";
-import { textfieldTypeHandlers, } from "./sd-textfield-type-handlers";
+import { textfieldTypeHandlers } from "./sd-textfield-type-handlers";
 import * as i0 from "@angular/core";
 const _c0 = ["inputEl"];
 function SdTextfield_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -120,9 +120,9 @@ export class SdTextfield {
         const value = this.value();
         if (value == null)
             return undefined;
-        return this._handler().toDisplayText(value, {
+        return (this._handler().toDisplayText(value, {
             minDigits: this.minDigits(),
-        }) ?? this.controlValue();
+        }) ?? this.controlValue());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "controlValueText" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -142,8 +142,8 @@ export class SdTextfield {
                 if (document.activeElement === inputEl) {
                     const domParsed = this._handler().parse(inputEl.value, { format: this.format() });
                     // DOM raw 가 현재 모델의 유효한 표현이면(사용자 입력 유래) 되쓰지 않아 캐럿·IME 보호
-                    const domReflectsModel = domParsed != null
-                        && this._handler().toControlValue(domParsed, {
+                    const domReflectsModel = domParsed != null &&
+                        this._handler().toControlValue(domParsed, {
                             useNumberComma: this.useNumberComma(),
                             format: this.format(),
                         }) === controlValue;
@@ -238,7 +238,7 @@ export class SdTextfield {
             i0.ɵɵqueryAdvance();
         } }, hostVars: 7, hostBindings: function SdTextfield_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-type", ctx.type())("data-sd-disabled", ctx.disabled())("data-sd-readonly", ctx.readonly())("data-sd-inline", ctx.inline())("data-sd-inset", ctx.inset())("data-sd-size", ctx.size())("data-sd-theme", ctx.theme());
-        } }, inputs: { value: [1, "value"], type: [1, "type"], placeholder: [1, "placeholder"], title: [1, "title"], inputStyle: [1, "inputStyle"], inputClass: [1, "inputClass"], disabled: [1, "disabled"], readonly: [1, "readonly"], required: [1, "required"], min: [1, "min"], max: [1, "max"], minlength: [1, "minlength"], maxlength: [1, "maxlength"], pattern: [1, "pattern"], validatorFn: [1, "validatorFn"], format: [1, "format"], step: [1, "step"], autocomplete: [1, "autocomplete"], useNumberComma: [1, "useNumberComma"], minDigits: [1, "minDigits"], inline: [1, "inline"], inset: [1, "inset"], size: [1, "size"], theme: [1, "theme"] }, outputs: { value: "valueChange" }, decls: 4, vars: 9, consts: [["inputEl", ""], [1, "tx-trans-light"], [3, "style", "class", "type"], [1, "tx-trans-lighter"], [3, "input", "compositionstart", "compositionend", "blur", "type"]], template: function SdTextfield_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { value: [1, "value"], type: [1, "type"], placeholder: [1, "placeholder"], title: [1, "title"], inputStyle: [1, "inputStyle"], inputClass: [1, "inputClass"], disabled: [1, "disabled"], readonly: [1, "readonly"], required: [1, "required"], min: [1, "min"], max: [1, "max"], minlength: [1, "minlength"], maxlength: [1, "maxlength"], pattern: [1, "pattern"], validatorFn: [1, "validatorFn"], format: [1, "format"], step: [1, "step"], autocomplete: [1, "autocomplete"], useNumberComma: [1, "useNumberComma"], minDigits: [1, "minDigits"], inline: [1, "inline"], inset: [1, "inset"], size: [1, "size"], theme: [1, "theme"] }, outputs: { value: "valueChange" }, decls: 4, vars: 9, consts: [["inputEl", ""], [1, "tx-muted"], [3, "style", "class", "type"], [1, "tx-faint"], [3, "input", "compositionstart", "compositionend", "blur", "type"]], template: function SdTextfield_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "div");
             i0.ɵɵconditionalCreate(1, SdTextfield_Conditional_1_Template, 2, 0, "span", 1)(2, SdTextfield_Conditional_2_Template, 3, 1);
             i0.ɵɵdomElementEnd();
@@ -252,7 +252,7 @@ export class SdTextfield {
             i0.ɵɵconditional(ctx.controlType() === "password" ? 1 : 2);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(!ctx.readonly() && !ctx.disabled() ? 3 : -1);
-        } }, styles: ["sd-textfield {\n  display: block;\n  position: relative;\n}\nsd-textfield > input,\nsd-textfield > ._contents {\n  display: block;\n  padding: var(--gap-sm) var(--gap-default);\n  border: 1px solid transparent;\n  font-size: var(--font-size-default);\n  font-family: var(--font-family);\n  font-variant-numeric: tabular-nums;\n  line-height: var(--line-height);\n  color: var(--text-trans-default);\n  font-family: var(--font-family-field);\n  overflow: auto;\n  width: 100%;\n  border: 1px solid var(--border-color-light);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-textfield > input:focus,\nsd-textfield > ._contents:focus {\n  outline: none;\n  border-color: var(--theme-primary-default);\n}\nsd-textfield > input[type=date], sd-textfield > input[type=month], sd-textfield > input[type=datetime-local],\nsd-textfield > ._contents[type=date],\nsd-textfield > ._contents[type=month],\nsd-textfield > ._contents[type=datetime-local] {\n  padding-top: calc(var(--gap-sm) - 1px);\n  padding-bottom: calc(var(--gap-sm) - 1px);\n}\nsd-textfield > input::-webkit-scrollbar,\nsd-textfield > ._contents::-webkit-scrollbar {\n  display: none;\n}\nsd-textfield > input::-webkit-input-placeholder,\nsd-textfield > ._contents::-webkit-input-placeholder {\n  color: var(--text-trans-lighter);\n}\nsd-textfield > input::-webkit-outer-spin-button, sd-textfield > input::-webkit-inner-spin-button,\nsd-textfield > ._contents::-webkit-outer-spin-button,\nsd-textfield > ._contents::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\nsd-textfield > input::-webkit-calendar-picker-indicator,\nsd-textfield > ._contents::-webkit-calendar-picker-indicator {\n  cursor: pointer;\n  margin: auto;\n}\nsd-textfield > ._contents {\n  display: none;\n}\nsd-textfield > ._contents > pre {\n  font-family: inherit;\n}\nsd-textfield[data-sd-type=number] > input,\nsd-textfield[data-sd-type=number] > ._contents {\n  text-align: right;\n}\nsd-textfield[data-sd-theme=gray] > input,\nsd-textfield[data-sd-theme=gray] > ._contents {\n  background: var(--theme-gray-lightest);\n}\nsd-textfield[data-sd-theme=blue-gray] > input,\nsd-textfield[data-sd-theme=blue-gray] > ._contents {\n  background: var(--theme-blue-gray-lightest);\n}\nsd-textfield[data-sd-theme=primary] > input,\nsd-textfield[data-sd-theme=primary] > ._contents {\n  background: var(--theme-primary-lightest);\n}\nsd-textfield[data-sd-theme=secondary] > input,\nsd-textfield[data-sd-theme=secondary] > ._contents {\n  background: var(--theme-secondary-lightest);\n}\nsd-textfield[data-sd-theme=info] > input,\nsd-textfield[data-sd-theme=info] > ._contents {\n  background: var(--theme-info-lightest);\n}\nsd-textfield[data-sd-theme=success] > input,\nsd-textfield[data-sd-theme=success] > ._contents {\n  background: var(--theme-success-lightest);\n}\nsd-textfield[data-sd-theme=warning] > input,\nsd-textfield[data-sd-theme=warning] > ._contents {\n  background: var(--theme-warning-lightest);\n}\nsd-textfield[data-sd-theme=danger] > input,\nsd-textfield[data-sd-theme=danger] > ._contents {\n  background: var(--theme-danger-lightest);\n}\nsd-textfield[data-sd-size=sm] > input,\nsd-textfield[data-sd-size=sm] > ._contents {\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-textfield[data-sd-size=sm] > input[type=date], sd-textfield[data-sd-size=sm] > input[type=month], sd-textfield[data-sd-size=sm] > input[type=datetime-local], sd-textfield[data-sd-size=sm] > input[type=color],\nsd-textfield[data-sd-size=sm] > ._contents[type=date],\nsd-textfield[data-sd-size=sm] > ._contents[type=month],\nsd-textfield[data-sd-size=sm] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=sm] > ._contents[type=color] {\n  padding-top: calc(var(--gap-xs) - 1px);\n  padding-bottom: calc(var(--gap-xs) - 1px);\n}\nsd-textfield[data-sd-size=lg] > input,\nsd-textfield[data-sd-size=lg] > ._contents {\n  padding: var(--gap-default) var(--gap-lg);\n}\nsd-textfield[data-sd-size=lg] > input[type=date], sd-textfield[data-sd-size=lg] > input[type=month], sd-textfield[data-sd-size=lg] > input[type=datetime-local], sd-textfield[data-sd-size=lg] > input[type=color],\nsd-textfield[data-sd-size=lg] > ._contents[type=date],\nsd-textfield[data-sd-size=lg] > ._contents[type=month],\nsd-textfield[data-sd-size=lg] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=lg] > ._contents[type=color] {\n  padding-top: calc(var(--gap-default) - 1px);\n  padding-bottom: calc(var(--gap-default) - 1px);\n}\nsd-textfield[data-sd-inline=true] {\n  display: inline-block;\n  vertical-align: top;\n}\nsd-textfield[data-sd-inline=true] > input,\nsd-textfield[data-sd-inline=true] > ._contents {\n  width: auto;\n  vertical-align: top;\n}\nsd-textfield[data-sd-inset=true] > ._contents {\n  display: block;\n}\nsd-textfield[data-sd-inset=true] > input {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\nsd-textfield[data-sd-inset=true] > input,\nsd-textfield[data-sd-inset=true] > ._contents {\n  width: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-textfield[data-sd-inset=true] > input:focus {\n  outline: 1px solid var(--theme-primary-default);\n  outline-offset: -1px;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=month] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=month] > ._contents {\n  min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=date] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=date] > ._contents {\n  min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > ._contents {\n  min-width: 14em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=year] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=year] > ._contents {\n  min-width: 4em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color] > ._contents {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > ._contents {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > ._contents {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-textfield[data-sd-disabled=true] > ._contents {\n  display: block;\n  background: var(--trans-lightest);\n  color: var(--text-trans-light);\n}\nsd-textfield[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n  background: var(--control-color);\n  color: var(--text-trans-default);\n}\nsd-textfield[data-sd-readonly=true] > ._contents {\n  display: block;\n}"], encapsulation: 2 });
+        } }, styles: ["sd-textfield {\n  display: block;\n  position: relative;\n}\nsd-textfield > input,\nsd-textfield > ._contents {\n  display: block;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  border: 1px solid transparent;\n  font-size: var(--sd-font-size-default);\n  font-family: var(--sd-font-family);\n  font-variant-numeric: tabular-nums;\n  line-height: var(--sd-line-height);\n  color: var(--sd-tx-default);\n  font-family: var(--sd-font-family-field);\n  overflow: auto;\n  width: 100%;\n  border: 1px solid var(--sd-bd-field);\n  border-radius: var(--sd-radius-default);\n  background-color: var(--sd-bg-field);\n}\nsd-textfield > input:focus,\nsd-textfield > ._contents:focus {\n  outline: none;\n  border-color: var(--sd-focus-ring-color);\n}\nsd-textfield > input[type=date], sd-textfield > input[type=month], sd-textfield > input[type=datetime-local],\nsd-textfield > ._contents[type=date],\nsd-textfield > ._contents[type=month],\nsd-textfield > ._contents[type=datetime-local] {\n  padding-top: calc(var(--sd-gap-sm) - 1px);\n  padding-bottom: calc(var(--sd-gap-sm) - 1px);\n}\nsd-textfield > input::-webkit-scrollbar,\nsd-textfield > ._contents::-webkit-scrollbar {\n  display: none;\n}\nsd-textfield > input::-webkit-input-placeholder,\nsd-textfield > ._contents::-webkit-input-placeholder {\n  color: var(--sd-tx-faint);\n}\nsd-textfield > input::-webkit-outer-spin-button, sd-textfield > input::-webkit-inner-spin-button,\nsd-textfield > ._contents::-webkit-outer-spin-button,\nsd-textfield > ._contents::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\nsd-textfield > input::-webkit-calendar-picker-indicator,\nsd-textfield > ._contents::-webkit-calendar-picker-indicator {\n  cursor: pointer;\n  margin: auto;\n}\nsd-textfield > ._contents {\n  display: none;\n}\nsd-textfield > ._contents > pre {\n  font-family: inherit;\n}\nsd-textfield[data-sd-type=number] > input,\nsd-textfield[data-sd-type=number] > ._contents {\n  text-align: right;\n}\nsd-textfield[data-sd-theme=gray] > input,\nsd-textfield[data-sd-theme=gray] > ._contents {\n  background-color: var(--sd-bg-gray-subtle);\n}\nsd-textfield[data-sd-theme=blue-gray] > input,\nsd-textfield[data-sd-theme=blue-gray] > ._contents {\n  background-color: var(--sd-bg-blue-gray-subtle);\n}\nsd-textfield[data-sd-theme=primary] > input,\nsd-textfield[data-sd-theme=primary] > ._contents {\n  background-color: var(--sd-bg-primary-subtle);\n}\nsd-textfield[data-sd-theme=secondary] > input,\nsd-textfield[data-sd-theme=secondary] > ._contents {\n  background-color: var(--sd-bg-secondary-subtle);\n}\nsd-textfield[data-sd-theme=info] > input,\nsd-textfield[data-sd-theme=info] > ._contents {\n  background-color: var(--sd-bg-info-subtle);\n}\nsd-textfield[data-sd-theme=success] > input,\nsd-textfield[data-sd-theme=success] > ._contents {\n  background-color: var(--sd-bg-success-subtle);\n}\nsd-textfield[data-sd-theme=warning] > input,\nsd-textfield[data-sd-theme=warning] > ._contents {\n  background-color: var(--sd-bg-warning-subtle);\n}\nsd-textfield[data-sd-theme=danger] > input,\nsd-textfield[data-sd-theme=danger] > ._contents {\n  background-color: var(--sd-bg-danger-subtle);\n}\nsd-textfield[data-sd-size=sm] > input,\nsd-textfield[data-sd-size=sm] > ._contents {\n  padding: var(--sd-gap-xs) var(--sd-gap-sm);\n}\nsd-textfield[data-sd-size=sm] > input[type=date], sd-textfield[data-sd-size=sm] > input[type=month], sd-textfield[data-sd-size=sm] > input[type=datetime-local], sd-textfield[data-sd-size=sm] > input[type=color],\nsd-textfield[data-sd-size=sm] > ._contents[type=date],\nsd-textfield[data-sd-size=sm] > ._contents[type=month],\nsd-textfield[data-sd-size=sm] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=sm] > ._contents[type=color] {\n  padding-top: calc(var(--sd-gap-xs) - 1px);\n  padding-bottom: calc(var(--sd-gap-xs) - 1px);\n}\nsd-textfield[data-sd-size=lg] > input,\nsd-textfield[data-sd-size=lg] > ._contents {\n  padding: var(--sd-gap-default) var(--sd-gap-lg);\n}\nsd-textfield[data-sd-size=lg] > input[type=date], sd-textfield[data-sd-size=lg] > input[type=month], sd-textfield[data-sd-size=lg] > input[type=datetime-local], sd-textfield[data-sd-size=lg] > input[type=color],\nsd-textfield[data-sd-size=lg] > ._contents[type=date],\nsd-textfield[data-sd-size=lg] > ._contents[type=month],\nsd-textfield[data-sd-size=lg] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=lg] > ._contents[type=color] {\n  padding-top: calc(var(--sd-gap-default) - 1px);\n  padding-bottom: calc(var(--sd-gap-default) - 1px);\n}\nsd-textfield[data-sd-inline=true] {\n  display: inline-block;\n  vertical-align: top;\n}\nsd-textfield[data-sd-inline=true] > input,\nsd-textfield[data-sd-inline=true] > ._contents {\n  width: auto;\n  vertical-align: top;\n}\nsd-textfield[data-sd-inset=true] > ._contents {\n  display: block;\n}\nsd-textfield[data-sd-inset=true] > input {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\nsd-textfield[data-sd-inset=true] > input,\nsd-textfield[data-sd-inset=true] > ._contents {\n  width: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-textfield[data-sd-inset=true] > input:focus {\n  outline: 1px solid var(--sd-focus-ring-color);\n  outline-offset: -1px;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=month] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=month] > ._contents {\n  min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=date] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=date] > ._contents {\n  min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > ._contents {\n  min-width: 14em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=year] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=year] > ._contents {\n  min-width: 4em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color] > ._contents {\n  height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-sm) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > ._contents {\n  height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-xs) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > ._contents {\n  height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-default) * 2);\n}\nsd-textfield[data-sd-disabled=true] > ._contents {\n  display: block;\n  background-color: var(--sd-bg-disabled);\n  color: var(--sd-tx-disabled);\n}\nsd-textfield[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n  background-color: var(--sd-bg-control);\n  color: var(--sd-tx-default);\n}\nsd-textfield[data-sd-readonly=true] > ._contents {\n  display: block;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTextfield, [{
         type: Component,
@@ -264,12 +264,12 @@ export class SdTextfield {
       [style.visibility]="!readonly() && !disabled() ? 'hidden' : undefined"
     >
       @if (controlType() === "password") {
-        <span class="tx-trans-light">****</span>
+        <span class="tx-muted">****</span>
       } @else {
         @if (controlValue()) {
           <pre>{{ controlValueText() ? controlValueText() : " " }}</pre>
         } @else if (placeholder()) {
-          <span class="tx-trans-lighter">{{ placeholder() }}</span>
+          <span class="tx-faint">{{ placeholder() }}</span>
         } @else {
           <span>&nbsp;</span>
         }
@@ -302,6 +302,6 @@ export class SdTextfield {
                     "[attr.data-sd-inset]": "inset()",
                     "[attr.data-sd-size]": "size()",
                     "[attr.data-sd-theme]": "theme()",
-                }, styles: ["sd-textfield {\n  display: block;\n  position: relative;\n}\nsd-textfield > input,\nsd-textfield > ._contents {\n  display: block;\n  padding: var(--gap-sm) var(--gap-default);\n  border: 1px solid transparent;\n  font-size: var(--font-size-default);\n  font-family: var(--font-family);\n  font-variant-numeric: tabular-nums;\n  line-height: var(--line-height);\n  color: var(--text-trans-default);\n  font-family: var(--font-family-field);\n  overflow: auto;\n  width: 100%;\n  border: 1px solid var(--border-color-light);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-textfield > input:focus,\nsd-textfield > ._contents:focus {\n  outline: none;\n  border-color: var(--theme-primary-default);\n}\nsd-textfield > input[type=date], sd-textfield > input[type=month], sd-textfield > input[type=datetime-local],\nsd-textfield > ._contents[type=date],\nsd-textfield > ._contents[type=month],\nsd-textfield > ._contents[type=datetime-local] {\n  padding-top: calc(var(--gap-sm) - 1px);\n  padding-bottom: calc(var(--gap-sm) - 1px);\n}\nsd-textfield > input::-webkit-scrollbar,\nsd-textfield > ._contents::-webkit-scrollbar {\n  display: none;\n}\nsd-textfield > input::-webkit-input-placeholder,\nsd-textfield > ._contents::-webkit-input-placeholder {\n  color: var(--text-trans-lighter);\n}\nsd-textfield > input::-webkit-outer-spin-button, sd-textfield > input::-webkit-inner-spin-button,\nsd-textfield > ._contents::-webkit-outer-spin-button,\nsd-textfield > ._contents::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\nsd-textfield > input::-webkit-calendar-picker-indicator,\nsd-textfield > ._contents::-webkit-calendar-picker-indicator {\n  cursor: pointer;\n  margin: auto;\n}\nsd-textfield > ._contents {\n  display: none;\n}\nsd-textfield > ._contents > pre {\n  font-family: inherit;\n}\nsd-textfield[data-sd-type=number] > input,\nsd-textfield[data-sd-type=number] > ._contents {\n  text-align: right;\n}\nsd-textfield[data-sd-theme=gray] > input,\nsd-textfield[data-sd-theme=gray] > ._contents {\n  background: var(--theme-gray-lightest);\n}\nsd-textfield[data-sd-theme=blue-gray] > input,\nsd-textfield[data-sd-theme=blue-gray] > ._contents {\n  background: var(--theme-blue-gray-lightest);\n}\nsd-textfield[data-sd-theme=primary] > input,\nsd-textfield[data-sd-theme=primary] > ._contents {\n  background: var(--theme-primary-lightest);\n}\nsd-textfield[data-sd-theme=secondary] > input,\nsd-textfield[data-sd-theme=secondary] > ._contents {\n  background: var(--theme-secondary-lightest);\n}\nsd-textfield[data-sd-theme=info] > input,\nsd-textfield[data-sd-theme=info] > ._contents {\n  background: var(--theme-info-lightest);\n}\nsd-textfield[data-sd-theme=success] > input,\nsd-textfield[data-sd-theme=success] > ._contents {\n  background: var(--theme-success-lightest);\n}\nsd-textfield[data-sd-theme=warning] > input,\nsd-textfield[data-sd-theme=warning] > ._contents {\n  background: var(--theme-warning-lightest);\n}\nsd-textfield[data-sd-theme=danger] > input,\nsd-textfield[data-sd-theme=danger] > ._contents {\n  background: var(--theme-danger-lightest);\n}\nsd-textfield[data-sd-size=sm] > input,\nsd-textfield[data-sd-size=sm] > ._contents {\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-textfield[data-sd-size=sm] > input[type=date], sd-textfield[data-sd-size=sm] > input[type=month], sd-textfield[data-sd-size=sm] > input[type=datetime-local], sd-textfield[data-sd-size=sm] > input[type=color],\nsd-textfield[data-sd-size=sm] > ._contents[type=date],\nsd-textfield[data-sd-size=sm] > ._contents[type=month],\nsd-textfield[data-sd-size=sm] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=sm] > ._contents[type=color] {\n  padding-top: calc(var(--gap-xs) - 1px);\n  padding-bottom: calc(var(--gap-xs) - 1px);\n}\nsd-textfield[data-sd-size=lg] > input,\nsd-textfield[data-sd-size=lg] > ._contents {\n  padding: var(--gap-default) var(--gap-lg);\n}\nsd-textfield[data-sd-size=lg] > input[type=date], sd-textfield[data-sd-size=lg] > input[type=month], sd-textfield[data-sd-size=lg] > input[type=datetime-local], sd-textfield[data-sd-size=lg] > input[type=color],\nsd-textfield[data-sd-size=lg] > ._contents[type=date],\nsd-textfield[data-sd-size=lg] > ._contents[type=month],\nsd-textfield[data-sd-size=lg] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=lg] > ._contents[type=color] {\n  padding-top: calc(var(--gap-default) - 1px);\n  padding-bottom: calc(var(--gap-default) - 1px);\n}\nsd-textfield[data-sd-inline=true] {\n  display: inline-block;\n  vertical-align: top;\n}\nsd-textfield[data-sd-inline=true] > input,\nsd-textfield[data-sd-inline=true] > ._contents {\n  width: auto;\n  vertical-align: top;\n}\nsd-textfield[data-sd-inset=true] > ._contents {\n  display: block;\n}\nsd-textfield[data-sd-inset=true] > input {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\nsd-textfield[data-sd-inset=true] > input,\nsd-textfield[data-sd-inset=true] > ._contents {\n  width: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-textfield[data-sd-inset=true] > input:focus {\n  outline: 1px solid var(--theme-primary-default);\n  outline-offset: -1px;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=month] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=month] > ._contents {\n  min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=date] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=date] > ._contents {\n  min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > ._contents {\n  min-width: 14em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=year] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=year] > ._contents {\n  min-width: 4em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color] > ._contents {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > ._contents {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > ._contents {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-textfield[data-sd-disabled=true] > ._contents {\n  display: block;\n  background: var(--trans-lightest);\n  color: var(--text-trans-light);\n}\nsd-textfield[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n  background: var(--control-color);\n  color: var(--text-trans-default);\n}\nsd-textfield[data-sd-readonly=true] > ._contents {\n  display: block;\n}"] }]
+                }, styles: ["sd-textfield {\n  display: block;\n  position: relative;\n}\nsd-textfield > input,\nsd-textfield > ._contents {\n  display: block;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  border: 1px solid transparent;\n  font-size: var(--sd-font-size-default);\n  font-family: var(--sd-font-family);\n  font-variant-numeric: tabular-nums;\n  line-height: var(--sd-line-height);\n  color: var(--sd-tx-default);\n  font-family: var(--sd-font-family-field);\n  overflow: auto;\n  width: 100%;\n  border: 1px solid var(--sd-bd-field);\n  border-radius: var(--sd-radius-default);\n  background-color: var(--sd-bg-field);\n}\nsd-textfield > input:focus,\nsd-textfield > ._contents:focus {\n  outline: none;\n  border-color: var(--sd-focus-ring-color);\n}\nsd-textfield > input[type=date], sd-textfield > input[type=month], sd-textfield > input[type=datetime-local],\nsd-textfield > ._contents[type=date],\nsd-textfield > ._contents[type=month],\nsd-textfield > ._contents[type=datetime-local] {\n  padding-top: calc(var(--sd-gap-sm) - 1px);\n  padding-bottom: calc(var(--sd-gap-sm) - 1px);\n}\nsd-textfield > input::-webkit-scrollbar,\nsd-textfield > ._contents::-webkit-scrollbar {\n  display: none;\n}\nsd-textfield > input::-webkit-input-placeholder,\nsd-textfield > ._contents::-webkit-input-placeholder {\n  color: var(--sd-tx-faint);\n}\nsd-textfield > input::-webkit-outer-spin-button, sd-textfield > input::-webkit-inner-spin-button,\nsd-textfield > ._contents::-webkit-outer-spin-button,\nsd-textfield > ._contents::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\nsd-textfield > input::-webkit-calendar-picker-indicator,\nsd-textfield > ._contents::-webkit-calendar-picker-indicator {\n  cursor: pointer;\n  margin: auto;\n}\nsd-textfield > ._contents {\n  display: none;\n}\nsd-textfield > ._contents > pre {\n  font-family: inherit;\n}\nsd-textfield[data-sd-type=number] > input,\nsd-textfield[data-sd-type=number] > ._contents {\n  text-align: right;\n}\nsd-textfield[data-sd-theme=gray] > input,\nsd-textfield[data-sd-theme=gray] > ._contents {\n  background-color: var(--sd-bg-gray-subtle);\n}\nsd-textfield[data-sd-theme=blue-gray] > input,\nsd-textfield[data-sd-theme=blue-gray] > ._contents {\n  background-color: var(--sd-bg-blue-gray-subtle);\n}\nsd-textfield[data-sd-theme=primary] > input,\nsd-textfield[data-sd-theme=primary] > ._contents {\n  background-color: var(--sd-bg-primary-subtle);\n}\nsd-textfield[data-sd-theme=secondary] > input,\nsd-textfield[data-sd-theme=secondary] > ._contents {\n  background-color: var(--sd-bg-secondary-subtle);\n}\nsd-textfield[data-sd-theme=info] > input,\nsd-textfield[data-sd-theme=info] > ._contents {\n  background-color: var(--sd-bg-info-subtle);\n}\nsd-textfield[data-sd-theme=success] > input,\nsd-textfield[data-sd-theme=success] > ._contents {\n  background-color: var(--sd-bg-success-subtle);\n}\nsd-textfield[data-sd-theme=warning] > input,\nsd-textfield[data-sd-theme=warning] > ._contents {\n  background-color: var(--sd-bg-warning-subtle);\n}\nsd-textfield[data-sd-theme=danger] > input,\nsd-textfield[data-sd-theme=danger] > ._contents {\n  background-color: var(--sd-bg-danger-subtle);\n}\nsd-textfield[data-sd-size=sm] > input,\nsd-textfield[data-sd-size=sm] > ._contents {\n  padding: var(--sd-gap-xs) var(--sd-gap-sm);\n}\nsd-textfield[data-sd-size=sm] > input[type=date], sd-textfield[data-sd-size=sm] > input[type=month], sd-textfield[data-sd-size=sm] > input[type=datetime-local], sd-textfield[data-sd-size=sm] > input[type=color],\nsd-textfield[data-sd-size=sm] > ._contents[type=date],\nsd-textfield[data-sd-size=sm] > ._contents[type=month],\nsd-textfield[data-sd-size=sm] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=sm] > ._contents[type=color] {\n  padding-top: calc(var(--sd-gap-xs) - 1px);\n  padding-bottom: calc(var(--sd-gap-xs) - 1px);\n}\nsd-textfield[data-sd-size=lg] > input,\nsd-textfield[data-sd-size=lg] > ._contents {\n  padding: var(--sd-gap-default) var(--sd-gap-lg);\n}\nsd-textfield[data-sd-size=lg] > input[type=date], sd-textfield[data-sd-size=lg] > input[type=month], sd-textfield[data-sd-size=lg] > input[type=datetime-local], sd-textfield[data-sd-size=lg] > input[type=color],\nsd-textfield[data-sd-size=lg] > ._contents[type=date],\nsd-textfield[data-sd-size=lg] > ._contents[type=month],\nsd-textfield[data-sd-size=lg] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=lg] > ._contents[type=color] {\n  padding-top: calc(var(--sd-gap-default) - 1px);\n  padding-bottom: calc(var(--sd-gap-default) - 1px);\n}\nsd-textfield[data-sd-inline=true] {\n  display: inline-block;\n  vertical-align: top;\n}\nsd-textfield[data-sd-inline=true] > input,\nsd-textfield[data-sd-inline=true] > ._contents {\n  width: auto;\n  vertical-align: top;\n}\nsd-textfield[data-sd-inset=true] > ._contents {\n  display: block;\n}\nsd-textfield[data-sd-inset=true] > input {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\nsd-textfield[data-sd-inset=true] > input,\nsd-textfield[data-sd-inset=true] > ._contents {\n  width: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-textfield[data-sd-inset=true] > input:focus {\n  outline: 1px solid var(--sd-focus-ring-color);\n  outline-offset: -1px;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=month] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=month] > ._contents {\n  min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=date] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=date] > ._contents {\n  min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > ._contents {\n  min-width: 14em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=year] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=year] > ._contents {\n  min-width: 4em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color] > ._contents {\n  height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-sm) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > ._contents {\n  height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-xs) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > ._contents {\n  height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-default) * 2);\n}\nsd-textfield[data-sd-disabled=true] > ._contents {\n  display: block;\n  background-color: var(--sd-bg-disabled);\n  color: var(--sd-tx-disabled);\n}\nsd-textfield[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n  background-color: var(--sd-bg-control);\n  color: var(--sd-tx-default);\n}\nsd-textfield[data-sd-readonly=true] > ._contents {\n  display: block;\n}"] }]
     }], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], validatorFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "validatorFn", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], useNumberComma: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNumberComma", required: false }] }], minDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDigits", 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 }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], _inputElRef: [{ type: i0.ViewChild, args: ["inputEl", { isSignal: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTextfield, { className: "SdTextfield", filePath: "packages/angular/src/controls/input/sd-textfield.ts", lineNumber: 300 }); })();

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

@@ -13,7 +13,7 @@ function SdListItem_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ng-icon", 5);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("tx-theme-primary-default", ctx_r0.selected())("tx-trans-lightest", !ctx_r0.selected());
+    i0.ɵɵclassProp("tx-primary", ctx_r0.selected())("tx-faint", !ctx_r0.selected());
     i0.ɵɵproperty("svg", ctx_r0.selectedIcon());
 } }
 function SdListItem_Conditional_4_ng_template_1_Template(rf, ctx) { }
@@ -83,7 +83,7 @@ export class SdListItem {
             i0.ɵɵqueryAdvance(2);
         } }, hostVars: 6, hostBindings: function SdListItem_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-layout", ctx.layout())("data-sd-open", ctx.open())("data-sd-selected", ctx.selected())("data-sd-readonly", ctx.readonly())("data-sd-has-children", ctx.hasChildren())("data-sd-has-selected-icon", ctx.selectedIcon() != null);
-        } }, inputs: { layout: [1, "layout"], open: [1, "open"], selected: [1, "selected"], selectedIcon: [1, "selectedIcon"], readonly: [1, "readonly"], contentStyle: [1, "contentStyle"], contentClass: [1, "contentClass"] }, outputs: { open: "openChange" }, ngContentSelectors: _c2, decls: 7, vars: 9, consts: [["tabindex", "0", 1, "_content", 3, "click", "keydown.enter", "sdRipple"], [3, "tx-theme-primary-default", "tx-trans-lightest", "svg"], [1, "_label"], [1, "_tool"], [3, "open"], [3, "svg"], [3, "ngTemplateOutlet"], [1, "_children"], [1, "_indent-guide"]], template: function SdListItem_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { layout: [1, "layout"], open: [1, "open"], selected: [1, "selected"], selectedIcon: [1, "selectedIcon"], readonly: [1, "readonly"], contentStyle: [1, "contentStyle"], contentClass: [1, "contentClass"] }, outputs: { open: "openChange" }, ngContentSelectors: _c2, decls: 7, vars: 9, consts: [["tabindex", "0", 1, "_content", 3, "click", "keydown.enter", "sdRipple"], [3, "tx-primary", "tx-faint", "svg"], [1, "_label"], [1, "_tool"], [3, "open"], [3, "svg"], [3, "ngTemplateOutlet"], [1, "_children"], [1, "_indent-guide"]], template: function SdListItem_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c1);
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("click", function SdListItem_Template_div_click_0_listener() { return ctx.onContentClick(); })("keydown.enter", function SdListItem_Template_div_keydown_enter_0_listener() { return ctx.onContentClick(); });
@@ -107,49 +107,49 @@ export class SdListItem {
             i0.ɵɵconditional(ctx.layout() === "accordion" && ctx.hasChildren() ? 5 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.hasChildren() ? 6 : -1);
-        } }, dependencies: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple], styles: ["sd-list-item {\n  display: block;\n}\nsd-list-item > ._content {\n  display: flex;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  gap: var(--gap-xs);\n  border-radius: var(--border-radius-default);\n  transition: background var(--animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n  flex: 1 1 auto;\n  overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n  outline: none;\n  transition: background var(--animation-duration) ease-out;\n  background: var(--trans-light);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n  background: var(--trans-light);\n  font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n  color: var(--text-trans-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n  background: var(--trans-light);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n  cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n  position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 1em;\n  width: 0;\n  border-left: 1px solid var(--trans-light);\n  pointer-events: none;\n}\nsd-list-item[data-sd-layout=accordion]:not([data-sd-readonly=true]) > ._content:hover {\n  transition: background var(--animation-duration) ease-out;\n  background: var(--trans-light);\n}\nsd-list-item[data-sd-layout=accordion] > sd-collapse > ._content > ._children > sd-list > sd-list-item > ._content {\n  padding-left: 1.5em;\n}\nsd-list-item[data-sd-layout=flat][data-sd-has-children=true] > ._content {\n  display: block;\n  background: transparent;\n  cursor: default;\n  font-size: var(--font-size-sm);\n  opacity: 0.7;\n  margin: 0;\n}\n\n.sd-theme-mobile > sd-list-item > ._content:hover {\n  background: transparent;\n}"], encapsulation: 2 });
+        } }, dependencies: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple], styles: ["sd-list-item {\n  display: block;\n}\nsd-list-item > ._content {\n  display: flex;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  cursor: pointer;\n  gap: var(--sd-gap-xs);\n  border-radius: var(--sd-radius-default);\n  transition: background var(--sd-animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n  flex: 1 1 auto;\n  overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n  outline: none;\n  transition: background var(--sd-animation-duration) ease-out;\n  background-color: var(--sd-bg-state-hover);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n  background-color: var(--sd-bg-state-selected);\n  font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n  color: var(--sd-tx-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n  background-color: var(--sd-bg-state-hover);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n  cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n  position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 1em;\n  width: 0;\n  border-left: 1px solid var(--sd-bd-soft);\n  pointer-events: none;\n}\nsd-list-item[data-sd-layout=accordion]:not([data-sd-readonly=true]) > ._content:hover {\n  transition: background var(--sd-animation-duration) ease-out;\n  background-color: var(--sd-bg-state-hover);\n}\nsd-list-item[data-sd-layout=accordion] > sd-collapse > ._content > ._children > sd-list > sd-list-item > ._content {\n  padding-left: 1.5em;\n}\nsd-list-item[data-sd-layout=flat][data-sd-has-children=true] > ._content {\n  display: block;\n  background-color: transparent;\n  cursor: default;\n  font-size: var(--sd-font-size-sm);\n  opacity: 0.7;\n  margin: 0;\n}\n\n.sd-theme-mobile > sd-list-item > ._content:hover {\n  background-color: transparent;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdListItem, [{
         type: Component,
-        args: [{ selector: "sd-list-item", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple], template: `
-    <div
-      class="_content"
-      [style]="contentStyle()"
-      [class]="contentClass()"
-      tabindex="0"
-      (click)="onContentClick()"
-      (keydown.enter)="onContentClick()"
-      [sdRipple]="!readonly() && !(layout() === 'flat' && hasChildren())"
-    >
-      @if (selectedIcon() != null && !hasChildren()) {
-        <ng-icon
-          [class.tx-theme-primary-default]="selected()"
-          [class.tx-trans-lightest]="!selected()"
-          [svg]="selectedIcon()!"
-        />
-      }
-      <div class="_label">
-        <ng-content />
-      </div>
-      @if (toolTpl()) {
-        <div class="_tool">
-          <ng-template [ngTemplateOutlet]="toolTpl()!" />
-        </div>
-      }
-      @if (layout() === "accordion" && hasChildren()) {
-        <sd-collapse-icon [open]="open()" />
-      }
-    </div>
-    @if (hasChildren()) {
-      <sd-collapse [open]="childrenOpen()">
-        <div class="_children">
-          @if (layout() === "accordion") {
-            <div class="_indent-guide"></div>
-          }
-          <ng-content select="sd-list" />
-        </div>
-      </sd-collapse>
-    }
+        args: [{ selector: "sd-list-item", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple], template: `
+    <div
+      class="_content"
+      [style]="contentStyle()"
+      [class]="contentClass()"
+      tabindex="0"
+      (click)="onContentClick()"
+      (keydown.enter)="onContentClick()"
+      [sdRipple]="!readonly() && !(layout() === 'flat' && hasChildren())"
+    >
+      @if (selectedIcon() != null && !hasChildren()) {
+        <ng-icon
+          [class.tx-primary]="selected()"
+          [class.tx-faint]="!selected()"
+          [svg]="selectedIcon()!"
+        />
+      }
+      <div class="_label">
+        <ng-content />
+      </div>
+      @if (toolTpl()) {
+        <div class="_tool">
+          <ng-template [ngTemplateOutlet]="toolTpl()!" />
+        </div>
+      }
+      @if (layout() === "accordion" && hasChildren()) {
+        <sd-collapse-icon [open]="open()" />
+      }
+    </div>
+    @if (hasChildren()) {
+      <sd-collapse [open]="childrenOpen()">
+        <div class="_children">
+          @if (layout() === "accordion") {
+            <div class="_indent-guide"></div>
+          }
+          <ng-content select="sd-list" />
+        </div>
+      </sd-collapse>
+    }
   `, host: {
                     "[attr.data-sd-layout]": "layout()",
                     "[attr.data-sd-open]": "open()",
@@ -157,6 +157,6 @@ export class SdListItem {
                     "[attr.data-sd-readonly]": "readonly()",
                     "[attr.data-sd-has-children]": "hasChildren()",
                     "[attr.data-sd-has-selected-icon]": "selectedIcon() != null",
-                }, styles: ["sd-list-item {\n  display: block;\n}\nsd-list-item > ._content {\n  display: flex;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n  gap: var(--gap-xs);\n  border-radius: var(--border-radius-default);\n  transition: background var(--animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n  flex: 1 1 auto;\n  overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n  outline: none;\n  transition: background var(--animation-duration) ease-out;\n  background: var(--trans-light);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n  background: var(--trans-light);\n  font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n  color: var(--text-trans-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n  background: var(--trans-light);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n  cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n  position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 1em;\n  width: 0;\n  border-left: 1px solid var(--trans-light);\n  pointer-events: none;\n}\nsd-list-item[data-sd-layout=accordion]:not([data-sd-readonly=true]) > ._content:hover {\n  transition: background var(--animation-duration) ease-out;\n  background: var(--trans-light);\n}\nsd-list-item[data-sd-layout=accordion] > sd-collapse > ._content > ._children > sd-list > sd-list-item > ._content {\n  padding-left: 1.5em;\n}\nsd-list-item[data-sd-layout=flat][data-sd-has-children=true] > ._content {\n  display: block;\n  background: transparent;\n  cursor: default;\n  font-size: var(--font-size-sm);\n  opacity: 0.7;\n  margin: 0;\n}\n\n.sd-theme-mobile > sd-list-item > ._content:hover {\n  background: transparent;\n}"] }]
+                }, styles: ["sd-list-item {\n  display: block;\n}\nsd-list-item > ._content {\n  display: flex;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  cursor: pointer;\n  gap: var(--sd-gap-xs);\n  border-radius: var(--sd-radius-default);\n  transition: background var(--sd-animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n  flex: 1 1 auto;\n  overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n  outline: none;\n  transition: background var(--sd-animation-duration) ease-out;\n  background-color: var(--sd-bg-state-hover);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n  background-color: var(--sd-bg-state-selected);\n  font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n  color: var(--sd-tx-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n  background-color: var(--sd-bg-state-hover);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n  cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n  position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 1em;\n  width: 0;\n  border-left: 1px solid var(--sd-bd-soft);\n  pointer-events: none;\n}\nsd-list-item[data-sd-layout=accordion]:not([data-sd-readonly=true]) > ._content:hover {\n  transition: background var(--sd-animation-duration) ease-out;\n  background-color: var(--sd-bg-state-hover);\n}\nsd-list-item[data-sd-layout=accordion] > sd-collapse > ._content > ._children > sd-list > sd-list-item > ._content {\n  padding-left: 1.5em;\n}\nsd-list-item[data-sd-layout=flat][data-sd-has-children=true] > ._content {\n  display: block;\n  background-color: transparent;\n  cursor: default;\n  font-size: var(--sd-font-size-sm);\n  opacity: 0.7;\n  margin: 0;\n}\n\n.sd-theme-mobile > sd-list-item > ._content:hover {\n  background-color: transparent;\n}"] }]
     }], null, { 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: 170 }); })();

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

@@ -9,7 +9,7 @@ export class SdList {
         } }, inputs: { inset: [1, "inset"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdList_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["sd-list {\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n  background: var(--control-color);\n  border: 1px solid var(--border-color-default);\n  border-radius: var(--border-radius-default);\n  padding: var(--gap-sm);\n  gap: var(--gap-xs);\n}\nsd-list[data-sd-inset=true] {\n  background: transparent;\n  border: none;\n}\nsd-list[data-sd-inset=true] sd-list {\n  background: transparent;\n}\nsd-list sd-list-item sd-list {\n  border-color: transparent;\n  border-radius: 0;\n  padding: 0;\n  background: transparent;\n}"], encapsulation: 2 });
+        } }, styles: ["sd-list {\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n  background-color: var(--sd-bg-control);\n  border: 1px solid var(--sd-bd-strong);\n  border-radius: var(--sd-radius-default);\n  padding: var(--sd-gap-sm);\n  gap: var(--sd-gap-xs);\n}\nsd-list[data-sd-inset=true] {\n  background-color: transparent;\n  border: none;\n}\nsd-list[data-sd-inset=true] sd-list {\n  background-color: transparent;\n}\nsd-list sd-list-item sd-list {\n  border-color: transparent;\n  border-radius: 0;\n  padding: 0;\n  background-color: transparent;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdList, [{
         type: Component,
@@ -17,6 +17,6 @@ export class SdList {
     <ng-content />
   `, host: {
                     "[attr.data-sd-inset]": "inset()",
-                }, styles: ["sd-list {\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n  background: var(--control-color);\n  border: 1px solid var(--border-color-default);\n  border-radius: var(--border-radius-default);\n  padding: var(--gap-sm);\n  gap: var(--gap-xs);\n}\nsd-list[data-sd-inset=true] {\n  background: transparent;\n  border: none;\n}\nsd-list[data-sd-inset=true] sd-list {\n  background: transparent;\n}\nsd-list sd-list-item sd-list {\n  border-color: transparent;\n  border-radius: 0;\n  padding: 0;\n  background: transparent;\n}"] }]
+                }, styles: ["sd-list {\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n  background-color: var(--sd-bg-control);\n  border: 1px solid var(--sd-bd-strong);\n  border-radius: var(--sd-radius-default);\n  padding: var(--sd-gap-sm);\n  gap: var(--sd-gap-xs);\n}\nsd-list[data-sd-inset=true] {\n  background-color: transparent;\n  border: none;\n}\nsd-list[data-sd-inset=true] sd-list {\n  background-color: transparent;\n}\nsd-list sd-list-item sd-list {\n  border-color: transparent;\n  border-radius: 0;\n  padding: 0;\n  background-color: transparent;\n}"] }]
     }], null, { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdList, { className: "SdList", filePath: "packages/angular/src/controls/list/sd-list.ts", lineNumber: 53 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"sd-pagination.d.ts","sourceRoot":"","sources":["../../../src/controls/pagination/sd-pagination.ts"],"names":[],"mappings":";AAkBA,qBA2Ca,YAAY;IACvB,KAAK;;;;;MAAsF;IAE3F,WAAW,8CAAY;IACvB,cAAc,oEAA4C;IAC1D,gBAAgB,oEAA6C;IAE7D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAEzB;IAEH,OAAO,0CAKJ;IAEH,OAAO,0CAOJ;IAEH,YAAY,2CAeT;IAEH,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAI5B,aAAa,IAAI,IAAI;IAKrB,aAAa,IAAI,IAAI;IAKrB,SAAS,IAAI,IAAI;IAIjB,QAAQ,IAAI,IAAI;yCA9DL,YAAY;2CAAZ,YAAY;CAkExB"}
+{"version":3,"file":"sd-pagination.d.ts","sourceRoot":"","sources":["../../../src/controls/pagination/sd-pagination.ts"],"names":[],"mappings":";AAkBA,qBA6Ca,YAAY;IACvB,KAAK;;;;;MAAsF;IAE3F,WAAW,8CAAY;IACvB,cAAc,oEAA4C;IAC1D,gBAAgB,oEAA6C;IAE7D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAEzB;IAEH,OAAO,0CAKJ;IAEH,OAAO,0CAOJ;IAEH,YAAY,2CAeT;IAEH,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAI5B,aAAa,IAAI,IAAI;IAKrB,aAAa,IAAI,IAAI;IAKrB,SAAS,IAAI,IAAI;IAIjB,QAAQ,IAAI,IAAI;yCA9DL,YAAY;2CAAZ,YAAY;CAkExB"}