@simplysm/angular 14.0.100 → 14.0.101

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

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

package/dist/core/directive-input-signals.d.ts

@@ -13,15 +13,6 @@ export type UndefToOptional<T> = {
  * 컴포넌트/디렉티브의 InputSignal 프로퍼티에서 값 타입을 추출하는 유틸리티 타입
  *
  * InputSignal이 아닌 프로퍼티는 제외되며, undefined를 포함하는 필드는 optional로 변환된다.
- *
- * @example
- * ```typescript
- * class MyComponent {
- *   name = input.required<string>();
- *   age = input(0);
- * }
- * // DirectiveInputSignals<MyComponent> = { name: string; age: number }
- * ```
  */
 export type DirectiveInputSignals<T> = UndefToOptional<{
     [P in keyof T as T[P] extends InputSignal<any> ? P : never]: T[P] extends InputSignal<infer V> ? V : never;

package/dist/core/directive-input-signals.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"directive-input-signals.d.ts","sourceRoot":"","sources":["../../src/core/directive-input-signals.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD;;;;GAIG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;KAC9B,CAAC,IAAI,MAAM,CAAC,IAAI,SAAS,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAC3D,GAAG;KACD,CAAC,IAAI,MAAM,CAAC,IAAI,SAAS,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC;CAChF,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI,eAAe,CAAC;KACpD,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,WAAW,CACnF,MAAM,CAAC,CACR,GACG,CAAC,GACD,KAAK;CACV,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"directive-input-signals.d.ts","sourceRoot":"","sources":["../../src/core/directive-input-signals.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD;;;;GAIG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;KAC9B,CAAC,IAAI,MAAM,CAAC,IAAI,SAAS,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAC3D,GAAG;KACD,CAAC,IAAI,MAAM,CAAC,IAAI,SAAS,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC;CAChF,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI,eAAe,CAAC;KACpD,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,WAAW,CACnF,MAAM,CAAC,CACR,GACG,CAAC,GACD,KAAK;CACV,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC"}

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

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

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

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

package/dist/core/provideSdAngular.js

@@ -44,6 +44,18 @@ export function provideSdAngular(opt) {
                     prevDark = dark;
                 }
             });
+            const savedBlueprint = sdLocalStorage.get("sd-theme-blueprint");
+            if (savedBlueprint != null) {
+                sdTheme.blueprint.set(savedBlueprint);
+            }
+            let prevBlueprint = sdTheme.blueprint();
+            effect(() => {
+                const blueprint = sdTheme.blueprint();
+                if (blueprint !== prevBlueprint) {
+                    sdLocalStorage.set("sd-theme-blueprint", blueprint);
+                    prevBlueprint = blueprint;
+                }
+            });
             const savedFontSize = sdLocalStorage.get("sd-theme-font-size");
             if (savedFontSize != null) {
                 sdTheme.fontSize.set(savedFontSize);

package/dist/core/ripple/setupRipple.js

@@ -32,7 +32,7 @@ export function setupRipple(enableFn) {
                 height: size * 2 + "px",
                 top: y - size + "px",
                 left: x - size + "px",
-                transition: "var(--animation-duration) linear",
+                transition: "calc(2 * var(--animation-duration)) linear",
                 transitionProperty: "transform, opacity",
                 transform: "scale(0.1)",
             });

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

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

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

@@ -58,7 +58,7 @@ export class SdToast {
             i0.ɵɵconditional(ctx.message() != undefined ? 2 : 3);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.useProgress() ? 4 : -1);
-        } }, styles: ["sd-toast {\n  display: block;\n  margin-bottom: var(--gap-sm);\n  text-align: center;\n  width: 100%;\n  pointer-events: none;\n}\nsd-toast > ._sd-toast-block {\n  display: inline-block;\n  text-align: left;\n  color: var(--text-trans-rev-default);\n  transform: translateY(-100%);\n  border-radius: var(--border-radius-lg);\n  opacity: 0;\n  box-shadow: 0 calc(12 * var(--elevation-size)) calc(12 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  pointer-events: auto;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-message {\n  padding: var(--gap-default) var(--gap-lg);\n  word-break: break-all;\n  white-space: pre-wrap;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-gray-default);\n  height: 4px;\n  border-radius: var(--border-radius-xl);\n  margin: 0 4px 4px 4px;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  border-radius: var(--border-radius-xl);\n  height: 4px;\n  transition: width 1s ease-out;\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block {\n  background: var(--theme-gray-default);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-gray-darker);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-gray-lighter);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block {\n  background: var(--theme-blue-gray-default);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-blue-gray-darker);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-blue-gray-lighter);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block {\n  background: var(--theme-primary-default);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-primary-darker);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-primary-lighter);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block {\n  background: var(--theme-secondary-default);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-secondary-darker);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-secondary-lighter);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block {\n  background: var(--theme-info-default);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-info-darker);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-info-lighter);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block {\n  background: var(--theme-success-default);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-success-darker);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-success-lighter);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block {\n  background: var(--theme-warning-default);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-warning-darker);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-warning-lighter);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block {\n  background: var(--theme-danger-default);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-danger-darker);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-danger-lighter);\n}\nsd-toast[data-sd-open=true] > ._sd-toast-block {\n  transform: none;\n  transition: var(--animation-duration) ease-out;\n  transition-property: transform, opacity;\n  opacity: 1;\n}\nsd-toast[data-sd-open=false] > ._sd-toast-block {\n  transform: translateY(-100%);\n  transition: var(--animation-duration) ease-in;\n  transition-property: transform, opacity;\n  opacity: 0;\n}\n@media all and (max-width: 520px) {\n  sd-toast > ._sd-toast-block {\n    border-radius: calc(var(--line-height) / 2);\n    transform: translateY(100%);\n  }\n  sd-toast > ._sd-toast-block > ._sd-toast-message {\n    padding: var(--gap-xs) var(--gap-default);\n  }\n  sd-toast[data-sd-open=false] > ._sd-toast-block {\n    transform: translateY(100%);\n  }\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, 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-toast {\n  display: block;\n  margin-bottom: var(--gap-sm);\n  text-align: center;\n  width: 100%;\n  pointer-events: none;\n}\nsd-toast > ._sd-toast-block {\n  display: inline-block;\n  text-align: left;\n  color: var(--text-trans-rev-default);\n  transform: translateY(-100%);\n  border-radius: var(--border-radius-lg);\n  opacity: 0;\n  box-shadow: 0 calc(12 * var(--elevation-size)) calc(12 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n  pointer-events: auto;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-message {\n  padding: var(--gap-default) var(--gap-lg);\n  word-break: break-all;\n  white-space: pre-wrap;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-gray-default);\n  height: 4px;\n  border-radius: var(--border-radius-xl);\n  margin: 0 4px 4px 4px;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  border-radius: var(--border-radius-xl);\n  height: 4px;\n  transition: width 1s ease-out;\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block {\n  background: var(--theme-gray-default);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-gray-darker);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-gray-lighter);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block {\n  background: var(--theme-blue-gray-default);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-blue-gray-darker);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-blue-gray-lighter);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block {\n  background: var(--theme-primary-default);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-primary-darker);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-primary-lighter);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block {\n  background: var(--theme-secondary-default);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-secondary-darker);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-secondary-lighter);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block {\n  background: var(--theme-info-default);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-info-darker);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-info-lighter);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block {\n  background: var(--theme-success-default);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-success-darker);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-success-lighter);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block {\n  background: var(--theme-warning-default);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-warning-darker);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-warning-lighter);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block {\n  background: var(--theme-danger-default);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-danger-darker);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-danger-lighter);\n}\nsd-toast[data-sd-open=true] > ._sd-toast-block {\n  transform: none;\n  transition: var(--animation-duration) ease-out;\n  transition-property: transform, opacity;\n  opacity: 1;\n}\nsd-toast[data-sd-open=false] > ._sd-toast-block {\n  transform: translateY(-100%);\n  transition: var(--animation-duration) ease-in;\n  transition-property: transform, opacity;\n  opacity: 0;\n}\n@media all and (max-width: 520px) {\n  sd-toast > ._sd-toast-block {\n    border-radius: calc(var(--line-height) / 2);\n    transform: translateY(100%);\n  }\n  sd-toast > ._sd-toast-block > ._sd-toast-message {\n    padding: var(--gap-xs) var(--gap-default);\n  }\n  sd-toast[data-sd-open=false] > ._sd-toast-block {\n    transform: translateY(100%);\n  }\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdToast, [{
         type: Component,
@@ -82,6 +82,6 @@ export class SdToast {
         </div>
       }
     </div>
-  `, styles: ["sd-toast {\n  display: block;\n  margin-bottom: var(--gap-sm);\n  text-align: center;\n  width: 100%;\n  pointer-events: none;\n}\nsd-toast > ._sd-toast-block {\n  display: inline-block;\n  text-align: left;\n  color: var(--text-trans-rev-default);\n  transform: translateY(-100%);\n  border-radius: var(--border-radius-lg);\n  opacity: 0;\n  box-shadow: 0 calc(12 * var(--elevation-size)) calc(12 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  pointer-events: auto;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-message {\n  padding: var(--gap-default) var(--gap-lg);\n  word-break: break-all;\n  white-space: pre-wrap;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-gray-default);\n  height: 4px;\n  border-radius: var(--border-radius-xl);\n  margin: 0 4px 4px 4px;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  border-radius: var(--border-radius-xl);\n  height: 4px;\n  transition: width 1s ease-out;\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block {\n  background: var(--theme-gray-default);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-gray-darker);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-gray-lighter);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block {\n  background: var(--theme-blue-gray-default);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-blue-gray-darker);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-blue-gray-lighter);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block {\n  background: var(--theme-primary-default);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-primary-darker);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-primary-lighter);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block {\n  background: var(--theme-secondary-default);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-secondary-darker);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-secondary-lighter);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block {\n  background: var(--theme-info-default);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-info-darker);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-info-lighter);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block {\n  background: var(--theme-success-default);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-success-darker);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-success-lighter);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block {\n  background: var(--theme-warning-default);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-warning-darker);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-warning-lighter);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block {\n  background: var(--theme-danger-default);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-danger-darker);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-danger-lighter);\n}\nsd-toast[data-sd-open=true] > ._sd-toast-block {\n  transform: none;\n  transition: var(--animation-duration) ease-out;\n  transition-property: transform, opacity;\n  opacity: 1;\n}\nsd-toast[data-sd-open=false] > ._sd-toast-block {\n  transform: translateY(-100%);\n  transition: var(--animation-duration) ease-in;\n  transition-property: transform, opacity;\n  opacity: 0;\n}\n@media all and (max-width: 520px) {\n  sd-toast > ._sd-toast-block {\n    border-radius: calc(var(--line-height) / 2);\n    transform: translateY(100%);\n  }\n  sd-toast > ._sd-toast-block > ._sd-toast-message {\n    padding: var(--gap-xs) var(--gap-default);\n  }\n  sd-toast[data-sd-open=false] > ._sd-toast-block {\n    transform: translateY(100%);\n  }\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-toast {\n  display: block;\n  margin-bottom: var(--gap-sm);\n  text-align: center;\n  width: 100%;\n  pointer-events: none;\n}\nsd-toast > ._sd-toast-block {\n  display: inline-block;\n  text-align: left;\n  color: var(--text-trans-rev-default);\n  transform: translateY(-100%);\n  border-radius: var(--border-radius-lg);\n  opacity: 0;\n  box-shadow: 0 calc(12 * var(--elevation-size)) calc(12 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n  pointer-events: auto;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-message {\n  padding: var(--gap-default) var(--gap-lg);\n  word-break: break-all;\n  white-space: pre-wrap;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-gray-default);\n  height: 4px;\n  border-radius: var(--border-radius-xl);\n  margin: 0 4px 4px 4px;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  border-radius: var(--border-radius-xl);\n  height: 4px;\n  transition: width 1s ease-out;\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block {\n  background: var(--theme-gray-default);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-gray-darker);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-gray-lighter);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block {\n  background: var(--theme-blue-gray-default);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-blue-gray-darker);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-blue-gray-lighter);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block {\n  background: var(--theme-primary-default);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-primary-darker);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-primary-lighter);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block {\n  background: var(--theme-secondary-default);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-secondary-darker);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-secondary-lighter);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block {\n  background: var(--theme-info-default);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-info-darker);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-info-lighter);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block {\n  background: var(--theme-success-default);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-success-darker);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-success-lighter);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block {\n  background: var(--theme-warning-default);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-warning-darker);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-warning-lighter);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block {\n  background: var(--theme-danger-default);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress {\n  background: var(--theme-danger-darker);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background: var(--theme-danger-lighter);\n}\nsd-toast[data-sd-open=true] > ._sd-toast-block {\n  transform: none;\n  transition: var(--animation-duration) ease-out;\n  transition-property: transform, opacity;\n  opacity: 1;\n}\nsd-toast[data-sd-open=false] > ._sd-toast-block {\n  transform: translateY(-100%);\n  transition: var(--animation-duration) ease-in;\n  transition-property: transform, opacity;\n  opacity: 0;\n}\n@media all and (max-width: 520px) {\n  sd-toast > ._sd-toast-block {\n    border-radius: calc(var(--line-height) / 2);\n    transform: translateY(100%);\n  }\n  sd-toast > ._sd-toast-block > ._sd-toast-message {\n    padding: var(--gap-xs) var(--gap-default);\n  }\n  sd-toast[data-sd-open=false] > ._sd-toast-block {\n    transform: translateY(100%);\n  }\n}"] }]
     }], null, { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], useProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "useProgress", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }, { type: i0.Output, args: ["progressChange"] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }, { type: i0.Output, args: ["messageChange"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdToast, { className: "SdToast", filePath: "packages/angular/src/core/toast/sd-toast.ts", lineNumber: 139 }); })();

package/dist/data/crud/sd-base-container.js

@@ -140,7 +140,7 @@ export class SdBaseContainer {
             i0.ɵɵcontentQuerySignal(dirIndex, ctx.topbarTplRef, _c0, 5)(dirIndex, ctx.commandTplRef, _c1, 5)(dirIndex, ctx.contentTplRef, _c2, 5)(dirIndex, ctx.bottomCommandTplRef, _c3, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance(4);
-        } }, inputs: { ready: [1, "ready"], initialized: [1, "initialized"], busyCount: [1, "busyCount"], restricted: [1, "restricted"], viewType: [1, "viewType"] }, outputs: { ready: "readyChange", busyCount: "busyCountChange" }, decls: 4, vars: 2, consts: [["content", ""], [3, "busy"], [1, "fill", "tx-theme-gray-light", "p-xxl", "tx-center"], [3, "ngTemplateOutlet"], [3, "svg", "size"], [1, "tx-trans-light"], [1, "flex-column", "fill"], [1, "p-sm-default", "flex-row", "gap-default", "bdb", "bdb-color-lighter", "bg-theme-gray-lightest"], [1, "flex-fill"], [1, "p-sm-default", "flex-row", "main-align-end", "gap-sm", "bdt", "bdt-theme-gray-lighter", "bg-theme-gray-lightest"]], template: function SdBaseContainer_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { ready: [1, "ready"], initialized: [1, "initialized"], busyCount: [1, "busyCount"], restricted: [1, "restricted"], viewType: [1, "viewType"] }, outputs: { ready: "readyChange", busyCount: "busyCountChange" }, decls: 4, vars: 2, consts: [["content", ""], [3, "busy"], [1, "fill", "tx-theme-gray-light", "p-xxl", "tx-center"], [3, "ngTemplateOutlet"], [3, "svg", "size"], [1, "tx-trans-light"], [1, "flex-column", "fill", "bg-control"], [1, "p-sm-default", "flex-row", "gap-default", "bdb", "bdb-color-lighter"], [1, "flex-fill"], [1, "p-sm-default", "flex-row", "main-align-end", "gap-sm", "bdt", "bdt-theme-gray-lighter"]], template: function SdBaseContainer_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "sd-busy-container", 1);
             i0.ɵɵconditionalCreate(1, SdBaseContainer_Conditional_1_Template, 3, 1);
             i0.ɵɵelementEnd();
@@ -187,9 +187,9 @@ export class SdBaseContainer {
     </sd-busy-container>
 
     <ng-template #content>
-      <div class="flex-column fill">
+      <div class="flex-column fill bg-control">
         @if (commandTplRef()) {
-          <div class="p-sm-default flex-row gap-default  bdb bdb-color-lighter bg-theme-gray-lightest">
+          <div class="p-sm-default flex-row gap-default  bdb bdb-color-lighter">
             <ng-template [ngTemplateOutlet]="commandTplRef()" />
           </div>
         }
@@ -202,7 +202,7 @@ export class SdBaseContainer {
 
         @if (bottomCommandTplRef()) {
           <div
-            class="p-sm-default flex-row main-align-end gap-sm bdt bdt-theme-gray-lighter bg-theme-gray-lightest"
+            class="p-sm-default flex-row main-align-end gap-sm bdt bdt-theme-gray-lighter"
           >
             <ng-template [ngTemplateOutlet]="bottomCommandTplRef()" />
           </div>

package/dist/data/kanban/sd-kanban-board.js

@@ -24,7 +24,7 @@ export class SdKanbanBoard {
         } }, inputs: { selectedValues: [1, "selectedValues"] }, outputs: { selectedValues: "selectedValuesChange", drop: "drop" }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdKanbanBoard_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["sd-kanban-board {\n  display: inline-flex;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n  height: 100%;\n  flex-direction: row;\n  gap: var(--gap-lg);\n}\n@supports not (appearance: auto) {\n  sd-kanban-board {\n    gap: 0;\n  }\n  sd-kanban-board > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-kanban-board.gap-xxs {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xxs > * + * {\n    margin-left: var(--gap-xxs);\n  }\n  sd-kanban-board.gap-xs {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xs > * + * {\n    margin-left: var(--gap-xs);\n  }\n  sd-kanban-board.gap-sm {\n    gap: 0;\n  }\n  sd-kanban-board.gap-sm > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-kanban-board.gap-default {\n    gap: 0;\n  }\n  sd-kanban-board.gap-default > * + * {\n    margin-left: var(--gap-default);\n  }\n  sd-kanban-board.gap-lg {\n    gap: 0;\n  }\n  sd-kanban-board.gap-lg > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-kanban-board.gap-xl {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xl > * + * {\n    margin-left: var(--gap-xl);\n  }\n  sd-kanban-board.gap-xxl {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xxl > * + * {\n    margin-left: var(--gap-xxl);\n  }\n  sd-kanban-board.gap-0 {\n    gap: 0;\n  }\n  sd-kanban-board.gap-0 > * + * {\n    margin-left: var(--gap-0);\n  }\n  sd-kanban-board.gap-auto {\n    gap: 0;\n  }\n  sd-kanban-board.gap-auto > * + * {\n    margin-left: var(--gap-auto);\n  }\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, 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-kanban-board {\n  display: inline-flex;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n  height: 100%;\n  flex-direction: row;\n  gap: var(--gap-lg);\n}\n@supports not (appearance: auto) {\n  sd-kanban-board {\n    gap: 0;\n  }\n  sd-kanban-board > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-kanban-board.gap-xxs {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xxs > * + * {\n    margin-left: var(--gap-xxs);\n  }\n  sd-kanban-board.gap-xs {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xs > * + * {\n    margin-left: var(--gap-xs);\n  }\n  sd-kanban-board.gap-sm {\n    gap: 0;\n  }\n  sd-kanban-board.gap-sm > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-kanban-board.gap-default {\n    gap: 0;\n  }\n  sd-kanban-board.gap-default > * + * {\n    margin-left: var(--gap-default);\n  }\n  sd-kanban-board.gap-lg {\n    gap: 0;\n  }\n  sd-kanban-board.gap-lg > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-kanban-board.gap-xl {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xl > * + * {\n    margin-left: var(--gap-xl);\n  }\n  sd-kanban-board.gap-xxl {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xxl > * + * {\n    margin-left: var(--gap-xxl);\n  }\n  sd-kanban-board.gap-0 {\n    gap: 0;\n  }\n  sd-kanban-board.gap-0 > * + * {\n    margin-left: var(--gap-0);\n  }\n  sd-kanban-board.gap-auto {\n    gap: 0;\n  }\n  sd-kanban-board.gap-auto > * + * {\n    margin-left: var(--gap-auto);\n  }\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdKanbanBoard, [{
         type: Component,
@@ -32,6 +32,6 @@ export class SdKanbanBoard {
                     "(document:dragend)": "onDocumentDragEnd()",
                 }, template: `
     <ng-content></ng-content>
-  `, styles: ["sd-kanban-board {\n  display: inline-flex;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n  height: 100%;\n  flex-direction: row;\n  gap: var(--gap-lg);\n}\n@supports not (appearance: auto) {\n  sd-kanban-board {\n    gap: 0;\n  }\n  sd-kanban-board > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-kanban-board.gap-xxs {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xxs > * + * {\n    margin-left: var(--gap-xxs);\n  }\n  sd-kanban-board.gap-xs {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xs > * + * {\n    margin-left: var(--gap-xs);\n  }\n  sd-kanban-board.gap-sm {\n    gap: 0;\n  }\n  sd-kanban-board.gap-sm > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-kanban-board.gap-default {\n    gap: 0;\n  }\n  sd-kanban-board.gap-default > * + * {\n    margin-left: var(--gap-default);\n  }\n  sd-kanban-board.gap-lg {\n    gap: 0;\n  }\n  sd-kanban-board.gap-lg > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-kanban-board.gap-xl {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xl > * + * {\n    margin-left: var(--gap-xl);\n  }\n  sd-kanban-board.gap-xxl {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xxl > * + * {\n    margin-left: var(--gap-xxl);\n  }\n  sd-kanban-board.gap-0 {\n    gap: 0;\n  }\n  sd-kanban-board.gap-0 > * + * {\n    margin-left: var(--gap-0);\n  }\n  sd-kanban-board.gap-auto {\n    gap: 0;\n  }\n  sd-kanban-board.gap-auto > * + * {\n    margin-left: var(--gap-auto);\n  }\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-kanban-board {\n  display: inline-flex;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n  height: 100%;\n  flex-direction: row;\n  gap: var(--gap-lg);\n}\n@supports not (appearance: auto) {\n  sd-kanban-board {\n    gap: 0;\n  }\n  sd-kanban-board > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-kanban-board.gap-xxs {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xxs > * + * {\n    margin-left: var(--gap-xxs);\n  }\n  sd-kanban-board.gap-xs {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xs > * + * {\n    margin-left: var(--gap-xs);\n  }\n  sd-kanban-board.gap-sm {\n    gap: 0;\n  }\n  sd-kanban-board.gap-sm > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-kanban-board.gap-default {\n    gap: 0;\n  }\n  sd-kanban-board.gap-default > * + * {\n    margin-left: var(--gap-default);\n  }\n  sd-kanban-board.gap-lg {\n    gap: 0;\n  }\n  sd-kanban-board.gap-lg > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-kanban-board.gap-xl {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xl > * + * {\n    margin-left: var(--gap-xl);\n  }\n  sd-kanban-board.gap-xxl {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xxl > * + * {\n    margin-left: var(--gap-xxl);\n  }\n  sd-kanban-board.gap-0 {\n    gap: 0;\n  }\n  sd-kanban-board.gap-0 > * + * {\n    margin-left: var(--gap-0);\n  }\n  sd-kanban-board.gap-auto {\n    gap: 0;\n  }\n  sd-kanban-board.gap-auto > * + * {\n    margin-left: var(--gap-auto);\n  }\n}"] }]
     }], null, { selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }, { type: i0.Output, args: ["selectedValuesChange"] }], drop: [{ type: i0.Output, args: ["drop"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdKanbanBoard, { className: "SdKanbanBoard", filePath: "packages/angular/src/data/kanban/sd-kanban-board.ts", lineNumber: 36 }); })();

package/dist/data/kanban/sd-kanban-lane.js

@@ -169,7 +169,7 @@ export class SdKanbanLane {
             i0.ɵɵconditional(!ctx.collapse() ? 4 : -1);
             i0.ɵɵadvance();
             i0.ɵɵstyleProp("height", ctx.dragOvered() ? (((tmp_5_0 = ctx.dragKanban()) == null ? null : tmp_5_0.heightOnDrag()) ?? 0) + "px" : "0px")("display", ctx.dragKanban() ? "block" : "none");
-        } }, dependencies: [SdBusyContainer, SdCheckbox, NgTemplateOutlet, SdAnchor, NgIcon], styles: ["sd-kanban-lane > .flex-fill > sd-busy-container {\n  padding: var(--gap-xl) var(--gap-lg);\n  background: var(--theme-gray-lightest);\n  border-radius: var(--border-radius-default);\n  height: 100%;\n}\nsd-kanban-lane > .flex-fill > sd-busy-container > ._drop-position {\n  pointer-events: none;\n  border-radius: var(--border-radius-default);\n  background: var(--trans-light);\n  height: 0;\n  margin-bottom: 0;\n  visibility: hidden;\n  transition: 0.1s linear;\n  transition-property: height, margin-bottom, visibility;\n}\nsd-kanban-lane[data-sd-drag-over=true] > .flex-fill > sd-busy-container > ._drop-position {\n  margin-bottom: var(--gap-lg);\n  visibility: visible;\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [SdBusyContainer, SdCheckbox, NgTemplateOutlet, SdAnchor, NgIcon], styles: ["sd-kanban-lane > .flex-fill > sd-busy-container {\n  padding: var(--gap-xl) var(--gap-lg);\n  background: var(--theme-gray-lightest);\n  border-radius: var(--border-radius-default);\n  height: 100%;\n}\nsd-kanban-lane > .flex-fill > sd-busy-container > ._drop-position {\n  pointer-events: none;\n  border-radius: var(--border-radius-default);\n  background: var(--trans-light);\n  height: 0;\n  margin-bottom: 0;\n  visibility: hidden;\n  transition: var(--animation-duration) linear;\n  transition-property: height, margin-bottom, visibility;\n}\nsd-kanban-lane[data-sd-drag-over=true] > .flex-fill > sd-busy-container > ._drop-position {\n  margin-bottom: var(--gap-lg);\n  visibility: visible;\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdKanbanLane, [{
         type: Component,
@@ -224,6 +224,6 @@ export class SdKanbanLane {
         ></div>
       </sd-busy-container>
     </div>
-  `, styles: ["sd-kanban-lane > .flex-fill > sd-busy-container {\n  padding: var(--gap-xl) var(--gap-lg);\n  background: var(--theme-gray-lightest);\n  border-radius: var(--border-radius-default);\n  height: 100%;\n}\nsd-kanban-lane > .flex-fill > sd-busy-container > ._drop-position {\n  pointer-events: none;\n  border-radius: var(--border-radius-default);\n  background: var(--trans-light);\n  height: 0;\n  margin-bottom: 0;\n  visibility: hidden;\n  transition: 0.1s linear;\n  transition-property: height, margin-bottom, visibility;\n}\nsd-kanban-lane[data-sd-drag-over=true] > .flex-fill > sd-busy-container > ._drop-position {\n  margin-bottom: var(--gap-lg);\n  visibility: visible;\n}"] }]
+  `, styles: ["sd-kanban-lane > .flex-fill > sd-busy-container {\n  padding: var(--gap-xl) var(--gap-lg);\n  background: var(--theme-gray-lightest);\n  border-radius: var(--border-radius-default);\n  height: 100%;\n}\nsd-kanban-lane > .flex-fill > sd-busy-container > ._drop-position {\n  pointer-events: none;\n  border-radius: var(--border-radius-default);\n  background: var(--trans-light);\n  height: 0;\n  margin-bottom: 0;\n  visibility: hidden;\n  transition: var(--animation-duration) linear;\n  transition-property: height, margin-bottom, visibility;\n}\nsd-kanban-lane[data-sd-drag-over=true] > .flex-fill > sd-busy-container > ._drop-position {\n  margin-bottom: var(--gap-lg);\n  visibility: visible;\n}"] }]
     }], null, { busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], useCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "useCollapse", required: false }] }], collapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapse", required: false }] }, { type: i0.Output, args: ["collapseChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], kanbanControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdKanban), { ...{ descendants: true }, isSignal: true }] }], toolTplRef: [{ type: i0.ContentChild, args: ["toolTpl", { ...{ read: TemplateRef }, isSignal: true }] }], titleTplRef: [{ type: i0.ContentChild, args: ["titleTpl", { ...{ read: TemplateRef }, isSignal: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdKanbanLane, { className: "SdKanbanLane", filePath: "packages/angular/src/data/kanban/sd-kanban-lane.ts", lineNumber: 121 }); })();

package/dist/data/kanban/sd-kanban.js

@@ -110,7 +110,7 @@ export class SdKanban {
             i0.ɵɵadvance();
             i0.ɵɵclassMap(ctx.contentClass());
             i0.ɵɵproperty("draggable", ctx.draggable());
-        } }, dependencies: [SdResizeDirective], styles: ["sd-kanban {\n  position: relative;\n  display: block;\n}\nsd-kanban[data-sd-dragging-this=true] {\n  display: none;\n}\nsd-kanban > ._drag-position {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\nsd-kanban[data-sd-dragging=true] > ._drag-position {\n  pointer-events: auto;\n}\nsd-kanban[data-sd-dragging=true] > .card {\n  pointer-events: none;\n  cursor: pointer;\n}\nsd-kanban > ._drop-position {\n  border-radius: var(--border-radius-default);\n  background: var(--trans-light);\n  height: 0;\n  margin-bottom: 0;\n  visibility: hidden;\n  transition: 0.1s linear;\n  transition-property: height, margin-bottom, visibility;\n}\nsd-kanban[data-sd-drag-over=true] > ._drop-position {\n  margin-bottom: var(--gap-lg);\n  visibility: visible;\n}\nsd-kanban > .card {\n  white-space: normal;\n  user-select: none;\n  margin-bottom: var(--gap-lg);\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [SdResizeDirective], styles: ["sd-kanban {\n  position: relative;\n  display: block;\n}\nsd-kanban[data-sd-dragging-this=true] {\n  display: none;\n}\nsd-kanban > ._drag-position {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\nsd-kanban[data-sd-dragging=true] > ._drag-position {\n  pointer-events: auto;\n}\nsd-kanban[data-sd-dragging=true] > .card {\n  pointer-events: none;\n  cursor: pointer;\n}\nsd-kanban > ._drop-position {\n  border-radius: var(--border-radius-default);\n  background: var(--trans-light);\n  height: 0;\n  margin-bottom: 0;\n  visibility: hidden;\n  transition: var(--animation-duration) linear;\n  transition-property: height, margin-bottom, visibility;\n}\nsd-kanban[data-sd-drag-over=true] > ._drop-position {\n  margin-bottom: var(--gap-lg);\n  visibility: visible;\n}\nsd-kanban > .card {\n  white-space: normal;\n  user-select: none;\n  margin-bottom: var(--gap-lg);\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdKanban, [{
         type: Component,
@@ -142,6 +142,6 @@ export class SdKanban {
     >
       <ng-content></ng-content>
     </div>
-  `, styles: ["sd-kanban {\n  position: relative;\n  display: block;\n}\nsd-kanban[data-sd-dragging-this=true] {\n  display: none;\n}\nsd-kanban > ._drag-position {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\nsd-kanban[data-sd-dragging=true] > ._drag-position {\n  pointer-events: auto;\n}\nsd-kanban[data-sd-dragging=true] > .card {\n  pointer-events: none;\n  cursor: pointer;\n}\nsd-kanban > ._drop-position {\n  border-radius: var(--border-radius-default);\n  background: var(--trans-light);\n  height: 0;\n  margin-bottom: 0;\n  visibility: hidden;\n  transition: 0.1s linear;\n  transition-property: height, margin-bottom, visibility;\n}\nsd-kanban[data-sd-drag-over=true] > ._drop-position {\n  margin-bottom: var(--gap-lg);\n  visibility: visible;\n}\nsd-kanban > .card {\n  white-space: normal;\n  user-select: none;\n  margin-bottom: var(--gap-lg);\n}"] }]
+  `, styles: ["sd-kanban {\n  position: relative;\n  display: block;\n}\nsd-kanban[data-sd-dragging-this=true] {\n  display: none;\n}\nsd-kanban > ._drag-position {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\nsd-kanban[data-sd-dragging=true] > ._drag-position {\n  pointer-events: auto;\n}\nsd-kanban[data-sd-dragging=true] > .card {\n  pointer-events: none;\n  cursor: pointer;\n}\nsd-kanban > ._drop-position {\n  border-radius: var(--border-radius-default);\n  background: var(--trans-light);\n  height: 0;\n  margin-bottom: 0;\n  visibility: hidden;\n  transition: var(--animation-duration) linear;\n  transition-property: height, margin-bottom, visibility;\n}\nsd-kanban[data-sd-drag-over=true] > ._drop-position {\n  margin-bottom: var(--gap-lg);\n  visibility: visible;\n}\nsd-kanban > .card {\n  white-space: normal;\n  user-select: none;\n  margin-bottom: var(--gap-lg);\n}"] }]
     }], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdKanban, { className: "SdKanban", filePath: "packages/angular/src/data/kanban/sd-kanban.ts", lineNumber: 114 }); })();

package/dist/data/sheet/sd-sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-sheet.d.ts","sourceRoot":"","sources":["../../../src/data/sheet/sd-sheet.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sd-sheet.d.ts","sourceRoot":"","sources":["../../../src/data/sheet/sd-sheet.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAclD,OAAO,EAAE,KAAK,UAAU,EAAqB,MAAM,wCAAwC,CAAC;AAI5F,OAAO,KAAK,EACV,4BAA4B,EAE5B,gBAAgB,EAChB,4BAA4B,EAC7B,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;;;AAcjE,qBAqhBa,OAAO,CAAC,KAAK;IAExB,GAAG,0DAAmB;IACtB,KAAK,+CAAsB;IAC3B,SAAS,6CAAgB,KAAK,SAAS,MAAM,KAAK,OAAO,EAAkB;IAC3E,UAAU,sEAA+B;IACzC,UAAU,qEAA8B;IACxC,mBAAmB,8CAAgB,KAAK,KAAK,OAAO,GAAG,MAAM,eAAI;IACjE,aAAa,8CAAgB,KAAK,SAAS,MAAM,KAAK,KAAK,EAAE,GAAG,SAAS,eAAI;IAC7E,WAAW,qEAAiD;IAC5D,gBAAgB,8CAAa;IAC7B,cAAc,8CAAY;IAC1B,YAAY,8CAAY;IACxB,SAAS,sDAAiC;IAC1C,KAAK,qEAAiD;IACtD,YAAY,0DAAmB;IAC/B,kBAAkB,8CAAgB,KAAK,UAAU,MAAM,KAAK,MAAM,eAAI;IACtE,kBAAkB,8CAAgB,KAAK,UAAU,MAAM,KAAK,MAAM,GAAG,SAAS,eAAI;IAClF,aAAa,qEAAiD;IAG9D,WAAW,gFAAiD;IAC5D,WAAW,gFAAiD;IAG5D,YAAY,iDAAwB;IACpC,aAAa,+CAAsB;IACnC,KAAK,oDAA2B;IAChC,WAAW,8CAAY;IAGvB,cAAc,gEAAkC;IAChD,mBAAmB,yEAAuC;IAC1D,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAGtC;IAGH,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2B;IAGpD,WAAW;;;;;;;;;;;;;MAA4B;IACvC,SAAS;;;;;;;;;;;;;;;;MAAwD;IAGjE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAE7B;IAGH,OAAO,CAAC,QAAQ,CAAC,SAAS,CAGvB;IACH,WAAW,kDAA6B;IACxC,oBAAoB,iDAAgC;IACpD,kBAAkB,0EAA8B;IAChD,iBAAiB,0EAA6B;IAG9C,MAAM;;;;;;MAGH;IAGH,OAAO;;qBA7nBA,CAAA;;;;;MA+nBJ;IAGH,OAAO,CAAC,QAAQ,CAAC,SAAS,CASvB;IACH,kBAAkB,yCAAqC;IACvD,SAAS;;;;;;;;MAA4B;IACrC,YAAY,0CAA+B;IAG3C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAqC;IAEtE,MAAM;;MAIH;IAGH,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAQtB;IACH,kBAAkB,4CAAoC;IACtD,YAAY,6EAA8B;IAC1C,iBAAiB,oCAAmC;IACpD,sBAAsB,6FAAwC;IAC9D,gBAAgB,mGAAkC;IAGlD,OAAO,CAAC,QAAQ,CAAC,eAAe,CAE7B;IAGH,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAKjC;IAGH,SAAS;;;;;;;;;;MAMN;IAGH,KAAK;;;;;;;MAOH;IAEF,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAM/B;IAEH,kBAAkB,CAAC,GAAG,EAAE,MAAM;IAK9B,gBAAgB,CAAC,GAAG,EAAE,MAAM;IAK5B,mBAAmB,CAAC,GAAG,EAAE,MAAM;IAK/B,oBAAoB,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS;IAMrD,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI;IAM7B,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,GAAG,IAAI;IAM5C,WAAW,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI;IAM9B,aAAa,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAO9D,UAAU,CAAC,GAAG,EAAE,MAAM;;;;IAItB,UAAU,CAAC,IAAI,EAAE,KAAK;IAKtB,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAiD;IAE9E,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,OAAO;IAIhC,eAAe,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI;IAO3C,aAAa,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,GAAG,IAAI;IAK9C,gBAAgB,CAAC,IAAI,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;IAOjD,gBAAgB,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IAI3D,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAInC,cAAc,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAKvC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAKtC,iBAAiB,IAAI,IAAI;IAIzB,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAMzC,iBAAiB,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAU1D,mBAAmB,CAAC,KAAK,EAAE,UAAU,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IA8CvD,OAAO,CAAC,kBAAkB;IAqB1B,aAAa,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,KAAK,GAAG,IAAI;IAItD,aAAa,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAIhE,mBAAmB,IAAI,OAAO,CAAC,IAAI,CAAC;yCAxV/B,OAAO;2CAAP,OAAO;CA2WnB;AAGD,YAAY,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC"}

package/dist/data/sheet/sd-sheet.js

@@ -769,7 +769,7 @@ export class SdSheet {
             SdPagination,
             SdAnchor,
             SdButton,
-            SdResizeDirective], styles: ["sd-sheet {\n  border: 1px solid var(--theme-gray-lighter);\n  border-radius: var(--border-radius-default);\n}\nsd-sheet > ._tool {\n  background: var(--control-color);\n  border-top-left-radius: var(--border-radius-default);\n  border-top-right-radius: var(--border-radius-default);\n  border-bottom: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container {\n  position: relative;\n  background: var(--sheet-bg);\n  border-bottom-left-radius: var(--border-radius-default);\n  border-bottom-right-radius: var(--border-radius-default);\n  overflow: auto;\n}\nsd-sheet > ._sheet-container > table {\n  border-spacing: 0;\n  table-layout: fixed;\n  margin-right: 2px;\n  margin-bottom: 2px;\n  border-bottom-right-radius: var(--border-radius-default);\n}\nsd-sheet > ._sheet-container > table > * > tr > *:last-child {\n  border-right: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > * > tr:last-child > * {\n  border-bottom: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > *:last-child > tr:last-child > td:last-child {\n  border-bottom-right-radius: var(--border-radius-default);\n  overflow: hidden;\n}\nsd-sheet > ._sheet-container > table > * > tr > * {\n  border-right: 1px solid var(--theme-gray-lighter);\n  border-bottom: 1px solid var(--theme-gray-lighter);\n  white-space: nowrap;\n  overflow: hidden;\n  padding: 0;\n  position: relative;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed:has(+ :not(._fixed)) + :not(._fixed):not([data-c=\"0\"]) {\n  border-left: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > * > tr > *._feature-cell {\n  background: var(--theme-gray-lightest);\n  min-width: calc(var(--font-size-default) + 2px + var(--sheet-ph) * 2);\n  padding: var(--sheet-pv) var(--sheet-ph);\n  text-align: left;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._feature-cell > ng-icon {\n  cursor: pointer;\n  color: var(--text-trans-lightest);\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed {\n  position: sticky;\n  left: 0;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed:has(+ :not(._fixed)) {\n  border-right: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > thead {\n  position: sticky;\n  top: 0;\n  z-index: 3;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th {\n  position: relative;\n  background: var(--theme-gray-lightest);\n  vertical-align: middle;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._fixed {\n  z-index: 4;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._last-depth {\n  border-bottom: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._feature-cell {\n  border-bottom: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._sort {\n  cursor: pointer;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._sort:hover {\n  text-decoration: underline;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th > ._headerContent > ._sort-icon {\n  padding: var(--gap-xs) var(--gap-xs) var(--gap-xs) 0;\n  background-color: var(--theme-gray-lightest);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th > ._resizer {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 2px;\n  cursor: ew-resize;\n}\nsd-sheet > ._sheet-container > table > thead:has(> tr._summary-row) > tr > th._last-depth {\n  border-bottom: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > thead:has(> tr._summary-row) > tr._summary-row > th {\n  background: var(--theme-warning-lightest);\n  text-align: left;\n  border-bottom: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td {\n  background: var(--control-color);\n  vertical-align: top;\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td._fixed {\n  z-index: 2;\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td > ._depth-indicator {\n  display: inline-block;\n  margin-top: 0.4em;\n  width: 0.5em;\n  height: 0.5em;\n  border-left: 1px solid var(--text-trans-default);\n  border-bottom: 1px solid var(--text-trans-default);\n  vertical-align: top;\n}\nsd-sheet > ._sheet-container > ._focus-row-indicator {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  background: rgba(158, 158, 158, 0.1);\n  z-index: 6;\n}\nsd-sheet > ._sheet-container > ._focus-row-indicator > ._focus-cell-indicator {\n  position: absolute;\n  border: 2px solid var(--theme-primary-default);\n  border-radius: var(--border-radius-default);\n}\nsd-sheet > ._sheet-container > ._resize-indicator {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  height: 100%;\n  border: 1px dotted var(--theme-gray-light);\n  z-index: 7;\n}\nsd-sheet > ._sheet-container > ._select-row-indicator-container {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n}\nsd-sheet > ._sheet-container > ._select-row-indicator-container > ._select-row-indicator {\n  display: block;\n  left: 0;\n  position: absolute;\n  pointer-events: none;\n  background: var(--theme-primary-default);\n  opacity: 0.1;\n}\nsd-sheet ._p-sheet {\n  padding: var(--sheet-pv) var(--sheet-ph);\n}\nsd-sheet[data-sd-focus-mode=row] > ._sheet-container > ._focus-row-indicator > ._focus-cell-indicator {\n  display: none !important;\n}\nsd-sheet[data-sd-inset=true] {\n  border: none;\n  border-radius: 0;\n}"], encapsulation: 2, changeDetection: 0 });
+            SdResizeDirective], 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-sheet {\n  border: 1px solid var(--border-color-lighter);\n  border-radius: var(--border-radius-default);\n}\nsd-sheet > ._tool {\n  background: var(--control-color);\n  border-top-left-radius: var(--border-radius-default);\n  border-top-right-radius: var(--border-radius-default);\n  border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container {\n  position: relative;\n  background: var(--sheet-bg);\n  border-bottom-left-radius: var(--border-radius-default);\n  border-bottom-right-radius: var(--border-radius-default);\n  overflow: auto;\n}\nsd-sheet > ._sheet-container > table {\n  border-spacing: 0;\n  table-layout: fixed;\n  margin-right: 2px;\n  margin-bottom: 2px;\n  border-bottom-right-radius: var(--border-radius-default);\n}\nsd-sheet > ._sheet-container > table > * > tr > *:last-child {\n  border-right: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > * > tr:last-child > * {\n  border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > *:last-child > tr:last-child > td:last-child {\n  border-bottom-right-radius: var(--border-radius-default);\n  overflow: hidden;\n}\nsd-sheet > ._sheet-container > table > * > tr > * {\n  border-right: 1px solid var(--border-color-lighter);\n  border-bottom: 1px solid var(--border-color-lighter);\n  white-space: nowrap;\n  overflow: hidden;\n  padding: 0;\n  position: relative;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed:has(+ :not(._fixed)) + :not(._fixed):not([data-c=\"0\"]) {\n  border-left: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > * > tr > *._feature-cell {\n  background: var(--theme-gray-lightest);\n  min-width: calc(var(--font-size-default) + 2px + var(--sheet-ph) * 2);\n  padding: var(--sheet-pv) var(--sheet-ph);\n  text-align: left;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._feature-cell > ng-icon {\n  cursor: pointer;\n  color: var(--text-trans-lightest);\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed {\n  position: sticky;\n  left: 0;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed:has(+ :not(._fixed)) {\n  border-right: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > thead {\n  position: sticky;\n  top: 0;\n  z-index: 3;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th {\n  position: relative;\n  background: var(--theme-gray-lightest);\n  vertical-align: middle;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._fixed {\n  z-index: 4;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._last-depth {\n  border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._feature-cell {\n  border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._sort {\n  cursor: pointer;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._sort:hover {\n  text-decoration: underline;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th > ._headerContent > ._sort-icon {\n  padding: var(--gap-xs) var(--gap-xs) var(--gap-xs) 0;\n  background-color: var(--theme-gray-lightest);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th > ._resizer {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 2px;\n  cursor: ew-resize;\n}\nsd-sheet > ._sheet-container > table > thead:has(> tr._summary-row) > tr > th._last-depth {\n  border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > thead:has(> tr._summary-row) > tr._summary-row > th {\n  background: var(--theme-warning-lightest);\n  text-align: left;\n  border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td {\n  font-family: var(--font-family-field);\n  background: var(--control-color);\n  vertical-align: top;\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td._fixed {\n  z-index: 2;\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td > ._depth-indicator {\n  display: inline-block;\n  margin-top: 0.4em;\n  width: 0.5em;\n  height: 0.5em;\n  border-left: 1px solid var(--text-trans-default);\n  border-bottom: 1px solid var(--text-trans-default);\n  vertical-align: top;\n}\nsd-sheet > ._sheet-container > ._focus-row-indicator {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  background: rgba(158, 158, 158, 0.1);\n  z-index: 6;\n}\nsd-sheet > ._sheet-container > ._focus-row-indicator > ._focus-cell-indicator {\n  position: absolute;\n  border: 2px solid var(--theme-primary-default);\n  border-radius: var(--border-radius-default);\n}\nsd-sheet > ._sheet-container > ._resize-indicator {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  height: 100%;\n  border: 1px dotted var(--border-color-light);\n  z-index: 7;\n}\nsd-sheet > ._sheet-container > ._select-row-indicator-container {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n}\nsd-sheet > ._sheet-container > ._select-row-indicator-container > ._select-row-indicator {\n  display: block;\n  left: 0;\n  position: absolute;\n  pointer-events: none;\n  background: var(--theme-primary-default);\n  opacity: 0.1;\n}\nsd-sheet ._p-sheet {\n  padding: var(--sheet-pv) var(--sheet-ph);\n}\nsd-sheet[data-sd-focus-mode=row] > ._sheet-container > ._focus-row-indicator > ._focus-cell-indicator {\n  display: none !important;\n}\nsd-sheet[data-sd-inset=true] {\n  border: none;\n  border-radius: 0;\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSheet, [{
         type: Component,
@@ -1064,6 +1064,6 @@ export class SdSheet {
       ></div>
       <div class="_select-row-indicator-container"></div>
     </div>
-  `, styles: ["sd-sheet {\n  border: 1px solid var(--theme-gray-lighter);\n  border-radius: var(--border-radius-default);\n}\nsd-sheet > ._tool {\n  background: var(--control-color);\n  border-top-left-radius: var(--border-radius-default);\n  border-top-right-radius: var(--border-radius-default);\n  border-bottom: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container {\n  position: relative;\n  background: var(--sheet-bg);\n  border-bottom-left-radius: var(--border-radius-default);\n  border-bottom-right-radius: var(--border-radius-default);\n  overflow: auto;\n}\nsd-sheet > ._sheet-container > table {\n  border-spacing: 0;\n  table-layout: fixed;\n  margin-right: 2px;\n  margin-bottom: 2px;\n  border-bottom-right-radius: var(--border-radius-default);\n}\nsd-sheet > ._sheet-container > table > * > tr > *:last-child {\n  border-right: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > * > tr:last-child > * {\n  border-bottom: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > *:last-child > tr:last-child > td:last-child {\n  border-bottom-right-radius: var(--border-radius-default);\n  overflow: hidden;\n}\nsd-sheet > ._sheet-container > table > * > tr > * {\n  border-right: 1px solid var(--theme-gray-lighter);\n  border-bottom: 1px solid var(--theme-gray-lighter);\n  white-space: nowrap;\n  overflow: hidden;\n  padding: 0;\n  position: relative;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed:has(+ :not(._fixed)) + :not(._fixed):not([data-c=\"0\"]) {\n  border-left: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > * > tr > *._feature-cell {\n  background: var(--theme-gray-lightest);\n  min-width: calc(var(--font-size-default) + 2px + var(--sheet-ph) * 2);\n  padding: var(--sheet-pv) var(--sheet-ph);\n  text-align: left;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._feature-cell > ng-icon {\n  cursor: pointer;\n  color: var(--text-trans-lightest);\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed {\n  position: sticky;\n  left: 0;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed:has(+ :not(._fixed)) {\n  border-right: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > thead {\n  position: sticky;\n  top: 0;\n  z-index: 3;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th {\n  position: relative;\n  background: var(--theme-gray-lightest);\n  vertical-align: middle;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._fixed {\n  z-index: 4;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._last-depth {\n  border-bottom: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._feature-cell {\n  border-bottom: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._sort {\n  cursor: pointer;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._sort:hover {\n  text-decoration: underline;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th > ._headerContent > ._sort-icon {\n  padding: var(--gap-xs) var(--gap-xs) var(--gap-xs) 0;\n  background-color: var(--theme-gray-lightest);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th > ._resizer {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 2px;\n  cursor: ew-resize;\n}\nsd-sheet > ._sheet-container > table > thead:has(> tr._summary-row) > tr > th._last-depth {\n  border-bottom: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > thead:has(> tr._summary-row) > tr._summary-row > th {\n  background: var(--theme-warning-lightest);\n  text-align: left;\n  border-bottom: 1px solid var(--theme-gray-lighter);\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td {\n  background: var(--control-color);\n  vertical-align: top;\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td._fixed {\n  z-index: 2;\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td > ._depth-indicator {\n  display: inline-block;\n  margin-top: 0.4em;\n  width: 0.5em;\n  height: 0.5em;\n  border-left: 1px solid var(--text-trans-default);\n  border-bottom: 1px solid var(--text-trans-default);\n  vertical-align: top;\n}\nsd-sheet > ._sheet-container > ._focus-row-indicator {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  background: rgba(158, 158, 158, 0.1);\n  z-index: 6;\n}\nsd-sheet > ._sheet-container > ._focus-row-indicator > ._focus-cell-indicator {\n  position: absolute;\n  border: 2px solid var(--theme-primary-default);\n  border-radius: var(--border-radius-default);\n}\nsd-sheet > ._sheet-container > ._resize-indicator {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  height: 100%;\n  border: 1px dotted var(--theme-gray-light);\n  z-index: 7;\n}\nsd-sheet > ._sheet-container > ._select-row-indicator-container {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n}\nsd-sheet > ._sheet-container > ._select-row-indicator-container > ._select-row-indicator {\n  display: block;\n  left: 0;\n  position: absolute;\n  pointer-events: none;\n  background: var(--theme-primary-default);\n  opacity: 0.1;\n}\nsd-sheet ._p-sheet {\n  padding: var(--sheet-pv) var(--sheet-ph);\n}\nsd-sheet[data-sd-focus-mode=row] > ._sheet-container > ._focus-row-indicator > ._focus-cell-indicator {\n  display: none !important;\n}\nsd-sheet[data-sd-inset=true] {\n  border: none;\n  border-radius: 0;\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-sheet {\n  border: 1px solid var(--border-color-lighter);\n  border-radius: var(--border-radius-default);\n}\nsd-sheet > ._tool {\n  background: var(--control-color);\n  border-top-left-radius: var(--border-radius-default);\n  border-top-right-radius: var(--border-radius-default);\n  border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container {\n  position: relative;\n  background: var(--sheet-bg);\n  border-bottom-left-radius: var(--border-radius-default);\n  border-bottom-right-radius: var(--border-radius-default);\n  overflow: auto;\n}\nsd-sheet > ._sheet-container > table {\n  border-spacing: 0;\n  table-layout: fixed;\n  margin-right: 2px;\n  margin-bottom: 2px;\n  border-bottom-right-radius: var(--border-radius-default);\n}\nsd-sheet > ._sheet-container > table > * > tr > *:last-child {\n  border-right: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > * > tr:last-child > * {\n  border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > *:last-child > tr:last-child > td:last-child {\n  border-bottom-right-radius: var(--border-radius-default);\n  overflow: hidden;\n}\nsd-sheet > ._sheet-container > table > * > tr > * {\n  border-right: 1px solid var(--border-color-lighter);\n  border-bottom: 1px solid var(--border-color-lighter);\n  white-space: nowrap;\n  overflow: hidden;\n  padding: 0;\n  position: relative;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed:has(+ :not(._fixed)) + :not(._fixed):not([data-c=\"0\"]) {\n  border-left: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > * > tr > *._feature-cell {\n  background: var(--theme-gray-lightest);\n  min-width: calc(var(--font-size-default) + 2px + var(--sheet-ph) * 2);\n  padding: var(--sheet-pv) var(--sheet-ph);\n  text-align: left;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._feature-cell > ng-icon {\n  cursor: pointer;\n  color: var(--text-trans-lightest);\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed {\n  position: sticky;\n  left: 0;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed:has(+ :not(._fixed)) {\n  border-right: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > thead {\n  position: sticky;\n  top: 0;\n  z-index: 3;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th {\n  position: relative;\n  background: var(--theme-gray-lightest);\n  vertical-align: middle;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._fixed {\n  z-index: 4;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._last-depth {\n  border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._feature-cell {\n  border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._sort {\n  cursor: pointer;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._sort:hover {\n  text-decoration: underline;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th > ._headerContent > ._sort-icon {\n  padding: var(--gap-xs) var(--gap-xs) var(--gap-xs) 0;\n  background-color: var(--theme-gray-lightest);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th > ._resizer {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 2px;\n  cursor: ew-resize;\n}\nsd-sheet > ._sheet-container > table > thead:has(> tr._summary-row) > tr > th._last-depth {\n  border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > thead:has(> tr._summary-row) > tr._summary-row > th {\n  background: var(--theme-warning-lightest);\n  text-align: left;\n  border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td {\n  font-family: var(--font-family-field);\n  background: var(--control-color);\n  vertical-align: top;\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td._fixed {\n  z-index: 2;\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td > ._depth-indicator {\n  display: inline-block;\n  margin-top: 0.4em;\n  width: 0.5em;\n  height: 0.5em;\n  border-left: 1px solid var(--text-trans-default);\n  border-bottom: 1px solid var(--text-trans-default);\n  vertical-align: top;\n}\nsd-sheet > ._sheet-container > ._focus-row-indicator {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  background: rgba(158, 158, 158, 0.1);\n  z-index: 6;\n}\nsd-sheet > ._sheet-container > ._focus-row-indicator > ._focus-cell-indicator {\n  position: absolute;\n  border: 2px solid var(--theme-primary-default);\n  border-radius: var(--border-radius-default);\n}\nsd-sheet > ._sheet-container > ._resize-indicator {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  height: 100%;\n  border: 1px dotted var(--border-color-light);\n  z-index: 7;\n}\nsd-sheet > ._sheet-container > ._select-row-indicator-container {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n}\nsd-sheet > ._sheet-container > ._select-row-indicator-container > ._select-row-indicator {\n  display: block;\n  left: 0;\n  position: absolute;\n  pointer-events: none;\n  background: var(--theme-primary-default);\n  opacity: 0.1;\n}\nsd-sheet ._p-sheet {\n  padding: var(--sheet-pv) var(--sheet-ph);\n}\nsd-sheet[data-sd-focus-mode=row] > ._sheet-container > ._focus-row-indicator > ._focus-cell-indicator {\n  display: none !important;\n}\nsd-sheet[data-sd-inset=true] {\n  border: none;\n  border-radius: 0;\n}"] }]
     }], null, { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], autoSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelect", required: false }] }], getItemSelectableFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getItemSelectableFn", required: false }] }], getChildrenFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getChildrenFn", required: false }] }], useAutoSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAutoSort", required: false }] }], visiblePageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "visiblePageCount", required: false }] }], totalPageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPageCount", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], focusMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusMode", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], getItemCellClassFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getItemCellClassFn", required: false }] }], getItemCellStyleFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getItemCellStyleFn", required: false }] }], hideConfigBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideConfigBar", required: false }] }], itemKeydown: [{ type: i0.Output, args: ["itemKeydown"] }], cellKeydown: [{ type: i0.Output, args: ["cellKeydown"] }], selectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedKeys", required: false }] }, { type: i0.Output, args: ["selectedKeysChange"] }], expandedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedItems", required: false }] }, { type: i0.Output, args: ["expandedItemsChange"] }], sorts: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorts", required: false }] }, { type: i0.Output, args: ["sortsChange"] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], columnControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdSheetColumn), { isSignal: true }] }], columnControlsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnControlsInput", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSheet, { className: "SdSheet", filePath: "packages/angular/src/data/sheet/sd-sheet.ts", lineNumber: 585 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSheet, { className: "SdSheet", filePath: "packages/angular/src/data/sheet/sd-sheet.ts", lineNumber: 586 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"sd-tiptap-editor.d.ts","sourceRoot":"","sources":["../../../src/features/editor/sd-tiptap-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAcL,KAAK,cAAc,EACpB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;;AAqBzD,qBAsMa,cAAc;IACzB,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;IACzE,UAAU,kEAA2B;IAErC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA+C;IACtE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsB;IAElD,QAAQ,CAAC,YAAY,WAMnB;IAEF,qDAAqD;IACrD,MAAM,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAqB;IAE/D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA6C;IACtE,YAAY,kEAA8B;IAC1C,WAAW,yBAA6B;IACxC,aAAa,yBAA+B;IAC5C,eAAe,4CAAiC;IAChD,OAAO,wBAAyB;IAChC,iBAAiB,gCAAmC;IACpD,UAAU,sCAA4B;IAEtC,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,eAAe,CAA6B;IAEpD,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CASjC;;IA6DH,OAAO,CAAC,aAAa;IAoBrB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,kBAAkB;yCAtIf,cAAc;2CAAd,cAAc;CA4I1B"}
+{"version":3,"file":"sd-tiptap-editor.d.ts","sourceRoot":"","sources":["../../../src/features/editor/sd-tiptap-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAcL,KAAK,cAAc,EACpB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;;AAqBzD,qBAuMa,cAAc;IACzB,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;IACzE,UAAU,kEAA2B;IAErC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA+C;IACtE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsB;IAElD,QAAQ,CAAC,YAAY,WAMnB;IAEF,qDAAqD;IACrD,MAAM,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAqB;IAE/D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA6C;IACtE,YAAY,kEAA8B;IAC1C,WAAW,yBAA6B;IACxC,aAAa,yBAA+B;IAC5C,eAAe,4CAAiC;IAChD,OAAO,wBAAyB;IAChC,iBAAiB,gCAAmC;IACpD,UAAU,sCAA4B;IAEtC,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,eAAe,CAA6B;IAEpD,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CASjC;;IA6DH,OAAO,CAAC,aAAa;IAoBrB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,kBAAkB;yCAtIf,cAAc;2CAAd,cAAc;CA4I1B"}