@simplysm/angular 14.0.102 → 14.1.2

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

@@ -1 +1 @@
-{"version":3,"file":"sd-checkbox.d.ts","sourceRoot":"","sources":["../../../src/controls/checkbox/sd-checkbox.ts"],"names":[],"mappings":";AAaA,qBAmPa,UAAU;IACrB,KAAK,+CAAgB;IACrB,WAAW,6CAAgB,OAAO,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,EAAc;IAE/E,IAAI,8CAAsB;IAC1B,KAAK,qEAAiD;IACtD,QAAQ,qEAAiD;IAEzD,IAAI,+DAAwB;IAC5B,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,KAAK,wJAUD;IAEJ,YAAY,0DAAmB;;IAO/B,OAAO,CAAC,KAAK,EAAE,KAAK;IAYpB,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;yCA1C1B,UAAU;2CAAV,UAAU;CAsDtB"}
+{"version":3,"file":"sd-checkbox.d.ts","sourceRoot":"","sources":["../../../src/controls/checkbox/sd-checkbox.ts"],"names":[],"mappings":";AAaA,qBAoPa,UAAU;IACrB,KAAK,+CAAgB;IACrB,WAAW,6CAAgB,OAAO,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,EAAc;IAE/E,IAAI,8CAAsB;IAC1B,KAAK,qEAAiD;IACtD,QAAQ,qEAAiD;IAEzD,IAAI,+DAAwB;IAC5B,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,KAAK,wJAUD;IAEJ,YAAY,0DAAmB;;IAO/B,OAAO,CAAC,KAAK,EAAE,KAAK;IAYpB,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;yCA1C1B,UAAU;2CAAV,UAAU;CAsDtB"}

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

@@ -73,7 +73,7 @@ export class SdCheckbox {
             i0.ɵɵconditional(!ctx.radio() ? 2 : 3);
             i0.ɵɵadvance(2);
             i0.ɵɵstyleMap(ctx.contentStyle());
-        } }, dependencies: [NgIcon], styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-checkbox {\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  color: inherit;\n  cursor: pointer;\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2 + 2px);\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-checkbox {\n    gap: 0;\n  }\n  sd-checkbox > * + * {\n    margin-left: var(--gap-sm);\n  }\n}\nsd-checkbox > ._indicator_rect {\n  display: inline-block;\n  vertical-align: -0.125em;\n  user-select: none;\n  width: calc(var(--font-size-default) + 2px);\n  height: calc(var(--font-size-default) + 2px);\n  border: 1px solid var(--border-color-light);\n  background: var(--theme-secondary-lightest);\n}\nsd-checkbox > ._indicator_rect > ._indicator {\n  margin: -1px -2px;\n  text-align: center;\n  opacity: 0;\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox > ._indicator_rect > ._indicator > ng-icon > svg {\n  vertical-align: top;\n  stroke-width: 2.5px !important;\n}\nsd-checkbox ._contents {\n  display: inline-block;\n  vertical-align: top;\n  padding-left: var(--gap-sm);\n}\nsd-checkbox > ._indicator_rect + ._contents:empty {\n  display: none;\n}\nsd-checkbox:focus > ._indicator_rect {\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect > ._indicator {\n  opacity: 1;\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect {\n  background: var(--theme-gray-lightest);\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect > ._indicator {\n  color: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-gray-default);\n  background: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=gray]:focus > ._indicator_rect {\n  border-color: var(--theme-gray-dark);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect {\n  background: var(--theme-blue-gray-lightest);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect > ._indicator {\n  color: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-blue-gray-default);\n  background: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=blue-gray]:focus > ._indicator_rect {\n  border-color: var(--theme-blue-gray-dark);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect {\n  background: var(--theme-primary-lightest);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect > ._indicator {\n  color: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-primary-default);\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=primary]:focus > ._indicator_rect {\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect {\n  background: var(--theme-secondary-lightest);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect > ._indicator {\n  color: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-secondary-default);\n  background: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=secondary]:focus > ._indicator_rect {\n  border-color: var(--theme-secondary-dark);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect {\n  background: var(--theme-info-lightest);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect > ._indicator {\n  color: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-info-default);\n  background: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=info]:focus > ._indicator_rect {\n  border-color: var(--theme-info-dark);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect {\n  background: var(--theme-success-lightest);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect > ._indicator {\n  color: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-success-default);\n  background: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=success]:focus > ._indicator_rect {\n  border-color: var(--theme-success-dark);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect {\n  background: var(--theme-warning-lightest);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect > ._indicator {\n  color: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-warning-default);\n  background: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=warning]:focus > ._indicator_rect {\n  border-color: var(--theme-warning-dark);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect {\n  background: var(--theme-danger-lightest);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect > ._indicator {\n  color: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-danger-default);\n  background: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=danger]:focus > ._indicator_rect {\n  border-color: var(--theme-danger-dark);\n}\nsd-checkbox[data-sd-theme=white] > ._indicator_rect {\n  background: var(--control-color);\n  border-color: var(--text-trans-lightest);\n}\nsd-checkbox[data-sd-theme=white][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-primary-default);\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=white]:focus > ._indicator_rect {\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect {\n  border-radius: 100%;\n  padding: var(--gap-xs);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect > ._indicator {\n  border-radius: 100%;\n  width: 100%;\n  height: 100%;\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-radio=true][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-secondary-lightest);\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-size=sm] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2 + 2px);\n  padding: var(--gap-xs) var(--gap-sm);\n  gap: var(--gap-xs);\n}\n@supports not (appearance: auto) {\n  sd-checkbox[data-sd-size=sm] {\n    gap: 0;\n  }\n  sd-checkbox[data-sd-size=sm] > * + * {\n    margin-left: var(--gap-xs);\n  }\n}\nsd-checkbox[data-sd-size=lg] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2 + 2px);\n  padding: var(--gap-default) var(--gap-lg);\n  gap: var(--gap-default);\n}\n@supports not (appearance: auto) {\n  sd-checkbox[data-sd-size=lg] {\n    gap: 0;\n  }\n  sd-checkbox[data-sd-size=lg] > * + * {\n    margin-left: var(--gap-default);\n  }\n}\nsd-checkbox[data-sd-inset=true] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2);\n  border: none;\n  justify-content: center;\n  text-align: center;\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=sm] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2);\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=lg] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-checkbox[data-sd-inline=true] {\n  display: inline-block;\n  vertical-align: top;\n  padding: 0;\n  border: none;\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit));\n  width: auto;\n}\nsd-checkbox[data-sd-disabled=true] {\n  opacity: 0.3;\n  pointer-events: none;\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [NgIcon], styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-checkbox {\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  color: inherit;\n  cursor: pointer;\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2 + 2px);\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-checkbox {\n    gap: 0;\n  }\n  sd-checkbox > * + * {\n    margin-left: var(--gap-sm);\n  }\n}\nsd-checkbox > ._indicator_rect {\n  display: inline-block;\n  vertical-align: -0.125em;\n  user-select: none;\n  width: calc(var(--font-size-default) + 2px);\n  height: calc(var(--font-size-default) + 2px);\n  border: 1px solid var(--border-color-light);\n  background: var(--theme-secondary-lightest);\n}\nsd-checkbox > ._indicator_rect > ._indicator {\n  margin: -1px -2px;\n  text-align: center;\n  opacity: 0;\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox > ._indicator_rect > ._indicator > ng-icon > svg {\n  vertical-align: top;\n  stroke-width: 2.5px !important;\n}\nsd-checkbox ._contents {\n  display: inline-block;\n  vertical-align: top;\n  padding-left: var(--gap-sm);\n}\nsd-checkbox > ._indicator_rect + ._contents:empty {\n  display: none;\n}\nsd-checkbox:focus > ._indicator_rect {\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-primary-default);\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect > ._indicator {\n  opacity: 1;\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect {\n  background: var(--theme-gray-lightest);\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect > ._indicator {\n  color: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-gray-default);\n  background: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=gray]:focus > ._indicator_rect {\n  border-color: var(--theme-gray-dark);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect {\n  background: var(--theme-blue-gray-lightest);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect > ._indicator {\n  color: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-blue-gray-default);\n  background: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=blue-gray]:focus > ._indicator_rect {\n  border-color: var(--theme-blue-gray-dark);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect {\n  background: var(--theme-primary-lightest);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect > ._indicator {\n  color: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-primary-default);\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=primary]:focus > ._indicator_rect {\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect {\n  background: var(--theme-secondary-lightest);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect > ._indicator {\n  color: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-secondary-default);\n  background: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=secondary]:focus > ._indicator_rect {\n  border-color: var(--theme-secondary-dark);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect {\n  background: var(--theme-info-lightest);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect > ._indicator {\n  color: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-info-default);\n  background: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=info]:focus > ._indicator_rect {\n  border-color: var(--theme-info-dark);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect {\n  background: var(--theme-success-lightest);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect > ._indicator {\n  color: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-success-default);\n  background: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=success]:focus > ._indicator_rect {\n  border-color: var(--theme-success-dark);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect {\n  background: var(--theme-warning-lightest);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect > ._indicator {\n  color: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-warning-default);\n  background: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=warning]:focus > ._indicator_rect {\n  border-color: var(--theme-warning-dark);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect {\n  background: var(--theme-danger-lightest);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect > ._indicator {\n  color: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-danger-default);\n  background: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=danger]:focus > ._indicator_rect {\n  border-color: var(--theme-danger-dark);\n}\nsd-checkbox[data-sd-theme=white] > ._indicator_rect {\n  background: var(--control-color);\n  border-color: var(--text-trans-lightest);\n}\nsd-checkbox[data-sd-theme=white][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-primary-default);\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=white]:focus > ._indicator_rect {\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect {\n  border-radius: 100%;\n  padding: var(--gap-xs);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect > ._indicator {\n  border-radius: 100%;\n  width: 100%;\n  height: 100%;\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-radio=true][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-secondary-lightest);\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-size=sm] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2 + 2px);\n  padding: var(--gap-xs) var(--gap-sm);\n  gap: var(--gap-xs);\n}\n@supports not (appearance: auto) {\n  sd-checkbox[data-sd-size=sm] {\n    gap: 0;\n  }\n  sd-checkbox[data-sd-size=sm] > * + * {\n    margin-left: var(--gap-xs);\n  }\n}\nsd-checkbox[data-sd-size=lg] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2 + 2px);\n  padding: var(--gap-default) var(--gap-lg);\n  gap: var(--gap-default);\n}\n@supports not (appearance: auto) {\n  sd-checkbox[data-sd-size=lg] {\n    gap: 0;\n  }\n  sd-checkbox[data-sd-size=lg] > * + * {\n    margin-left: var(--gap-default);\n  }\n}\nsd-checkbox[data-sd-inset=true] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2);\n  border: none;\n  justify-content: center;\n  text-align: center;\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=sm] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2);\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=lg] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-checkbox[data-sd-inline=true] {\n  display: inline-block;\n  vertical-align: top;\n  padding: 0;\n  border: none;\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit));\n  width: auto;\n}\nsd-checkbox[data-sd-disabled=true] {\n  opacity: 0.3;\n  pointer-events: none;\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCheckbox, [{
         type: Component,
@@ -101,6 +101,6 @@ export class SdCheckbox {
                     "[attr.tabindex]": "'0'",
                     "(click)": "onClick($event)",
                     "(keydown)": "onKeydown($event)",
-                }, styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-checkbox {\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  color: inherit;\n  cursor: pointer;\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2 + 2px);\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-checkbox {\n    gap: 0;\n  }\n  sd-checkbox > * + * {\n    margin-left: var(--gap-sm);\n  }\n}\nsd-checkbox > ._indicator_rect {\n  display: inline-block;\n  vertical-align: -0.125em;\n  user-select: none;\n  width: calc(var(--font-size-default) + 2px);\n  height: calc(var(--font-size-default) + 2px);\n  border: 1px solid var(--border-color-light);\n  background: var(--theme-secondary-lightest);\n}\nsd-checkbox > ._indicator_rect > ._indicator {\n  margin: -1px -2px;\n  text-align: center;\n  opacity: 0;\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox > ._indicator_rect > ._indicator > ng-icon > svg {\n  vertical-align: top;\n  stroke-width: 2.5px !important;\n}\nsd-checkbox ._contents {\n  display: inline-block;\n  vertical-align: top;\n  padding-left: var(--gap-sm);\n}\nsd-checkbox > ._indicator_rect + ._contents:empty {\n  display: none;\n}\nsd-checkbox:focus > ._indicator_rect {\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect > ._indicator {\n  opacity: 1;\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect {\n  background: var(--theme-gray-lightest);\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect > ._indicator {\n  color: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-gray-default);\n  background: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=gray]:focus > ._indicator_rect {\n  border-color: var(--theme-gray-dark);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect {\n  background: var(--theme-blue-gray-lightest);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect > ._indicator {\n  color: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-blue-gray-default);\n  background: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=blue-gray]:focus > ._indicator_rect {\n  border-color: var(--theme-blue-gray-dark);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect {\n  background: var(--theme-primary-lightest);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect > ._indicator {\n  color: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-primary-default);\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=primary]:focus > ._indicator_rect {\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect {\n  background: var(--theme-secondary-lightest);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect > ._indicator {\n  color: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-secondary-default);\n  background: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=secondary]:focus > ._indicator_rect {\n  border-color: var(--theme-secondary-dark);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect {\n  background: var(--theme-info-lightest);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect > ._indicator {\n  color: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-info-default);\n  background: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=info]:focus > ._indicator_rect {\n  border-color: var(--theme-info-dark);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect {\n  background: var(--theme-success-lightest);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect > ._indicator {\n  color: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-success-default);\n  background: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=success]:focus > ._indicator_rect {\n  border-color: var(--theme-success-dark);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect {\n  background: var(--theme-warning-lightest);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect > ._indicator {\n  color: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-warning-default);\n  background: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=warning]:focus > ._indicator_rect {\n  border-color: var(--theme-warning-dark);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect {\n  background: var(--theme-danger-lightest);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect > ._indicator {\n  color: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-danger-default);\n  background: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=danger]:focus > ._indicator_rect {\n  border-color: var(--theme-danger-dark);\n}\nsd-checkbox[data-sd-theme=white] > ._indicator_rect {\n  background: var(--control-color);\n  border-color: var(--text-trans-lightest);\n}\nsd-checkbox[data-sd-theme=white][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-primary-default);\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=white]:focus > ._indicator_rect {\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect {\n  border-radius: 100%;\n  padding: var(--gap-xs);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect > ._indicator {\n  border-radius: 100%;\n  width: 100%;\n  height: 100%;\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-radio=true][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-secondary-lightest);\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-size=sm] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2 + 2px);\n  padding: var(--gap-xs) var(--gap-sm);\n  gap: var(--gap-xs);\n}\n@supports not (appearance: auto) {\n  sd-checkbox[data-sd-size=sm] {\n    gap: 0;\n  }\n  sd-checkbox[data-sd-size=sm] > * + * {\n    margin-left: var(--gap-xs);\n  }\n}\nsd-checkbox[data-sd-size=lg] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2 + 2px);\n  padding: var(--gap-default) var(--gap-lg);\n  gap: var(--gap-default);\n}\n@supports not (appearance: auto) {\n  sd-checkbox[data-sd-size=lg] {\n    gap: 0;\n  }\n  sd-checkbox[data-sd-size=lg] > * + * {\n    margin-left: var(--gap-default);\n  }\n}\nsd-checkbox[data-sd-inset=true] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2);\n  border: none;\n  justify-content: center;\n  text-align: center;\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=sm] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2);\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=lg] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-checkbox[data-sd-inline=true] {\n  display: inline-block;\n  vertical-align: top;\n  padding: 0;\n  border: none;\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit));\n  width: auto;\n}\nsd-checkbox[data-sd-disabled=true] {\n  opacity: 0.3;\n  pointer-events: none;\n}"] }]
+                }, styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-checkbox {\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  color: inherit;\n  cursor: pointer;\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2 + 2px);\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-checkbox {\n    gap: 0;\n  }\n  sd-checkbox > * + * {\n    margin-left: var(--gap-sm);\n  }\n}\nsd-checkbox > ._indicator_rect {\n  display: inline-block;\n  vertical-align: -0.125em;\n  user-select: none;\n  width: calc(var(--font-size-default) + 2px);\n  height: calc(var(--font-size-default) + 2px);\n  border: 1px solid var(--border-color-light);\n  background: var(--theme-secondary-lightest);\n}\nsd-checkbox > ._indicator_rect > ._indicator {\n  margin: -1px -2px;\n  text-align: center;\n  opacity: 0;\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox > ._indicator_rect > ._indicator > ng-icon > svg {\n  vertical-align: top;\n  stroke-width: 2.5px !important;\n}\nsd-checkbox ._contents {\n  display: inline-block;\n  vertical-align: top;\n  padding-left: var(--gap-sm);\n}\nsd-checkbox > ._indicator_rect + ._contents:empty {\n  display: none;\n}\nsd-checkbox:focus > ._indicator_rect {\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-primary-default);\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect > ._indicator {\n  opacity: 1;\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect {\n  background: var(--theme-gray-lightest);\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect > ._indicator {\n  color: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-gray-default);\n  background: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=gray]:focus > ._indicator_rect {\n  border-color: var(--theme-gray-dark);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect {\n  background: var(--theme-blue-gray-lightest);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect > ._indicator {\n  color: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-blue-gray-default);\n  background: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=blue-gray]:focus > ._indicator_rect {\n  border-color: var(--theme-blue-gray-dark);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect {\n  background: var(--theme-primary-lightest);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect > ._indicator {\n  color: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-primary-default);\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=primary]:focus > ._indicator_rect {\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect {\n  background: var(--theme-secondary-lightest);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect > ._indicator {\n  color: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-secondary-default);\n  background: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=secondary]:focus > ._indicator_rect {\n  border-color: var(--theme-secondary-dark);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect {\n  background: var(--theme-info-lightest);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect > ._indicator {\n  color: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-info-default);\n  background: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=info]:focus > ._indicator_rect {\n  border-color: var(--theme-info-dark);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect {\n  background: var(--theme-success-lightest);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect > ._indicator {\n  color: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-success-default);\n  background: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=success]:focus > ._indicator_rect {\n  border-color: var(--theme-success-dark);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect {\n  background: var(--theme-warning-lightest);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect > ._indicator {\n  color: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-warning-default);\n  background: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=warning]:focus > ._indicator_rect {\n  border-color: var(--theme-warning-dark);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect {\n  background: var(--theme-danger-lightest);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect > ._indicator {\n  color: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-danger-default);\n  background: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect > ._indicator {\n  color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=danger]:focus > ._indicator_rect {\n  border-color: var(--theme-danger-dark);\n}\nsd-checkbox[data-sd-theme=white] > ._indicator_rect {\n  background: var(--control-color);\n  border-color: var(--text-trans-lightest);\n}\nsd-checkbox[data-sd-theme=white][data-sd-checked=true] > ._indicator_rect {\n  border-color: var(--theme-primary-default);\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=white]:focus > ._indicator_rect {\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect {\n  border-radius: 100%;\n  padding: var(--gap-xs);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect > ._indicator {\n  border-radius: 100%;\n  width: 100%;\n  height: 100%;\n  background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-radio=true][data-sd-checked=true] > ._indicator_rect {\n  background: var(--theme-secondary-lightest);\n  border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-size=sm] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2 + 2px);\n  padding: var(--gap-xs) var(--gap-sm);\n  gap: var(--gap-xs);\n}\n@supports not (appearance: auto) {\n  sd-checkbox[data-sd-size=sm] {\n    gap: 0;\n  }\n  sd-checkbox[data-sd-size=sm] > * + * {\n    margin-left: var(--gap-xs);\n  }\n}\nsd-checkbox[data-sd-size=lg] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2 + 2px);\n  padding: var(--gap-default) var(--gap-lg);\n  gap: var(--gap-default);\n}\n@supports not (appearance: auto) {\n  sd-checkbox[data-sd-size=lg] {\n    gap: 0;\n  }\n  sd-checkbox[data-sd-size=lg] > * + * {\n    margin-left: var(--gap-default);\n  }\n}\nsd-checkbox[data-sd-inset=true] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2);\n  border: none;\n  justify-content: center;\n  text-align: center;\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=sm] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2);\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=lg] {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-checkbox[data-sd-inline=true] {\n  display: inline-block;\n  vertical-align: top;\n  padding: 0;\n  border: none;\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit));\n  width: auto;\n}\nsd-checkbox[data-sd-disabled=true] {\n  opacity: 0.3;\n  pointer-events: none;\n}"] }]
     }], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], canChangeFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "canChangeFn", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], radio: [{ type: i0.Input, args: [{ isSignal: true, alias: "radio", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdCheckbox, { className: "SdCheckbox", filePath: "packages/angular/src/controls/checkbox/sd-checkbox.ts", lineNumber: 257 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdCheckbox, { className: "SdCheckbox", filePath: "packages/angular/src/controls/checkbox/sd-checkbox.ts", lineNumber: 258 }); })();

package/dist/features/editor/sd-markdown-editor.d.ts

@@ -0,0 +1,28 @@
+import { type WritableSignal } from "@angular/core";
+import { Editor } from "@tiptap/core";
+import * as i0 from "@angular/core";
+export declare class SdMarkdownEditor {
+    value: import("@angular/core").ModelSignal<string | undefined>;
+    disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    placeholder: import("@angular/core").InputSignal<string | undefined>;
+    validatorFn: import("@angular/core").InputSignal<((value: string | undefined) => string | undefined) | undefined>;
+    private readonly _elRef;
+    private readonly _destroyRef;
+    /** @internal -- TipTap Editor 인스턴스. 테스트 및 고급 사용자용 */
+    editor: WritableSignal<Editor | undefined>;
+    private readonly _toolbar;
+    activeStates: WritableSignal<import("./useTiptapToolbar").TiptapActiveStates>;
+    private _lastEditorMarkdown;
+    private _lastExtensions;
+    private readonly _resolvedExtensions;
+    constructor();
+    execCmd(cmd: string): void;
+    private _createEditor;
+    private _destroyEditor;
+    private _getEditorMarkdownFrom;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdMarkdownEditor, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdMarkdownEditor, "sd-markdown-editor", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "validatorFn": { "alias": "validatorFn"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=sd-markdown-editor.d.ts.map

package/dist/features/editor/sd-markdown-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-markdown-editor.d.ts","sourceRoot":"","sources":["../../../src/features/editor/sd-markdown-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAcL,KAAK,cAAc,EACpB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,MAAM,EAAqB,MAAM,cAAc,CAAC;;AAWzD,qBA6Ha,gBAAgB;IAC3B,KAAK,0DAAmB;IACxB,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IACzD,WAAW,0DAAmB;IAC9B,WAAW,+CAAiB,MAAM,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,eAAI;IAEzE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA+C;IACtE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsB;IAElD,qDAAqD;IACrD,MAAM,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAqB;IAE/D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA6C;IACtE,YAAY,kEAA8B;IAE1C,OAAO,CAAC,mBAAmB,CAAqB;IAChD,OAAO,CAAC,eAAe,CAA6B;IAEpD,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAMjC;;IA2DH,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK1B,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,sBAAsB;yCAxHnB,gBAAgB;2CAAhB,gBAAgB;CA4H5B"}

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

@@ -0,0 +1,250 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, DestroyRef, effect, ElementRef, inject, input, model, signal, untracked, ViewEncapsulation, } from "@angular/core";
+import { setupInvalid } from "../../core/validation/setupInvalid";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import { Markdown } from "@tiptap/markdown";
+import { useTiptapToolbar } from "./useTiptapToolbar";
+import * as i0 from "@angular/core";
+function SdMarkdownEditor_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 2)(2, "button", 3);
+    i0.ɵɵdomListener("click", function SdMarkdownEditor_Conditional_0_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("h1")); });
+    i0.ɵɵtext(3, "H1");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(4, "button", 4);
+    i0.ɵɵdomListener("click", function SdMarkdownEditor_Conditional_0_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("h2")); });
+    i0.ɵɵtext(5, "H2");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(6, "div", 2)(7, "button", 5);
+    i0.ɵɵdomListener("click", function SdMarkdownEditor_Conditional_0_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("bold")); });
+    i0.ɵɵtext(8, "B");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(9, "button", 6);
+    i0.ɵɵdomListener("click", function SdMarkdownEditor_Conditional_0_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("italic")); });
+    i0.ɵɵtext(10, "I");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(11, "button", 7);
+    i0.ɵɵdomListener("click", function SdMarkdownEditor_Conditional_0_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("strike")); });
+    i0.ɵɵtext(12, "S");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(13, "div", 2)(14, "button", 8);
+    i0.ɵɵdomListener("click", function SdMarkdownEditor_Conditional_0_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("bulletList")); });
+    i0.ɵɵtext(15, "UL");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(16, "button", 9);
+    i0.ɵɵdomListener("click", function SdMarkdownEditor_Conditional_0_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("orderedList")); });
+    i0.ɵɵtext(17, "OL");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(18, "button", 10);
+    i0.ɵɵdomListener("click", function SdMarkdownEditor_Conditional_0_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("indent")); });
+    i0.ɵɵtext(19, "\u2192");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(20, "button", 11);
+    i0.ɵɵdomListener("click", function SdMarkdownEditor_Conditional_0_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("outdent")); });
+    i0.ɵɵtext(21, "\u2190");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(22, "div", 2)(23, "button", 12);
+    i0.ɵɵdomListener("click", function SdMarkdownEditor_Conditional_0_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("blockquote")); });
+    i0.ɵɵtext(24, "\u275D");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(25, "button", 13);
+    i0.ɵɵdomListener("click", function SdMarkdownEditor_Conditional_0_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("codeBlock")); });
+    i0.ɵɵtext(26, "</>");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(27, "div", 2)(28, "button", 14);
+    i0.ɵɵdomListener("click", function SdMarkdownEditor_Conditional_0_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("clean")); });
+    i0.ɵɵtext(29, "Tx");
+    i0.ɵɵdomElementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().h1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().h2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().bold);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().italic);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().strike);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().bulletList);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().orderedList);
+    i0.ɵɵadvance(7);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().blockquote);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates().codeBlock);
+} }
+const DEFAULT_EXTENSIONS = [
+    StarterKit,
+    Markdown,
+];
+export class SdMarkdownEditor {
+    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    validatorFn = input(...(ngDevMode ? [undefined, { debugName: "validatorFn" }] : /* istanbul ignore next */ []));
+    _elRef = inject(ElementRef);
+    _destroyRef = inject(DestroyRef);
+    /** @internal -- TipTap Editor 인스턴스. 테스트 및 고급 사용자용 */
+    editor = signal(undefined, ...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
+    _toolbar = useTiptapToolbar({ editor: this.editor });
+    activeStates = this._toolbar.activeStates;
+    _lastEditorMarkdown;
+    _lastExtensions;
+    _resolvedExtensions = computed(() => {
+        const ph = this.placeholder();
+        if (ph != null) {
+            return [...DEFAULT_EXTENSIONS, Placeholder.configure({ placeholder: ph })];
+        }
+        return DEFAULT_EXTENSIONS;
+    }, ...(ngDevMode ? [{ debugName: "_resolvedExtensions" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const extensions = this._resolvedExtensions();
+            const value = this.value();
+            const val = value === "" ? undefined : value;
+            if (value === "") {
+                untracked(() => this.value.set(undefined));
+            }
+            if (this._lastExtensions !== extensions) {
+                this._lastExtensions = extensions;
+                this._destroyEditor();
+                this._createEditor(extensions, val);
+                return;
+            }
+            if (val === this._lastEditorMarkdown)
+                return;
+            const currentEditor = untracked(() => this.editor());
+            if (currentEditor == null)
+                return;
+            const currentMarkdown = this._getEditorMarkdownFrom(currentEditor);
+            if (currentMarkdown === val)
+                return;
+            currentEditor.commands.setContent(val ?? "", { contentType: "markdown", emitUpdate: false });
+            this._lastEditorMarkdown = undefined;
+        });
+        effect(() => {
+            const ed = this.editor();
+            if (ed == null)
+                return;
+            const editable = !this.disabled() && !this.readonly();
+            ed.setEditable(editable);
+        });
+        setupInvalid(() => {
+            const errorMessages = [];
+            if (this.value() == null) {
+                if (this.required()) {
+                    errorMessages.push("값을 입력하세요.");
+                }
+            }
+            const validatorFn = this.validatorFn();
+            if (validatorFn != null) {
+                const message = validatorFn(this.value());
+                if (message != null) {
+                    errorMessages.push(message);
+                }
+            }
+            return errorMessages.join("\r\n");
+        });
+        this._destroyRef.onDestroy(() => {
+            this._destroyEditor();
+        });
+    }
+    execCmd(cmd) {
+        if (this.disabled() || this.readonly())
+            return;
+        this._toolbar.execCmd(cmd);
+    }
+    _createEditor(extensions, initialContent) {
+        const container = this._elRef.nativeElement.querySelector("._editor-container");
+        if (container == null)
+            return;
+        this.editor.set(new Editor({
+            element: container,
+            extensions,
+            content: initialContent ?? "",
+            contentType: "markdown",
+            editable: untracked(() => !this.disabled() && !this.readonly()),
+            onUpdate: ({ editor }) => {
+                const markdown = this._getEditorMarkdownFrom(editor);
+                this._lastEditorMarkdown = markdown;
+                this.value.set(markdown);
+            },
+            onTransaction: () => {
+                this._toolbar.refreshActiveStates();
+            },
+        }));
+    }
+    _destroyEditor() {
+        const ed = untracked(() => this.editor());
+        if (ed != null) {
+            ed.destroy();
+            this.editor.set(undefined);
+        }
+        this._lastEditorMarkdown = undefined;
+    }
+    _getEditorMarkdownFrom(editor) {
+        if (editor.isEmpty)
+            return undefined;
+        return editor.getMarkdown();
+    }
+    static ɵfac = function SdMarkdownEditor_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdMarkdownEditor)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdMarkdownEditor, selectors: [["sd-markdown-editor"]], hostVars: 2, hostBindings: function SdMarkdownEditor_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-sd-disabled", ctx.disabled())("data-sd-readonly", ctx.readonly());
+        } }, inputs: { value: [1, "value"], disabled: [1, "disabled"], readonly: [1, "readonly"], required: [1, "required"], placeholder: [1, "placeholder"], validatorFn: [1, "validatorFn"] }, outputs: { value: "valueChange" }, decls: 2, vars: 1, consts: [[1, "_toolbar"], [1, "_editor-container"], [1, "_btn-group"], ["type", "button", "data-cmd", "h1", 3, "click"], ["type", "button", "data-cmd", "h2", 3, "click"], ["type", "button", "data-cmd", "bold", 3, "click"], ["type", "button", "data-cmd", "italic", 3, "click"], ["type", "button", "data-cmd", "strike", 3, "click"], ["type", "button", "data-cmd", "bulletList", 3, "click"], ["type", "button", "data-cmd", "orderedList", 3, "click"], ["type", "button", "data-cmd", "indent", 3, "click"], ["type", "button", "data-cmd", "outdent", 3, "click"], ["type", "button", "data-cmd", "blockquote", 3, "click"], ["type", "button", "data-cmd", "codeBlock", 3, "click"], ["type", "button", "data-cmd", "clean", 3, "click"]], template: function SdMarkdownEditor_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, SdMarkdownEditor_Conditional_0_Template, 30, 18, "div", 0);
+            i0.ɵɵdomElement(1, "div", 1);
+        } if (rf & 2) {
+            i0.ɵɵconditional(!ctx.disabled() && !ctx.readonly() ? 0 : -1);
+        } }, styles: ["sd-markdown-editor {\n  display: block;\n  position: relative;\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-markdown-editor > ._toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gap-xs);\n  padding: var(--gap-xs);\n  border-bottom: 1px solid var(--trans-lighter);\n}\nsd-markdown-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button {\n  padding: var(--gap-xs) var(--gap-sm);\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: transparent;\n  cursor: pointer;\n  font-size: var(--font-size-default);\n  line-height: 1;\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button._active {\n  background: var(--theme-primary-default);\n  color: var(--text-trans-rev-default);\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button:hover {\n  background: var(--trans-lighter);\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button._active:hover {\n  background: var(--theme-primary-default);\n}\nsd-markdown-editor > ._editor-container {\n  padding: var(--gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--font-family-field);\n}\nsd-markdown-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-markdown-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-markdown-editor[data-sd-disabled=true] {\n  background: var(--theme-gray-lightest);\n  color: var(--text-trans-light);\n}\nsd-markdown-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-markdown-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\n}"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdMarkdownEditor, [{
+        type: Component,
+        args: [{ selector: "sd-markdown-editor", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: `
+    @if (!disabled() && !readonly()) {
+      <div class="_toolbar">
+        <div class="_btn-group">
+          <button type="button" data-cmd="h1" [class._active]="activeStates().h1"
+                  (click)="execCmd('h1')">H1</button>
+          <button type="button" data-cmd="h2" [class._active]="activeStates().h2"
+                  (click)="execCmd('h2')">H2</button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="bold" [class._active]="activeStates().bold"
+                  (click)="execCmd('bold')">B</button>
+          <button type="button" data-cmd="italic" [class._active]="activeStates().italic"
+                  (click)="execCmd('italic')">I</button>
+          <button type="button" data-cmd="strike" [class._active]="activeStates().strike"
+                  (click)="execCmd('strike')">S</button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="bulletList" [class._active]="activeStates().bulletList"
+                  (click)="execCmd('bulletList')">UL</button>
+          <button type="button" data-cmd="orderedList" [class._active]="activeStates().orderedList"
+                  (click)="execCmd('orderedList')">OL</button>
+          <button type="button" data-cmd="indent" (click)="execCmd('indent')">→</button>
+          <button type="button" data-cmd="outdent" (click)="execCmd('outdent')">←</button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="blockquote" [class._active]="activeStates().blockquote"
+                  (click)="execCmd('blockquote')">❝</button>
+          <button type="button" data-cmd="codeBlock" [class._active]="activeStates().codeBlock"
+                  (click)="execCmd('codeBlock')">&lt;/&gt;</button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="clean" (click)="execCmd('clean')">Tx</button>
+        </div>
+      </div>
+    }
+    <div class="_editor-container"></div>
+  `, host: {
+                    "[attr.data-sd-disabled]": "disabled()",
+                    "[attr.data-sd-readonly]": "readonly()",
+                }, styles: ["sd-markdown-editor {\n  display: block;\n  position: relative;\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-markdown-editor > ._toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gap-xs);\n  padding: var(--gap-xs);\n  border-bottom: 1px solid var(--trans-lighter);\n}\nsd-markdown-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button {\n  padding: var(--gap-xs) var(--gap-sm);\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: transparent;\n  cursor: pointer;\n  font-size: var(--font-size-default);\n  line-height: 1;\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button._active {\n  background: var(--theme-primary-default);\n  color: var(--text-trans-rev-default);\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button:hover {\n  background: var(--trans-lighter);\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button._active:hover {\n  background: var(--theme-primary-default);\n}\nsd-markdown-editor > ._editor-container {\n  padding: var(--gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--font-family-field);\n}\nsd-markdown-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-markdown-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-markdown-editor[data-sd-disabled=true] {\n  background: var(--theme-gray-lightest);\n  color: var(--text-trans-light);\n}\nsd-markdown-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-markdown-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\n}"] }]
+    }], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], 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 }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], validatorFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "validatorFn", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdMarkdownEditor, { className: "SdMarkdownEditor", filePath: "packages/angular/src/features/editor/sd-markdown-editor.ts", lineNumber: 154 }); })();

package/dist/index.d.ts

@@ -111,6 +111,7 @@ export { SdThemeProvider } from "./features/theme/sd-theme-provider";
 export { SdThemeSelector } from "./features/theme/sd-theme-selector";
 export { SdAddressSearchModal, type Address, } from "./features/address/sd-address-search.modal";
 export { SdTiptapEditor } from "./features/editor/sd-tiptap-editor";
+export { SdMarkdownEditor } from "./features/editor/sd-markdown-editor";
 export { SdLabel } from "./features/visual/sd-label";
 export { SdNote } from "./features/visual/sd-note";
 export { SdProgress } from "./features/visual/sd-progress";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -148,6 +148,7 @@ export { SdThemeSelector } from "./features/theme/sd-theme-selector";
 export { SdAddressSearchModal, } from "./features/address/sd-address-search.modal";
 // features/editor
 export { SdTiptapEditor } from "./features/editor/sd-tiptap-editor";
+export { SdMarkdownEditor } from "./features/editor/sd-markdown-editor";
 // features/visual
 export { SdLabel } from "./features/visual/sd-label";
 export { SdNote } from "./features/visual/sd-note";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/angular",
-  "version": "14.0.102",
+  "version": "14.1.2",
   "description": "심플리즘 패키지 - Angular",
   "author": "심플리즘",
   "license": "Apache-2.0",
@@ -31,30 +31,31 @@
     "@angular/platform-browser": "^21.2.17",
     "@angular/router": "^21.2.17",
     "@angular/service-worker": "^21.2.17",
-    "@ng-icons/core": "^33.2.4",
-    "@ng-icons/tabler-icons": "^33.2.4",
-    "@tiptap/core": "^3.26.1",
-    "@tiptap/extension-color": "^3.26.1",
-    "@tiptap/extension-document": "^3.26.1",
-    "@tiptap/extension-highlight": "^3.26.1",
-    "@tiptap/extension-image": "^3.26.1",
-    "@tiptap/extension-paragraph": "^3.26.1",
-    "@tiptap/extension-placeholder": "^3.26.1",
-    "@tiptap/extension-text": "^3.26.1",
-    "@tiptap/extension-text-align": "^3.26.1",
-    "@tiptap/extension-text-style": "^3.26.1",
-    "@tiptap/extension-underline": "^3.26.1",
-    "@tiptap/starter-kit": "^3.26.1",
+    "@ng-icons/core": "^33.3.0",
+    "@ng-icons/tabler-icons": "^33.3.0",
+    "@tiptap/core": "^3.27.1",
+    "@tiptap/extension-color": "^3.27.1",
+    "@tiptap/extension-document": "^3.27.1",
+    "@tiptap/extension-highlight": "^3.27.1",
+    "@tiptap/extension-image": "^3.27.1",
+    "@tiptap/extension-paragraph": "^3.27.1",
+    "@tiptap/extension-placeholder": "^3.27.1",
+    "@tiptap/extension-text": "^3.27.1",
+    "@tiptap/extension-text-align": "^3.27.1",
+    "@tiptap/extension-text-style": "^3.27.1",
+    "@tiptap/extension-underline": "^3.27.1",
+    "@tiptap/markdown": "^3.27.1",
+    "@tiptap/starter-kit": "^3.27.1",
     "bwip-js": "^4.11.1",
     "echarts": "^6.1.0",
     "html-to-image": "^1.11.13",
     "jspdf": "^4.2.1",
     "rxjs": "^7.8.2",
-    "tabbable": "^6.4.0",
-    "@simplysm/core-common": "14.0.102",
-    "@simplysm/core-browser": "14.0.102",
-    "@simplysm/service-client": "14.0.102",
-    "@simplysm/service-common": "14.0.102"
+    "tabbable": "^6.5.0",
+    "@simplysm/core-browser": "14.1.2",
+    "@simplysm/service-client": "14.1.2",
+    "@simplysm/service-common": "14.1.2",
+    "@simplysm/core-common": "14.1.2"
   },
   "devDependencies": {
     "@angular/compiler": "^21.2.17",

package/scss/themes/_blueprint-surfaces.scss

@@ -41,34 +41,6 @@ body.sd-theme-blueprint,
   }
 }
 
-.sd-theme-blueprint sd-permission-table table > * > tr > * {
-  border-bottom: 1px solid var(--border-color-lighter);
-}
-
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme="first"] > *._before,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme="first"] > *._title,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme="first"] > *._after {
-  background: var(--trans-lighter);
-  border-top: 1px solid var(--border-color-default);
-  border-bottom: 1px solid var(--border-color-default);
-  color: var(--text-trans-default);
-  font-weight: 700;
-
-  > * {
-    color: var(--text-trans-default) !important;
-  }
-}
-
-// 하위 depth 틴트(info/warning/success lightest) 제거 → 무지, 행 헤어라인으로만 구분
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme="info"] > *._title,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme="info"] > *._after,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme="warning"] > *._title,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme="warning"] > *._after,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme="success"] > *._title,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme="success"] > *._after {
-  background: transparent;
-}
-
 .sd-theme-blueprint {
   sd-modal > ._dialog > ._header {
     background: var(--theme-primary-default);
@@ -86,4 +58,30 @@ body.sd-theme-blueprint,
   sd-crud-detail > sd-base-container > sd-busy-container > .bg-control > .main-align-end {
     background: var(--theme-gray-lightest);
   }
+
+  sd-permission-table {
+    > table > * > tr[data-sd-theme="first"] > *._before,
+    > table > * > tr[data-sd-theme="first"] > *._title,
+    > table > * > tr[data-sd-theme="first"] > *._after {
+      border-radius: 0;
+      box-shadow: inset 0 -1px 0 var(--border-color-lighter);
+      background: var(--theme-gray-lighter);
+      font-weight: bold;
+
+      > * {
+        color: var(--text-trans-default) !important;
+      }
+    }
+
+    > table > * > tr[data-sd-theme="info"] > *._title,
+    > table > * > tr[data-sd-theme="info"] > *._after,
+    > table > * > tr[data-sd-theme="warning"] > *._title,
+    > table > * > tr[data-sd-theme="warning"] > *._after,
+    > table > * > tr[data-sd-theme="success"] > *._title,
+    > table > * > tr[data-sd-theme="success"] > *._after {
+      border-radius: 0;
+      box-shadow: inset 0 -1px 0 var(--border-color-lighter);
+      background: var(--theme-gray-lightest);
+    }
+  }
 }

package/scss/themes/_variables-blueprint.scss

@@ -59,9 +59,9 @@ $paper: (
       darkest: colors.get(green, 800)
     ),
     warning: (
-      lightest: colors.get(orange, 50),
-      lighter: colors.get(orange, 100),
-      light: colors.get(orange, 200),
+      lightest: colors.get(orange, 100),
+      lighter: colors.get(orange, 200),
+      light: colors.get(orange, 300),
       default: colors.get(orange, 400),
       dark: colors.get(orange, 600),
       darker: colors.get(orange, 700),

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

@@ -96,6 +96,7 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
 
         &[data-sd-checked="true"] {
           > ._indicator_rect {
+            border-color: var(--theme-primary-default);
             background: var(--theme-primary-default);
 
             > ._indicator {

package/src/features/editor/sd-markdown-editor.ts

@@ -0,0 +1,278 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  model,
+  signal,
+  untracked,
+  ViewEncapsulation,
+  type WritableSignal,
+} from "@angular/core";
+import { setupInvalid } from "../../core/validation/setupInvalid";
+import { Editor, type AnyExtension } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import { Markdown } from "@tiptap/markdown";
+import { useTiptapToolbar } from "./useTiptapToolbar";
+
+const DEFAULT_EXTENSIONS: AnyExtension[] = [
+  StarterKit,
+  Markdown,
+];
+
+@Component({
+  selector: "sd-markdown-editor",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  template: `
+    @if (!disabled() && !readonly()) {
+      <div class="_toolbar">
+        <div class="_btn-group">
+          <button type="button" data-cmd="h1" [class._active]="activeStates().h1"
+                  (click)="execCmd('h1')">H1</button>
+          <button type="button" data-cmd="h2" [class._active]="activeStates().h2"
+                  (click)="execCmd('h2')">H2</button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="bold" [class._active]="activeStates().bold"
+                  (click)="execCmd('bold')">B</button>
+          <button type="button" data-cmd="italic" [class._active]="activeStates().italic"
+                  (click)="execCmd('italic')">I</button>
+          <button type="button" data-cmd="strike" [class._active]="activeStates().strike"
+                  (click)="execCmd('strike')">S</button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="bulletList" [class._active]="activeStates().bulletList"
+                  (click)="execCmd('bulletList')">UL</button>
+          <button type="button" data-cmd="orderedList" [class._active]="activeStates().orderedList"
+                  (click)="execCmd('orderedList')">OL</button>
+          <button type="button" data-cmd="indent" (click)="execCmd('indent')">→</button>
+          <button type="button" data-cmd="outdent" (click)="execCmd('outdent')">←</button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="blockquote" [class._active]="activeStates().blockquote"
+                  (click)="execCmd('blockquote')">❝</button>
+          <button type="button" data-cmd="codeBlock" [class._active]="activeStates().codeBlock"
+                  (click)="execCmd('codeBlock')">&lt;/&gt;</button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="clean" (click)="execCmd('clean')">Tx</button>
+        </div>
+      </div>
+    }
+    <div class="_editor-container"></div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-markdown-editor {
+        display: block;
+        position: relative;
+        border: 1px solid var(--trans-lighter);
+        border-radius: var(--border-radius-default);
+        background: var(--theme-secondary-lightest);
+
+        > ._toolbar {
+          display: flex;
+          flex-wrap: wrap;
+          gap: var(--gap-xs);
+          padding: var(--gap-xs);
+          border-bottom: 1px solid var(--trans-lighter);
+
+          > ._btn-group {
+            display: flex;
+            gap: 1px;
+
+            > button {
+              padding: var(--gap-xs) var(--gap-sm);
+              border: 1px solid var(--trans-lighter);
+              border-radius: var(--border-radius-default);
+              background: transparent;
+              cursor: pointer;
+              font-size: var(--font-size-default);
+              line-height: 1;
+
+              &._active {
+                background: var(--theme-primary-default);
+                color: var(--text-trans-rev-default);
+              }
+
+              &:hover {
+                background: var(--trans-lighter);
+              }
+
+              &._active:hover {
+                background: var(--theme-primary-default);
+              }
+            }
+          }
+        }
+
+        > ._editor-container {
+          padding: var(--gap-sm);
+          min-height: 6.25rem;
+          font-family: var(--font-family-field);
+
+          > .tiptap {
+            outline: none;
+
+            &:focus {
+              outline: none;
+            }
+          }
+        }
+
+        &[data-sd-disabled="true"] {
+          background: var(--theme-gray-lightest);
+          color: var(--text-trans-light);
+
+          > ._editor-container > .tiptap {
+            cursor: not-allowed;
+          }
+        }
+
+        &[data-sd-readonly="true"] {
+          > ._editor-container > .tiptap {
+            cursor: default;
+          }
+        }
+      }
+    `,
+  ],
+  host: {
+    "[attr.data-sd-disabled]": "disabled()",
+    "[attr.data-sd-readonly]": "readonly()",
+  },
+})
+export class SdMarkdownEditor {
+  value = model<string>();
+  disabled = input(false, { transform: booleanAttribute });
+  readonly = input(false, { transform: booleanAttribute });
+  required = input(false, { transform: booleanAttribute });
+  placeholder = input<string>();
+  validatorFn = input<(value: string | undefined) => string | undefined>();
+
+  private readonly _elRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly _destroyRef = inject(DestroyRef);
+
+  /** @internal -- TipTap Editor 인스턴스. 테스트 및 고급 사용자용 */
+  editor: WritableSignal<Editor | undefined> = signal(undefined);
+
+  private readonly _toolbar = useTiptapToolbar({ editor: this.editor });
+  activeStates = this._toolbar.activeStates;
+
+  private _lastEditorMarkdown: string | undefined;
+  private _lastExtensions: AnyExtension[] | undefined;
+
+  private readonly _resolvedExtensions = computed(() => {
+    const ph = this.placeholder();
+    if (ph != null) {
+      return [...DEFAULT_EXTENSIONS, Placeholder.configure({ placeholder: ph })];
+    }
+    return DEFAULT_EXTENSIONS;
+  });
+
+  constructor() {
+    effect(() => {
+      const extensions = this._resolvedExtensions();
+      const value = this.value();
+      const val = value === "" ? undefined : value;
+      if (value === "") {
+        untracked(() => this.value.set(undefined));
+      }
+
+      if (this._lastExtensions !== extensions) {
+        this._lastExtensions = extensions;
+        this._destroyEditor();
+        this._createEditor(extensions, val);
+        return;
+      }
+
+      if (val === this._lastEditorMarkdown) return;
+
+      const currentEditor = untracked(() => this.editor());
+      if (currentEditor == null) return;
+      const currentMarkdown = this._getEditorMarkdownFrom(currentEditor);
+      if (currentMarkdown === val) return;
+      currentEditor.commands.setContent(val ?? "", { contentType: "markdown", emitUpdate: false });
+      this._lastEditorMarkdown = undefined;
+    });
+
+    effect(() => {
+      const ed = this.editor();
+      if (ed == null) return;
+      const editable = !this.disabled() && !this.readonly();
+      ed.setEditable(editable);
+    });
+
+    setupInvalid(() => {
+      const errorMessages: string[] = [];
+      if (this.value() == null) {
+        if (this.required()) {
+          errorMessages.push("값을 입력하세요.");
+        }
+      }
+
+      const validatorFn = this.validatorFn();
+      if (validatorFn != null) {
+        const message = validatorFn(this.value());
+        if (message != null) {
+          errorMessages.push(message);
+        }
+      }
+
+      return errorMessages.join("\r\n");
+    });
+
+    this._destroyRef.onDestroy(() => {
+      this._destroyEditor();
+    });
+  }
+
+  execCmd(cmd: string): void {
+    if (this.disabled() || this.readonly()) return;
+    this._toolbar.execCmd(cmd);
+  }
+
+  private _createEditor(extensions: AnyExtension[], initialContent: string | undefined): void {
+    const container = this._elRef.nativeElement.querySelector("._editor-container");
+    if (container == null) return;
+
+    this.editor.set(new Editor({
+      element: container,
+      extensions,
+      content: initialContent ?? "",
+      contentType: "markdown",
+      editable: untracked(() => !this.disabled() && !this.readonly()),
+      onUpdate: ({ editor }) => {
+        const markdown = this._getEditorMarkdownFrom(editor);
+        this._lastEditorMarkdown = markdown;
+        this.value.set(markdown);
+      },
+      onTransaction: () => {
+        this._toolbar.refreshActiveStates();
+      },
+    }));
+  }
+
+  private _destroyEditor(): void {
+    const ed = untracked(() => this.editor());
+    if (ed != null) {
+      ed.destroy();
+      this.editor.set(undefined);
+    }
+    this._lastEditorMarkdown = undefined;
+  }
+
+  private _getEditorMarkdownFrom(editor: Editor): string | undefined {
+    if (editor.isEmpty) return undefined;
+    return editor.getMarkdown();
+  }
+}

package/src/index.ts

@@ -264,6 +264,7 @@ export {
 
 // features/editor
 export { SdTiptapEditor } from "./features/editor/sd-tiptap-editor";
+export { SdMarkdownEditor } from "./features/editor/sd-markdown-editor";
 
 // features/visual
 export { SdLabel } from "./features/visual/sd-label";

package/styles.css

@@ -534,9 +534,9 @@
     --theme-success-dark: hsl(149.9515480441, 168.4093941383%, 24.2652557495%);
     --theme-success-darker: hsl(150.0005284119, 143.0825359597%, 20.9804319787%);
     --theme-success-darkest: rgb(1.4779812192, 102.3765397158, 48.0900438304);
-    --theme-warning-lightest: hsl(33.3343342232, 102.528234295%, 96.507296985%);
-    --theme-warning-lighter: hsl(34.2903094524, 101.2893750504%, 91.682860556%);
-    --theme-warning-light: hsl(32.1783475455, 100.2607268985%, 82.8640062583%);
+    --theme-warning-lightest: hsl(34.2903094524, 101.2893750504%, 91.682860556%);
+    --theme-warning-lighter: hsl(32.1783475455, 100.2607268985%, 82.8640062583%);
+    --theme-warning-light: hsl(30.9781472306, 103.8794214342%, 71.2539413381%);
     --theme-warning-default: hsl(31.4330872217, 102.5675912326%, 51.3170331393%);
     --theme-warning-dark: hsl(23.8136653657, 138.2924575772%, 40.3162356329%);
     --theme-warning-darker: hsl(20.5064222619, 127.6827158995%, 34.7800557535%);
@@ -3728,34 +3728,6 @@ body.sd-theme-blueprint,
   box-shadow: 5px 5px 0 rgba(28, 62, 156, 0.14);
 }
 
-.sd-theme-blueprint sd-permission-table table > * > tr > * {
-  border-bottom: 1px solid var(--border-color-lighter);
-}
-
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=first] > *._before,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=first] > *._title,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=first] > *._after {
-  background: var(--trans-lighter);
-  border-top: 1px solid var(--border-color-default);
-  border-bottom: 1px solid var(--border-color-default);
-  color: var(--text-trans-default);
-  font-weight: 700;
-}
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=first] > *._before > *,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=first] > *._title > *,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=first] > *._after > * {
-  color: var(--text-trans-default) !important;
-}
-
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=info] > *._title,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=info] > *._after,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=warning] > *._title,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=warning] > *._after,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=success] > *._title,
-.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme=success] > *._after {
-  background: transparent;
-}
-
 .sd-theme-blueprint sd-modal > ._dialog > ._header {
   background: var(--theme-primary-default);
   color: var(--text-trans-rev-default);
@@ -3769,6 +3741,29 @@ body.sd-theme-blueprint,
 .sd-theme-blueprint sd-crud-detail > sd-base-container > sd-busy-container > .bg-control > .main-align-end {
   background: var(--theme-gray-lightest);
 }
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=first] > *._before,
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=first] > *._title,
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=first] > *._after {
+  border-radius: 0;
+  box-shadow: inset 0 -1px 0 var(--border-color-lighter);
+  background: var(--theme-gray-lighter);
+  font-weight: bold;
+}
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=first] > *._before > *,
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=first] > *._title > *,
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=first] > *._after > * {
+  color: var(--text-trans-default) !important;
+}
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=info] > *._title,
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=info] > *._after,
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=warning] > *._title,
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=warning] > *._after,
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=success] > *._title,
+.sd-theme-blueprint sd-permission-table > table > * > tr[data-sd-theme=success] > *._after {
+  border-radius: 0;
+  box-shadow: inset 0 -1px 0 var(--border-color-lighter);
+  background: var(--theme-gray-lightest);
+}
 
 .flex-row {
   display: flex !important;