@simplysm/angular 14.0.100 → 14.0.102

package/dist/features/visual/sd-calendar.js

@@ -126,7 +126,7 @@ export class SdCalendar {
             i0.ɵɵtextInterpolate1(" ", ctx.weeks[(ctx.weekStartDay() + 6) % 7], " ");
             i0.ɵɵadvance(2);
             i0.ɵɵrepeater(ctx.dataTable());
-        } }, dependencies: [NgTemplateOutlet, FormatPipe], styles: ["sd-calendar > table {\n  border-collapse: collapse;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--border-radius-default);\n  overflow: hidden;\n}\nsd-calendar > table > * > tr > * {\n  padding: var(--gap-sm) var(--gap-default);\n  border: 1px solid var(--theme-gray-light);\n  width: 14.2857142857%;\n}\nsd-calendar > table > thead > tr > th {\n  background: var(--theme-gray-lighter);\n  height: 10%;\n}\nsd-calendar > table > tbody > tr > td {\n  vertical-align: top;\n  height: 15%;\n}\nsd-calendar > table > tbody > tr > td > .day {\n  margin-bottom: var(--gap-sm);\n}\nsd-calendar > table > tbody > tr > td.not-current {\n  background: var(--theme-gray-lightest);\n}\nsd-calendar > table > tbody > tr > td.not-current > .day {\n  color: var(--theme-gray-default);\n}\nsd-calendar > table > tbody > tr > td > .content {\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: column;\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-calendar > table > tbody > tr > td > .content {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content > * + * {\n    margin-top: var(--gap-sm);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxs {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxs > * + * {\n    margin-top: var(--gap-xxs);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xs {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xs > * + * {\n    margin-top: var(--gap-xs);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-sm {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-sm > * + * {\n    margin-top: var(--gap-sm);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-default {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-default > * + * {\n    margin-top: var(--gap-default);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-lg {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-lg > * + * {\n    margin-top: var(--gap-lg);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xl {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xl > * + * {\n    margin-top: var(--gap-xl);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxl {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxl > * + * {\n    margin-top: var(--gap-xxl);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-0 {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-0 > * + * {\n    margin-top: var(--gap-0);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-auto {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-auto > * + * {\n    margin-top: var(--gap-auto);\n  }\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [NgTemplateOutlet, FormatPipe], 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-calendar > table {\n  border-collapse: collapse;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--border-radius-default);\n  overflow: hidden;\n}\nsd-calendar > table > * > tr > * {\n  padding: var(--gap-sm) var(--gap-default);\n  border: 1px solid var(--theme-gray-light);\n  width: 14.2857142857%;\n}\nsd-calendar > table > thead > tr > th {\n  background: var(--theme-gray-lighter);\n  height: 10%;\n}\nsd-calendar > table > tbody > tr > td {\n  vertical-align: top;\n  height: 15%;\n}\nsd-calendar > table > tbody > tr > td > .day {\n  margin-bottom: var(--gap-sm);\n}\nsd-calendar > table > tbody > tr > td.not-current {\n  background: var(--theme-gray-lightest);\n}\nsd-calendar > table > tbody > tr > td.not-current > .day {\n  color: var(--theme-gray-default);\n}\nsd-calendar > table > tbody > tr > td > .content {\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: column;\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-calendar > table > tbody > tr > td > .content {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content > * + * {\n    margin-top: var(--gap-sm);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxs {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxs > * + * {\n    margin-top: var(--gap-xxs);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xs {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xs > * + * {\n    margin-top: var(--gap-xs);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-sm {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-sm > * + * {\n    margin-top: var(--gap-sm);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-default {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-default > * + * {\n    margin-top: var(--gap-default);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-lg {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-lg > * + * {\n    margin-top: var(--gap-lg);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xl {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xl > * + * {\n    margin-top: var(--gap-xl);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxl {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxl > * + * {\n    margin-top: var(--gap-xxl);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-0 {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-0 > * + * {\n    margin-top: var(--gap-0);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-auto {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-auto > * + * {\n    margin-top: var(--gap-auto);\n  }\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCalendar, [{
         type: Component,
@@ -184,6 +184,6 @@ export class SdCalendar {
         }
       </tbody>
     </table>
-  `, styles: ["sd-calendar > table {\n  border-collapse: collapse;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--border-radius-default);\n  overflow: hidden;\n}\nsd-calendar > table > * > tr > * {\n  padding: var(--gap-sm) var(--gap-default);\n  border: 1px solid var(--theme-gray-light);\n  width: 14.2857142857%;\n}\nsd-calendar > table > thead > tr > th {\n  background: var(--theme-gray-lighter);\n  height: 10%;\n}\nsd-calendar > table > tbody > tr > td {\n  vertical-align: top;\n  height: 15%;\n}\nsd-calendar > table > tbody > tr > td > .day {\n  margin-bottom: var(--gap-sm);\n}\nsd-calendar > table > tbody > tr > td.not-current {\n  background: var(--theme-gray-lightest);\n}\nsd-calendar > table > tbody > tr > td.not-current > .day {\n  color: var(--theme-gray-default);\n}\nsd-calendar > table > tbody > tr > td > .content {\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: column;\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-calendar > table > tbody > tr > td > .content {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content > * + * {\n    margin-top: var(--gap-sm);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxs {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxs > * + * {\n    margin-top: var(--gap-xxs);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xs {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xs > * + * {\n    margin-top: var(--gap-xs);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-sm {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-sm > * + * {\n    margin-top: var(--gap-sm);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-default {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-default > * + * {\n    margin-top: var(--gap-default);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-lg {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-lg > * + * {\n    margin-top: var(--gap-lg);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xl {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xl > * + * {\n    margin-top: var(--gap-xl);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxl {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxl > * + * {\n    margin-top: var(--gap-xxl);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-0 {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-0 > * + * {\n    margin-top: var(--gap-0);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-auto {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-auto > * + * {\n    margin-top: 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-calendar > table {\n  border-collapse: collapse;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--border-radius-default);\n  overflow: hidden;\n}\nsd-calendar > table > * > tr > * {\n  padding: var(--gap-sm) var(--gap-default);\n  border: 1px solid var(--theme-gray-light);\n  width: 14.2857142857%;\n}\nsd-calendar > table > thead > tr > th {\n  background: var(--theme-gray-lighter);\n  height: 10%;\n}\nsd-calendar > table > tbody > tr > td {\n  vertical-align: top;\n  height: 15%;\n}\nsd-calendar > table > tbody > tr > td > .day {\n  margin-bottom: var(--gap-sm);\n}\nsd-calendar > table > tbody > tr > td.not-current {\n  background: var(--theme-gray-lightest);\n}\nsd-calendar > table > tbody > tr > td.not-current > .day {\n  color: var(--theme-gray-default);\n}\nsd-calendar > table > tbody > tr > td > .content {\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: column;\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-calendar > table > tbody > tr > td > .content {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content > * + * {\n    margin-top: var(--gap-sm);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxs {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxs > * + * {\n    margin-top: var(--gap-xxs);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xs {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xs > * + * {\n    margin-top: var(--gap-xs);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-sm {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-sm > * + * {\n    margin-top: var(--gap-sm);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-default {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-default > * + * {\n    margin-top: var(--gap-default);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-lg {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-lg > * + * {\n    margin-top: var(--gap-lg);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xl {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xl > * + * {\n    margin-top: var(--gap-xl);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxl {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-xxl > * + * {\n    margin-top: var(--gap-xxl);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-0 {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-0 > * + * {\n    margin-top: var(--gap-0);\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-auto {\n    gap: 0;\n  }\n  sd-calendar > table > tbody > tr > td > .content.gap-auto > * + * {\n    margin-top: var(--gap-auto);\n  }\n}"] }]
     }], null, { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], getItemDateFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getItemDateFn", required: true }] }], yearMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearMonth", required: false }] }], itemTplRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdItemOfTemplate), { ...{ read: TemplateRef }, isSignal: true }] }], weekStartDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStartDay", required: false }] }], minDaysInFirstWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDaysInFirstWeek", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdCalendar, { className: "SdCalendar", filePath: "packages/angular/src/features/visual/sd-calendar.ts", lineNumber: 131 }); })();

package/dist/features/visual/sd-label.js

@@ -12,7 +12,7 @@ export class SdLabel {
         } }, inputs: { theme: [1, "theme"], color: [1, "color"], clickable: [1, "clickable"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdLabel_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["sd-label {\n  display: inline-block;\n  background: var(--theme-gray-darker);\n  color: var(--text-trans-rev-default);\n  padding: 0 var(--gap-sm);\n  border-radius: var(--border-radius-default);\n  text-indent: 0;\n}\nsd-label[data-sd-theme=gray] {\n  background: var(--theme-gray-default);\n}\nsd-label[data-sd-theme=blue-gray] {\n  background: var(--theme-blue-gray-default);\n}\nsd-label[data-sd-theme=primary] {\n  background: var(--theme-primary-default);\n}\nsd-label[data-sd-theme=secondary] {\n  background: var(--theme-secondary-default);\n}\nsd-label[data-sd-theme=info] {\n  background: var(--theme-info-default);\n}\nsd-label[data-sd-theme=success] {\n  background: var(--theme-success-default);\n}\nsd-label[data-sd-theme=warning] {\n  background: var(--theme-warning-default);\n}\nsd-label[data-sd-theme=danger] {\n  background: var(--theme-danger-default);\n}\nsd-label[data-sd-clickable=true] {\n  cursor: pointer;\n}\nsd-label[data-sd-clickable=true]:hover {\n  background: var(--theme-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=gray] {\n  background: var(--theme-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=blue-gray] {\n  background: var(--theme-blue-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=primary] {\n  background: var(--theme-primary-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=secondary] {\n  background: var(--theme-secondary-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=info] {\n  background: var(--theme-info-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=success] {\n  background: var(--theme-success-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=warning] {\n  background: var(--theme-warning-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=danger] {\n  background: var(--theme-danger-dark);\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-label {\n  display: inline-block;\n  background: var(--theme-gray-darker);\n  color: var(--text-trans-rev-default);\n  padding: 0 var(--gap-sm);\n  border-radius: var(--border-radius-default);\n  text-indent: 0;\n}\nsd-label[data-sd-theme=gray] {\n  background: var(--theme-gray-default);\n}\nsd-label[data-sd-theme=blue-gray] {\n  background: var(--theme-blue-gray-default);\n}\nsd-label[data-sd-theme=primary] {\n  background: var(--theme-primary-default);\n}\nsd-label[data-sd-theme=secondary] {\n  background: var(--theme-secondary-default);\n}\nsd-label[data-sd-theme=info] {\n  background: var(--theme-info-default);\n}\nsd-label[data-sd-theme=success] {\n  background: var(--theme-success-default);\n}\nsd-label[data-sd-theme=warning] {\n  background: var(--theme-warning-default);\n}\nsd-label[data-sd-theme=danger] {\n  background: var(--theme-danger-default);\n}\nsd-label[data-sd-clickable=true] {\n  cursor: pointer;\n}\nsd-label[data-sd-clickable=true]:hover {\n  background: var(--theme-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=gray] {\n  background: var(--theme-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=blue-gray] {\n  background: var(--theme-blue-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=primary] {\n  background: var(--theme-primary-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=secondary] {\n  background: var(--theme-secondary-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=info] {\n  background: var(--theme-info-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=success] {\n  background: var(--theme-success-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=warning] {\n  background: var(--theme-warning-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=danger] {\n  background: var(--theme-danger-dark);\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdLabel, [{
         type: Component,
@@ -22,6 +22,6 @@ export class SdLabel {
                     "[attr.data-sd-clickable]": "clickable()",
                 }, template: `
     <ng-content></ng-content>
-  `, styles: ["sd-label {\n  display: inline-block;\n  background: var(--theme-gray-darker);\n  color: var(--text-trans-rev-default);\n  padding: 0 var(--gap-sm);\n  border-radius: var(--border-radius-default);\n  text-indent: 0;\n}\nsd-label[data-sd-theme=gray] {\n  background: var(--theme-gray-default);\n}\nsd-label[data-sd-theme=blue-gray] {\n  background: var(--theme-blue-gray-default);\n}\nsd-label[data-sd-theme=primary] {\n  background: var(--theme-primary-default);\n}\nsd-label[data-sd-theme=secondary] {\n  background: var(--theme-secondary-default);\n}\nsd-label[data-sd-theme=info] {\n  background: var(--theme-info-default);\n}\nsd-label[data-sd-theme=success] {\n  background: var(--theme-success-default);\n}\nsd-label[data-sd-theme=warning] {\n  background: var(--theme-warning-default);\n}\nsd-label[data-sd-theme=danger] {\n  background: var(--theme-danger-default);\n}\nsd-label[data-sd-clickable=true] {\n  cursor: pointer;\n}\nsd-label[data-sd-clickable=true]:hover {\n  background: var(--theme-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=gray] {\n  background: var(--theme-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=blue-gray] {\n  background: var(--theme-blue-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=primary] {\n  background: var(--theme-primary-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=secondary] {\n  background: var(--theme-secondary-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=info] {\n  background: var(--theme-info-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=success] {\n  background: var(--theme-success-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=warning] {\n  background: var(--theme-warning-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=danger] {\n  background: var(--theme-danger-dark);\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-label {\n  display: inline-block;\n  background: var(--theme-gray-darker);\n  color: var(--text-trans-rev-default);\n  padding: 0 var(--gap-sm);\n  border-radius: var(--border-radius-default);\n  text-indent: 0;\n}\nsd-label[data-sd-theme=gray] {\n  background: var(--theme-gray-default);\n}\nsd-label[data-sd-theme=blue-gray] {\n  background: var(--theme-blue-gray-default);\n}\nsd-label[data-sd-theme=primary] {\n  background: var(--theme-primary-default);\n}\nsd-label[data-sd-theme=secondary] {\n  background: var(--theme-secondary-default);\n}\nsd-label[data-sd-theme=info] {\n  background: var(--theme-info-default);\n}\nsd-label[data-sd-theme=success] {\n  background: var(--theme-success-default);\n}\nsd-label[data-sd-theme=warning] {\n  background: var(--theme-warning-default);\n}\nsd-label[data-sd-theme=danger] {\n  background: var(--theme-danger-default);\n}\nsd-label[data-sd-clickable=true] {\n  cursor: pointer;\n}\nsd-label[data-sd-clickable=true]:hover {\n  background: var(--theme-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=gray] {\n  background: var(--theme-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=blue-gray] {\n  background: var(--theme-blue-gray-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=primary] {\n  background: var(--theme-primary-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=secondary] {\n  background: var(--theme-secondary-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=info] {\n  background: var(--theme-info-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=success] {\n  background: var(--theme-success-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=warning] {\n  background: var(--theme-warning-dark);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=danger] {\n  background: var(--theme-danger-dark);\n}"] }]
     }], null, { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdLabel, { className: "SdLabel", filePath: "packages/angular/src/features/visual/sd-label.ts", lineNumber: 60 }); })();

package/dist/features/visual/sd-note.js

@@ -11,7 +11,7 @@ export class SdNote {
         } }, inputs: { theme: [1, "theme"], size: [1, "size"], inset: [1, "inset"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdNote_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["sd-note {\n  display: block;\n  padding: var(--gap-sm) var(--gap-default);\n  background: var(--theme-gray-lightest);\n  border: none;\n  border-radius: var(--border-radius-default);\n}\nsd-note[data-sd-theme=gray] {\n  background: var(--theme-gray-lightest);\n  border: 1px solid var(--theme-gray-lightest);\n}\nsd-note[data-sd-theme=blue-gray] {\n  background: var(--theme-blue-gray-lightest);\n  border: 1px solid var(--theme-blue-gray-lightest);\n}\nsd-note[data-sd-theme=primary] {\n  background: var(--theme-primary-lightest);\n  border: 1px solid var(--theme-primary-lightest);\n}\nsd-note[data-sd-theme=secondary] {\n  background: var(--theme-secondary-lightest);\n  border: 1px solid var(--theme-secondary-lightest);\n}\nsd-note[data-sd-theme=info] {\n  background: var(--theme-info-lightest);\n  border: 1px solid var(--theme-info-lightest);\n}\nsd-note[data-sd-theme=success] {\n  background: var(--theme-success-lightest);\n  border: 1px solid var(--theme-success-lightest);\n}\nsd-note[data-sd-theme=warning] {\n  background: var(--theme-warning-lightest);\n  border: 1px solid var(--theme-warning-lightest);\n}\nsd-note[data-sd-theme=danger] {\n  background: var(--theme-danger-lightest);\n  border: 1px solid var(--theme-danger-lightest);\n}\nsd-note[data-sd-size=sm] {\n  font-size: var(--font-size-sm);\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-note[data-sd-size=lg] {\n  padding: var(--gap-default) var(--gap-lg);\n}\nsd-note[data-sd-inset=true] {\n  border-radius: 0;\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-note {\n  display: block;\n  padding: var(--gap-sm) var(--gap-default);\n  background: var(--theme-gray-lightest);\n  border: none;\n  border-radius: var(--border-radius-default);\n}\nsd-note[data-sd-theme=gray] {\n  background: var(--theme-gray-lightest);\n  border: 1px solid var(--theme-gray-lightest);\n}\nsd-note[data-sd-theme=blue-gray] {\n  background: var(--theme-blue-gray-lightest);\n  border: 1px solid var(--theme-blue-gray-lightest);\n}\nsd-note[data-sd-theme=primary] {\n  background: var(--theme-primary-lightest);\n  border: 1px solid var(--theme-primary-lightest);\n}\nsd-note[data-sd-theme=secondary] {\n  background: var(--theme-secondary-lightest);\n  border: 1px solid var(--theme-secondary-lightest);\n}\nsd-note[data-sd-theme=info] {\n  background: var(--theme-info-lightest);\n  border: 1px solid var(--theme-info-lightest);\n}\nsd-note[data-sd-theme=success] {\n  background: var(--theme-success-lightest);\n  border: 1px solid var(--theme-success-lightest);\n}\nsd-note[data-sd-theme=warning] {\n  background: var(--theme-warning-lightest);\n  border: 1px solid var(--theme-warning-lightest);\n}\nsd-note[data-sd-theme=danger] {\n  background: var(--theme-danger-lightest);\n  border: 1px solid var(--theme-danger-lightest);\n}\nsd-note[data-sd-size=sm] {\n  font-size: var(--font-size-sm);\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-note[data-sd-size=lg] {\n  padding: var(--gap-default) var(--gap-lg);\n}\nsd-note[data-sd-inset=true] {\n  border-radius: 0;\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdNote, [{
         type: Component,
@@ -21,6 +21,6 @@ export class SdNote {
                     "[attr.data-sd-inset]": "inset()",
                 }, template: `
     <ng-content></ng-content>
-  `, styles: ["sd-note {\n  display: block;\n  padding: var(--gap-sm) var(--gap-default);\n  background: var(--theme-gray-lightest);\n  border: none;\n  border-radius: var(--border-radius-default);\n}\nsd-note[data-sd-theme=gray] {\n  background: var(--theme-gray-lightest);\n  border: 1px solid var(--theme-gray-lightest);\n}\nsd-note[data-sd-theme=blue-gray] {\n  background: var(--theme-blue-gray-lightest);\n  border: 1px solid var(--theme-blue-gray-lightest);\n}\nsd-note[data-sd-theme=primary] {\n  background: var(--theme-primary-lightest);\n  border: 1px solid var(--theme-primary-lightest);\n}\nsd-note[data-sd-theme=secondary] {\n  background: var(--theme-secondary-lightest);\n  border: 1px solid var(--theme-secondary-lightest);\n}\nsd-note[data-sd-theme=info] {\n  background: var(--theme-info-lightest);\n  border: 1px solid var(--theme-info-lightest);\n}\nsd-note[data-sd-theme=success] {\n  background: var(--theme-success-lightest);\n  border: 1px solid var(--theme-success-lightest);\n}\nsd-note[data-sd-theme=warning] {\n  background: var(--theme-warning-lightest);\n  border: 1px solid var(--theme-warning-lightest);\n}\nsd-note[data-sd-theme=danger] {\n  background: var(--theme-danger-lightest);\n  border: 1px solid var(--theme-danger-lightest);\n}\nsd-note[data-sd-size=sm] {\n  font-size: var(--font-size-sm);\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-note[data-sd-size=lg] {\n  padding: var(--gap-default) var(--gap-lg);\n}\nsd-note[data-sd-inset=true] {\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-note {\n  display: block;\n  padding: var(--gap-sm) var(--gap-default);\n  background: var(--theme-gray-lightest);\n  border: none;\n  border-radius: var(--border-radius-default);\n}\nsd-note[data-sd-theme=gray] {\n  background: var(--theme-gray-lightest);\n  border: 1px solid var(--theme-gray-lightest);\n}\nsd-note[data-sd-theme=blue-gray] {\n  background: var(--theme-blue-gray-lightest);\n  border: 1px solid var(--theme-blue-gray-lightest);\n}\nsd-note[data-sd-theme=primary] {\n  background: var(--theme-primary-lightest);\n  border: 1px solid var(--theme-primary-lightest);\n}\nsd-note[data-sd-theme=secondary] {\n  background: var(--theme-secondary-lightest);\n  border: 1px solid var(--theme-secondary-lightest);\n}\nsd-note[data-sd-theme=info] {\n  background: var(--theme-info-lightest);\n  border: 1px solid var(--theme-info-lightest);\n}\nsd-note[data-sd-theme=success] {\n  background: var(--theme-success-lightest);\n  border: 1px solid var(--theme-success-lightest);\n}\nsd-note[data-sd-theme=warning] {\n  background: var(--theme-warning-lightest);\n  border: 1px solid var(--theme-warning-lightest);\n}\nsd-note[data-sd-theme=danger] {\n  background: var(--theme-danger-lightest);\n  border: 1px solid var(--theme-danger-lightest);\n}\nsd-note[data-sd-size=sm] {\n  font-size: var(--font-size-sm);\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-note[data-sd-size=lg] {\n  padding: var(--gap-default) var(--gap-lg);\n}\nsd-note[data-sd-inset=true] {\n  border-radius: 0;\n}"] }]
     }], null, { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdNote, { className: "SdNote", filePath: "packages/angular/src/features/visual/sd-note.ts", lineNumber: 60 }); })();

package/dist/features/visual/sd-progress.js

@@ -21,7 +21,7 @@ export class SdProgress {
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 3, ctx.value(), "1.0-2"), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵstyleProp("width", ctx._barWidth());
-        } }, dependencies: [PercentPipe], styles: ["sd-progress {\n  position: relative;\n  display: block;\n  width: 100%;\n  white-space: nowrap;\n  background: var(--theme-gray-lightest);\n  border: 1px solid var(--theme-gray-lightest);\n  border-radius: var(--border-radius-default);\n  overflow: hidden;\n}\nsd-progress > ._content {\n  position: relative;\n  z-index: 2;\n  padding: var(--gap-lg) var(--gap-default);\n}\nsd-progress > ._progress {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  height: 100%;\n}\nsd-progress[data-sd-theme=gray] > ._progress {\n  background: var(--theme-gray-default);\n}\nsd-progress[data-sd-theme=blue-gray] > ._progress {\n  background: var(--theme-blue-gray-default);\n}\nsd-progress[data-sd-theme=primary] > ._progress {\n  background: var(--theme-primary-default);\n}\nsd-progress[data-sd-theme=secondary] > ._progress {\n  background: var(--theme-secondary-default);\n}\nsd-progress[data-sd-theme=info] > ._progress {\n  background: var(--theme-info-default);\n}\nsd-progress[data-sd-theme=success] > ._progress {\n  background: var(--theme-success-default);\n}\nsd-progress[data-sd-theme=warning] > ._progress {\n  background: var(--theme-warning-default);\n}\nsd-progress[data-sd-theme=danger] > ._progress {\n  background: var(--theme-danger-default);\n}\nsd-progress[data-sd-size=sm] > ._content {\n  padding: var(--gap-xs) var(--gap-default);\n}\nsd-progress[data-sd-size=lg] > ._content {\n  padding: var(--gap-default) var(--gap-xl);\n}\nsd-progress[data-sd-inset=true] {\n  border-radius: 0;\n  border: none;\n  background: var(--control-color);\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [PercentPipe], 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-progress {\n  position: relative;\n  display: block;\n  width: 100%;\n  white-space: nowrap;\n  background: var(--theme-gray-lightest);\n  border: 1px solid var(--theme-gray-lightest);\n  border-radius: var(--border-radius-default);\n  overflow: hidden;\n}\nsd-progress > ._content {\n  position: relative;\n  z-index: 2;\n  padding: var(--gap-lg) var(--gap-default);\n}\nsd-progress > ._progress {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  height: 100%;\n}\nsd-progress[data-sd-theme=gray] > ._progress {\n  background: var(--theme-gray-default);\n}\nsd-progress[data-sd-theme=blue-gray] > ._progress {\n  background: var(--theme-blue-gray-default);\n}\nsd-progress[data-sd-theme=primary] > ._progress {\n  background: var(--theme-primary-default);\n}\nsd-progress[data-sd-theme=secondary] > ._progress {\n  background: var(--theme-secondary-default);\n}\nsd-progress[data-sd-theme=info] > ._progress {\n  background: var(--theme-info-default);\n}\nsd-progress[data-sd-theme=success] > ._progress {\n  background: var(--theme-success-default);\n}\nsd-progress[data-sd-theme=warning] > ._progress {\n  background: var(--theme-warning-default);\n}\nsd-progress[data-sd-theme=danger] > ._progress {\n  background: var(--theme-danger-default);\n}\nsd-progress[data-sd-size=sm] > ._content {\n  padding: var(--gap-xs) var(--gap-default);\n}\nsd-progress[data-sd-size=lg] > ._content {\n  padding: var(--gap-default) var(--gap-xl);\n}\nsd-progress[data-sd-inset=true] {\n  border-radius: 0;\n  border: none;\n  background: var(--control-color);\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdProgress, [{
         type: Component,
@@ -34,6 +34,6 @@ export class SdProgress {
       {{ value() | percent: "1.0-2" }}
     </div>
     <div class="_progress" [style.width]="_barWidth()"></div>
-  `, styles: ["sd-progress {\n  position: relative;\n  display: block;\n  width: 100%;\n  white-space: nowrap;\n  background: var(--theme-gray-lightest);\n  border: 1px solid var(--theme-gray-lightest);\n  border-radius: var(--border-radius-default);\n  overflow: hidden;\n}\nsd-progress > ._content {\n  position: relative;\n  z-index: 2;\n  padding: var(--gap-lg) var(--gap-default);\n}\nsd-progress > ._progress {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  height: 100%;\n}\nsd-progress[data-sd-theme=gray] > ._progress {\n  background: var(--theme-gray-default);\n}\nsd-progress[data-sd-theme=blue-gray] > ._progress {\n  background: var(--theme-blue-gray-default);\n}\nsd-progress[data-sd-theme=primary] > ._progress {\n  background: var(--theme-primary-default);\n}\nsd-progress[data-sd-theme=secondary] > ._progress {\n  background: var(--theme-secondary-default);\n}\nsd-progress[data-sd-theme=info] > ._progress {\n  background: var(--theme-info-default);\n}\nsd-progress[data-sd-theme=success] > ._progress {\n  background: var(--theme-success-default);\n}\nsd-progress[data-sd-theme=warning] > ._progress {\n  background: var(--theme-warning-default);\n}\nsd-progress[data-sd-theme=danger] > ._progress {\n  background: var(--theme-danger-default);\n}\nsd-progress[data-sd-size=sm] > ._content {\n  padding: var(--gap-xs) var(--gap-default);\n}\nsd-progress[data-sd-size=lg] > ._content {\n  padding: var(--gap-default) var(--gap-xl);\n}\nsd-progress[data-sd-inset=true] {\n  border-radius: 0;\n  border: none;\n  background: var(--control-color);\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-progress {\n  position: relative;\n  display: block;\n  width: 100%;\n  white-space: nowrap;\n  background: var(--theme-gray-lightest);\n  border: 1px solid var(--theme-gray-lightest);\n  border-radius: var(--border-radius-default);\n  overflow: hidden;\n}\nsd-progress > ._content {\n  position: relative;\n  z-index: 2;\n  padding: var(--gap-lg) var(--gap-default);\n}\nsd-progress > ._progress {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  height: 100%;\n}\nsd-progress[data-sd-theme=gray] > ._progress {\n  background: var(--theme-gray-default);\n}\nsd-progress[data-sd-theme=blue-gray] > ._progress {\n  background: var(--theme-blue-gray-default);\n}\nsd-progress[data-sd-theme=primary] > ._progress {\n  background: var(--theme-primary-default);\n}\nsd-progress[data-sd-theme=secondary] > ._progress {\n  background: var(--theme-secondary-default);\n}\nsd-progress[data-sd-theme=info] > ._progress {\n  background: var(--theme-info-default);\n}\nsd-progress[data-sd-theme=success] > ._progress {\n  background: var(--theme-success-default);\n}\nsd-progress[data-sd-theme=warning] > ._progress {\n  background: var(--theme-warning-default);\n}\nsd-progress[data-sd-theme=danger] > ._progress {\n  background: var(--theme-danger-default);\n}\nsd-progress[data-sd-size=sm] > ._content {\n  padding: var(--gap-xs) var(--gap-default);\n}\nsd-progress[data-sd-size=lg] > ._content {\n  padding: var(--gap-default) var(--gap-xl);\n}\nsd-progress[data-sd-inset=true] {\n  border-radius: 0;\n  border: none;\n  background: var(--control-color);\n}"] }]
     }], null, { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdProgress, { className: "SdProgress", filePath: "packages/angular/src/features/visual/sd-progress.ts", lineNumber: 81 }); })();

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

@@ -32,7 +32,7 @@ export class SdSidebarContainer {
             i0.ɵɵdomElementStart(1, "div", 0);
             i0.ɵɵdomListener("click", function SdSidebarContainer_Template_div_click_1_listener() { return ctx.onBackdropClick(); })("keydown.enter", function SdSidebarContainer_Template_div_keydown_enter_1_listener() { return ctx.onBackdropClick(); });
             i0.ɵɵdomElementEnd();
-        } }, styles: ["sd-sidebar-container {\n  display: block;\n  position: relative;\n  height: 100%;\n  padding-left: var(--sidebar-width);\n  transition: padding-left 0.1s ease-out;\n}\nsd-sidebar-container[data-sd-toggle=true] {\n  padding-left: 0;\n  transition: padding-left 0.1s ease-in;\n}\nsd-sidebar-container > ._backdrop {\n  display: none;\n}\n\n@media all and (max-width: 520px) {\n  sd-sidebar-container {\n    padding-left: 0;\n  }\n  sd-sidebar-container > ._backdrop {\n    position: absolute;\n    display: block;\n    z-index: calc(var(--z-index-sidebar) - 1);\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: var(--background-rev-color);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.3s ease-in-out;\n  }\n  sd-sidebar-container[data-sd-toggle=true] > ._backdrop {\n    opacity: 0.6;\n    pointer-events: 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-sidebar-container {\n  display: block;\n  position: relative;\n  height: 100%;\n  padding-left: var(--sidebar-width);\n  transition: padding-left var(--animation-duration) ease-out;\n}\nsd-sidebar-container[data-sd-toggle=true] {\n  padding-left: 0;\n  transition: padding-left var(--animation-duration) ease-in;\n}\nsd-sidebar-container > ._backdrop {\n  display: none;\n}\n\n@media all and (max-width: 520px) {\n  sd-sidebar-container {\n    padding-left: 0;\n  }\n  sd-sidebar-container > ._backdrop {\n    position: absolute;\n    display: block;\n    z-index: calc(var(--z-index-sidebar) - 1);\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: var(--background-rev-color);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--animation-duration) ease-in-out;\n  }\n  sd-sidebar-container[data-sd-toggle=true] > ._backdrop {\n    opacity: 0.6;\n    pointer-events: auto;\n  }\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebarContainer, [{
         type: Component,
@@ -41,6 +41,6 @@ export class SdSidebarContainer {
                 }, template: `
     <ng-content />
     <div class="_backdrop" tabindex="0" role="button" (click)="onBackdropClick()" (keydown.enter)="onBackdropClick()"></div>
-  `, styles: ["sd-sidebar-container {\n  display: block;\n  position: relative;\n  height: 100%;\n  padding-left: var(--sidebar-width);\n  transition: padding-left 0.1s ease-out;\n}\nsd-sidebar-container[data-sd-toggle=true] {\n  padding-left: 0;\n  transition: padding-left 0.1s ease-in;\n}\nsd-sidebar-container > ._backdrop {\n  display: none;\n}\n\n@media all and (max-width: 520px) {\n  sd-sidebar-container {\n    padding-left: 0;\n  }\n  sd-sidebar-container > ._backdrop {\n    position: absolute;\n    display: block;\n    z-index: calc(var(--z-index-sidebar) - 1);\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: var(--background-rev-color);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.3s ease-in-out;\n  }\n  sd-sidebar-container[data-sd-toggle=true] > ._backdrop {\n    opacity: 0.6;\n    pointer-events: 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-sidebar-container {\n  display: block;\n  position: relative;\n  height: 100%;\n  padding-left: var(--sidebar-width);\n  transition: padding-left var(--animation-duration) ease-out;\n}\nsd-sidebar-container[data-sd-toggle=true] {\n  padding-left: 0;\n  transition: padding-left var(--animation-duration) ease-in;\n}\nsd-sidebar-container > ._backdrop {\n  display: none;\n}\n\n@media all and (max-width: 520px) {\n  sd-sidebar-container {\n    padding-left: 0;\n  }\n  sd-sidebar-container > ._backdrop {\n    position: absolute;\n    display: block;\n    z-index: calc(var(--z-index-sidebar) - 1);\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: var(--background-rev-color);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--animation-duration) ease-in-out;\n  }\n  sd-sidebar-container[data-sd-toggle=true] > ._backdrop {\n    opacity: 0.6;\n    pointer-events: auto;\n  }\n}"] }]
     }], () => [], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebarContainer, { className: "SdSidebarContainer", filePath: "packages/angular/src/layout/sidebar/sd-sidebar-container.ts", lineNumber: 69 }); })();

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

@@ -11,7 +11,7 @@ export class SdSidebar {
         } }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdSidebar_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["sd-sidebar {\n  position: absolute;\n  z-index: var(--z-index-sidebar);\n  top: 0;\n  left: 0;\n  width: var(--sidebar-width);\n  height: 100%;\n  background: var(--theme-gray-lightest);\n}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform 0.1s ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform 0.1s ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform 0.3s ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform 0.3s ease-out;\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  }\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-sidebar {\n  position: absolute;\n  z-index: var(--z-index-sidebar);\n  top: 0;\n  left: 0;\n  width: var(--sidebar-width);\n  height: 100%;\n}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--animation-duration) ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform var(--animation-duration) ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--animation-duration) ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform var(--animation-duration) ease-out;\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  }\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebar, [{
         type: Component,
@@ -19,6 +19,6 @@ export class SdSidebar {
                     "[attr.data-sd-toggle]": "toggle()",
                 }, template: `
     <ng-content />
-  `, styles: ["sd-sidebar {\n  position: absolute;\n  z-index: var(--z-index-sidebar);\n  top: 0;\n  left: 0;\n  width: var(--sidebar-width);\n  height: 100%;\n  background: var(--theme-gray-lightest);\n}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform 0.1s ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform 0.1s ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform 0.3s ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform 0.3s ease-out;\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  }\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-sidebar {\n  position: absolute;\n  z-index: var(--z-index-sidebar);\n  top: 0;\n  left: 0;\n  width: var(--sidebar-width);\n  height: 100%;\n}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--animation-duration) ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform var(--animation-duration) ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--animation-duration) ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform var(--animation-duration) ease-out;\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  }\n}"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebar, { className: "SdSidebar", filePath: "packages/angular/src/layout/sidebar/sd-sidebar.ts", lineNumber: 62 }); })();

package/dist/layout/topbar/sd-topbar.js

@@ -37,7 +37,7 @@ export class SdTopbar {
             i0.ɵɵprojection(1);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.hasSidebar() ? 0 : -1);
-        } }, dependencies: [SdButton, NgIcon], styles: ["sd-topbar {\n  min-height: var(--topbar-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  user-select: none;\n  background: var(--theme-gray-lightest);\n  color: var(--text-trans-default);\n  border-bottom: 1px solid var(--border-color-lighter);\n  padding-left: var(--gap-xs);\n}\nsd-topbar > h1 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h2 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h3 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h4 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h5 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h6 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar::-webkit-scrollbar-track {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar-corner {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar {\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  background-color: transparent;\n}\nsd-topbar::-webkit-scrollbar-thumb {\n  background-color: var(--trans-default);\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [SdButton, NgIcon], styles: ["sd-topbar {\n  min-height: var(--topbar-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  user-select: none;\n  color: var(--text-trans-default);\n  border-bottom: 1px solid var(--border-color-lighter);\n  padding-left: var(--gap-xs);\n}\nsd-topbar > h1 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h2 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h3 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h4 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h5 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h6 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar::-webkit-scrollbar-track {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar-corner {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar {\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  background-color: transparent;\n}\nsd-topbar::-webkit-scrollbar-thumb {\n  background-color: var(--trans-default);\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTopbar, [{
         type: Component,
@@ -56,6 +56,6 @@ export class SdTopbar {
     }
     
     <ng-content />
-  `, styles: ["sd-topbar {\n  min-height: var(--topbar-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  user-select: none;\n  background: var(--theme-gray-lightest);\n  color: var(--text-trans-default);\n  border-bottom: 1px solid var(--border-color-lighter);\n  padding-left: var(--gap-xs);\n}\nsd-topbar > h1 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h2 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h3 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h4 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h5 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h6 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar::-webkit-scrollbar-track {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar-corner {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar {\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  background-color: transparent;\n}\nsd-topbar::-webkit-scrollbar-thumb {\n  background-color: var(--trans-default);\n}"] }]
+  `, styles: ["sd-topbar {\n  min-height: var(--topbar-height);\n  overflow-x: auto;\n  overflow-y: hidden;\n  user-select: none;\n  color: var(--text-trans-default);\n  border-bottom: 1px solid var(--border-color-lighter);\n  padding-left: var(--gap-xs);\n}\nsd-topbar > h1 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h2 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h3 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h4 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h5 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar > h6 {\n  padding-right: var(--gap-xl);\n}\nsd-topbar::-webkit-scrollbar-track {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar-corner {\n  background-color: var(--trans-light);\n}\nsd-topbar::-webkit-scrollbar {\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  background-color: transparent;\n}\nsd-topbar::-webkit-scrollbar-thumb {\n  background-color: var(--trans-default);\n}"] }]
     }], null, { sidebarContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarContainer", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTopbar, { className: "SdTopbar", filePath: "packages/angular/src/layout/topbar/sd-topbar.ts", lineNumber: 78 }); })();

package/package.json

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

package/scss/commons/_colors.scss

@@ -0,0 +1,326 @@
+@use "sass:map";
+@use "sass:color";
+
+// oklch 미지원 브라우저 호환을 위해 빌드 타임에 rgb 로 변환해 저장
+@function to-rgb($oklch-color) {
+  @return color.to-space($oklch-color, rgb);
+}
+
+// Tailwind CSS v4 color palette (oklch 원본 → rgb 변환 저장)
+$colors: (
+  red: (
+    50: to-rgb(oklch(97.1% 0.013 17.38)),
+    100: to-rgb(oklch(93.6% 0.032 17.717)),
+    200: to-rgb(oklch(88.5% 0.062 18.334)),
+    300: to-rgb(oklch(80.8% 0.114 19.571)),
+    400: to-rgb(oklch(70.4% 0.191 22.216)),
+    500: to-rgb(oklch(63.7% 0.237 25.331)),
+    600: to-rgb(oklch(57.7% 0.245 27.325)),
+    700: to-rgb(oklch(50.5% 0.213 27.518)),
+    800: to-rgb(oklch(44.4% 0.177 26.899)),
+    900: to-rgb(oklch(39.6% 0.141 25.723)),
+    950: to-rgb(oklch(25.8% 0.092 26.042)),
+  ),
+  orange: (
+    50: to-rgb(oklch(98% 0.016 73.684)),
+    100: to-rgb(oklch(95.4% 0.038 75.164)),
+    200: to-rgb(oklch(90.1% 0.076 70.697)),
+    300: to-rgb(oklch(83.7% 0.128 66.29)),
+    400: to-rgb(oklch(75% 0.183 55.934)),
+    500: to-rgb(oklch(70.5% 0.213 47.604)),
+    600: to-rgb(oklch(64.6% 0.222 41.116)),
+    700: to-rgb(oklch(55.3% 0.195 38.402)),
+    800: to-rgb(oklch(47% 0.157 37.304)),
+    900: to-rgb(oklch(40.8% 0.123 38.172)),
+    950: to-rgb(oklch(26.6% 0.079 36.259)),
+  ),
+  amber: (
+    50: to-rgb(oklch(98.7% 0.022 95.277)),
+    100: to-rgb(oklch(96.2% 0.059 95.617)),
+    200: to-rgb(oklch(92.4% 0.12 95.746)),
+    300: to-rgb(oklch(87.9% 0.169 91.605)),
+    400: to-rgb(oklch(82.8% 0.189 84.429)),
+    500: to-rgb(oklch(76.9% 0.188 70.08)),
+    600: to-rgb(oklch(66.6% 0.179 58.318)),
+    700: to-rgb(oklch(55.5% 0.163 48.998)),
+    800: to-rgb(oklch(47.3% 0.137 46.201)),
+    900: to-rgb(oklch(41.4% 0.112 45.904)),
+    950: to-rgb(oklch(27.9% 0.077 45.635)),
+  ),
+  yellow: (
+    50: to-rgb(oklch(98.7% 0.026 102.212)),
+    100: to-rgb(oklch(97.3% 0.071 103.193)),
+    200: to-rgb(oklch(94.5% 0.129 101.54)),
+    300: to-rgb(oklch(90.5% 0.182 98.111)),
+    400: to-rgb(oklch(85.2% 0.199 91.936)),
+    500: to-rgb(oklch(79.5% 0.184 86.047)),
+    600: to-rgb(oklch(68.1% 0.162 75.834)),
+    700: to-rgb(oklch(55.4% 0.135 66.442)),
+    800: to-rgb(oklch(47.6% 0.114 61.907)),
+    900: to-rgb(oklch(42.1% 0.095 57.708)),
+    950: to-rgb(oklch(28.6% 0.066 53.813)),
+  ),
+  lime: (
+    50: to-rgb(oklch(98.6% 0.031 120.757)),
+    100: to-rgb(oklch(96.7% 0.067 122.328)),
+    200: to-rgb(oklch(93.8% 0.127 124.321)),
+    300: to-rgb(oklch(89.7% 0.196 126.665)),
+    400: to-rgb(oklch(84.1% 0.238 128.85)),
+    500: to-rgb(oklch(76.8% 0.233 130.85)),
+    600: to-rgb(oklch(64.8% 0.2 131.684)),
+    700: to-rgb(oklch(53.2% 0.157 131.589)),
+    800: to-rgb(oklch(45.3% 0.124 130.933)),
+    900: to-rgb(oklch(40.5% 0.101 131.063)),
+    950: to-rgb(oklch(27.4% 0.072 132.109)),
+  ),
+  green: (
+    50: to-rgb(oklch(98.2% 0.018 155.826)),
+    100: to-rgb(oklch(96.2% 0.044 156.743)),
+    200: to-rgb(oklch(92.5% 0.084 155.995)),
+    300: to-rgb(oklch(87.1% 0.15 154.449)),
+    400: to-rgb(oklch(79.2% 0.209 151.711)),
+    500: to-rgb(oklch(72.3% 0.219 149.579)),
+    600: to-rgb(oklch(62.7% 0.194 149.214)),
+    700: to-rgb(oklch(52.7% 0.154 150.069)),
+    800: to-rgb(oklch(44.8% 0.119 151.328)),
+    900: to-rgb(oklch(39.3% 0.095 152.535)),
+    950: to-rgb(oklch(26.6% 0.065 152.934)),
+  ),
+  emerald: (
+    50: to-rgb(oklch(97.9% 0.021 166.113)),
+    100: to-rgb(oklch(95% 0.052 163.051)),
+    200: to-rgb(oklch(90.5% 0.093 164.15)),
+    300: to-rgb(oklch(84.5% 0.143 164.978)),
+    400: to-rgb(oklch(76.5% 0.177 163.223)),
+    500: to-rgb(oklch(69.6% 0.17 162.48)),
+    600: to-rgb(oklch(59.6% 0.145 163.225)),
+    700: to-rgb(oklch(50.8% 0.118 165.612)),
+    800: to-rgb(oklch(43.2% 0.095 166.913)),
+    900: to-rgb(oklch(37.8% 0.077 168.94)),
+    950: to-rgb(oklch(26.2% 0.051 172.552)),
+  ),
+  teal: (
+    50: to-rgb(oklch(98.4% 0.014 180.72)),
+    100: to-rgb(oklch(95.3% 0.051 180.801)),
+    200: to-rgb(oklch(91% 0.096 180.426)),
+    300: to-rgb(oklch(85.5% 0.138 181.071)),
+    400: to-rgb(oklch(77.7% 0.152 181.912)),
+    500: to-rgb(oklch(70.4% 0.14 182.503)),
+    600: to-rgb(oklch(60% 0.118 184.704)),
+    700: to-rgb(oklch(51.1% 0.096 186.391)),
+    800: to-rgb(oklch(43.7% 0.078 188.216)),
+    900: to-rgb(oklch(38.6% 0.063 188.416)),
+    950: to-rgb(oklch(27.7% 0.046 192.524)),
+  ),
+  cyan: (
+    50: to-rgb(oklch(98.4% 0.019 200.873)),
+    100: to-rgb(oklch(95.6% 0.045 203.388)),
+    200: to-rgb(oklch(91.7% 0.08 205.041)),
+    300: to-rgb(oklch(86.5% 0.127 207.078)),
+    400: to-rgb(oklch(78.9% 0.154 211.53)),
+    500: to-rgb(oklch(71.5% 0.143 215.221)),
+    600: to-rgb(oklch(60.9% 0.126 221.723)),
+    700: to-rgb(oklch(52% 0.105 223.128)),
+    800: to-rgb(oklch(45% 0.085 224.283)),
+    900: to-rgb(oklch(39.8% 0.07 227.392)),
+    950: to-rgb(oklch(30.2% 0.056 229.695)),
+  ),
+  sky: (
+    50: to-rgb(oklch(97.7% 0.013 236.62)),
+    100: to-rgb(oklch(95.1% 0.026 236.824)),
+    200: to-rgb(oklch(90.1% 0.058 230.902)),
+    300: to-rgb(oklch(82.8% 0.111 230.318)),
+    400: to-rgb(oklch(74.6% 0.16 232.661)),
+    500: to-rgb(oklch(68.5% 0.169 237.323)),
+    600: to-rgb(oklch(58.8% 0.158 241.966)),
+    700: to-rgb(oklch(50% 0.134 242.749)),
+    800: to-rgb(oklch(44.3% 0.11 240.79)),
+    900: to-rgb(oklch(39.1% 0.09 240.876)),
+    950: to-rgb(oklch(29.3% 0.066 243.157)),
+  ),
+  blue: (
+    50: to-rgb(oklch(97% 0.014 254.604)),
+    100: to-rgb(oklch(93.2% 0.032 255.585)),
+    200: to-rgb(oklch(88.2% 0.059 254.128)),
+    300: to-rgb(oklch(80.9% 0.105 251.813)),
+    400: to-rgb(oklch(70.7% 0.165 254.624)),
+    500: to-rgb(oklch(62.3% 0.214 259.815)),
+    600: to-rgb(oklch(54.6% 0.245 262.881)),
+    700: to-rgb(oklch(48.8% 0.243 264.376)),
+    800: to-rgb(oklch(42.4% 0.199 265.638)),
+    900: to-rgb(oklch(37.9% 0.146 265.522)),
+    950: to-rgb(oklch(28.2% 0.091 267.935)),
+  ),
+  indigo: (
+    50: to-rgb(oklch(96.2% 0.018 272.314)),
+    100: to-rgb(oklch(93% 0.034 272.788)),
+    200: to-rgb(oklch(87% 0.065 274.039)),
+    300: to-rgb(oklch(78.5% 0.115 274.713)),
+    400: to-rgb(oklch(67.3% 0.182 276.935)),
+    500: to-rgb(oklch(58.5% 0.233 277.117)),
+    600: to-rgb(oklch(51.1% 0.262 276.966)),
+    700: to-rgb(oklch(45.7% 0.24 277.023)),
+    800: to-rgb(oklch(39.8% 0.195 277.366)),
+    900: to-rgb(oklch(35.9% 0.144 278.697)),
+    950: to-rgb(oklch(25.7% 0.09 281.288)),
+  ),
+  violet: (
+    50: to-rgb(oklch(96.9% 0.016 293.756)),
+    100: to-rgb(oklch(94.3% 0.029 294.588)),
+    200: to-rgb(oklch(89.4% 0.057 293.283)),
+    300: to-rgb(oklch(81.1% 0.111 293.571)),
+    400: to-rgb(oklch(70.2% 0.183 293.541)),
+    500: to-rgb(oklch(60.6% 0.25 292.717)),
+    600: to-rgb(oklch(54.1% 0.281 293.009)),
+    700: to-rgb(oklch(49.1% 0.27 292.581)),
+    800: to-rgb(oklch(43.2% 0.232 292.759)),
+    900: to-rgb(oklch(38% 0.189 293.745)),
+    950: to-rgb(oklch(28.3% 0.141 291.089)),
+  ),
+  purple: (
+    50: to-rgb(oklch(97.7% 0.014 308.299)),
+    100: to-rgb(oklch(94.6% 0.033 307.174)),
+    200: to-rgb(oklch(90.2% 0.063 306.703)),
+    300: to-rgb(oklch(82.7% 0.119 306.383)),
+    400: to-rgb(oklch(71.4% 0.203 305.504)),
+    500: to-rgb(oklch(62.7% 0.265 303.9)),
+    600: to-rgb(oklch(55.8% 0.288 302.321)),
+    700: to-rgb(oklch(49.6% 0.265 301.924)),
+    800: to-rgb(oklch(43.8% 0.218 303.724)),
+    900: to-rgb(oklch(38.1% 0.176 304.987)),
+    950: to-rgb(oklch(29.1% 0.149 302.717)),
+  ),
+  fuchsia: (
+    50: to-rgb(oklch(97.7% 0.017 320.058)),
+    100: to-rgb(oklch(95.2% 0.037 318.852)),
+    200: to-rgb(oklch(90.3% 0.076 319.62)),
+    300: to-rgb(oklch(83.3% 0.145 321.434)),
+    400: to-rgb(oklch(74% 0.238 322.16)),
+    500: to-rgb(oklch(66.7% 0.295 322.15)),
+    600: to-rgb(oklch(59.1% 0.293 322.896)),
+    700: to-rgb(oklch(51.8% 0.253 323.949)),
+    800: to-rgb(oklch(45.2% 0.211 324.591)),
+    900: to-rgb(oklch(40.1% 0.17 325.612)),
+    950: to-rgb(oklch(29.3% 0.136 325.661)),
+  ),
+  pink: (
+    50: to-rgb(oklch(97.1% 0.014 343.198)),
+    100: to-rgb(oklch(94.8% 0.028 342.258)),
+    200: to-rgb(oklch(89.9% 0.061 343.231)),
+    300: to-rgb(oklch(82.3% 0.12 346.018)),
+    400: to-rgb(oklch(71.8% 0.202 349.761)),
+    500: to-rgb(oklch(65.6% 0.241 354.308)),
+    600: to-rgb(oklch(59.2% 0.249 0.584)),
+    700: to-rgb(oklch(52.5% 0.223 3.958)),
+    800: to-rgb(oklch(45.9% 0.187 3.815)),
+    900: to-rgb(oklch(40.8% 0.153 2.432)),
+    950: to-rgb(oklch(28.4% 0.109 3.907)),
+  ),
+  rose: (
+    50: to-rgb(oklch(96.9% 0.015 12.422)),
+    100: to-rgb(oklch(94.1% 0.03 12.58)),
+    200: to-rgb(oklch(89.2% 0.058 10.001)),
+    300: to-rgb(oklch(81% 0.117 11.638)),
+    400: to-rgb(oklch(71.2% 0.194 13.428)),
+    500: to-rgb(oklch(64.5% 0.246 16.439)),
+    600: to-rgb(oklch(58.6% 0.253 17.585)),
+    700: to-rgb(oklch(51.4% 0.222 16.935)),
+    800: to-rgb(oklch(45.5% 0.188 13.697)),
+    900: to-rgb(oklch(41% 0.159 10.272)),
+    950: to-rgb(oklch(27.1% 0.105 12.094)),
+  ),
+  slate: (
+    50: to-rgb(oklch(98.4% 0.003 247.858)),
+    100: to-rgb(oklch(96.8% 0.007 247.896)),
+    200: to-rgb(oklch(92.9% 0.013 255.508)),
+    300: to-rgb(oklch(86.9% 0.022 252.894)),
+    400: to-rgb(oklch(70.4% 0.04 256.788)),
+    500: to-rgb(oklch(55.4% 0.046 257.417)),
+    600: to-rgb(oklch(44.6% 0.043 257.281)),
+    700: to-rgb(oklch(37.2% 0.044 257.287)),
+    800: to-rgb(oklch(27.9% 0.041 260.031)),
+    900: to-rgb(oklch(20.8% 0.042 265.755)),
+    950: to-rgb(oklch(12.9% 0.042 264.695)),
+  ),
+  gray: (
+    50: to-rgb(oklch(98.5% 0.002 247.839)),
+    100: to-rgb(oklch(96.7% 0.003 264.542)),
+    200: to-rgb(oklch(92.8% 0.006 264.531)),
+    300: to-rgb(oklch(87.2% 0.01 258.338)),
+    400: to-rgb(oklch(70.7% 0.022 261.325)),
+    500: to-rgb(oklch(55.1% 0.027 264.364)),
+    600: to-rgb(oklch(44.6% 0.03 256.802)),
+    700: to-rgb(oklch(37.3% 0.034 259.733)),
+    800: to-rgb(oklch(27.8% 0.033 256.848)),
+    900: to-rgb(oklch(21% 0.034 264.665)),
+    950: to-rgb(oklch(13% 0.028 261.692)),
+  ),
+  zinc: (
+    50: to-rgb(oklch(98.5% 0 0)),
+    100: to-rgb(oklch(96.7% 0.001 286.375)),
+    200: to-rgb(oklch(92% 0.004 286.32)),
+    300: to-rgb(oklch(87.1% 0.006 286.286)),
+    400: to-rgb(oklch(70.5% 0.015 286.067)),
+    500: to-rgb(oklch(55.2% 0.016 285.938)),
+    600: to-rgb(oklch(44.2% 0.017 285.786)),
+    700: to-rgb(oklch(37% 0.013 285.805)),
+    800: to-rgb(oklch(27.4% 0.006 286.033)),
+    900: to-rgb(oklch(21% 0.006 285.885)),
+    950: to-rgb(oklch(14.1% 0.005 285.823)),
+  ),
+  neutral: (
+    50: to-rgb(oklch(98.5% 0 0)),
+    100: to-rgb(oklch(97% 0 0)),
+    200: to-rgb(oklch(92.2% 0 0)),
+    300: to-rgb(oklch(87% 0 0)),
+    400: to-rgb(oklch(70.8% 0 0)),
+    500: to-rgb(oklch(55.6% 0 0)),
+    600: to-rgb(oklch(43.9% 0 0)),
+    700: to-rgb(oklch(37.1% 0 0)),
+    800: to-rgb(oklch(26.9% 0 0)),
+    900: to-rgb(oklch(20.5% 0 0)),
+    950: to-rgb(oklch(14.5% 0 0)),
+  ),
+  stone: (
+    50: to-rgb(oklch(98.5% 0.001 106.423)),
+    100: to-rgb(oklch(97% 0.001 106.424)),
+    200: to-rgb(oklch(92.3% 0.003 48.717)),
+    300: to-rgb(oklch(86.9% 0.005 56.366)),
+    400: to-rgb(oklch(70.9% 0.01 56.259)),
+    500: to-rgb(oklch(55.3% 0.013 58.071)),
+    600: to-rgb(oklch(44.4% 0.011 73.639)),
+    700: to-rgb(oklch(37.4% 0.01 67.558)),
+    800: to-rgb(oklch(26.8% 0.007 34.298)),
+    900: to-rgb(oklch(21.6% 0.006 56.043)),
+    950: to-rgb(oklch(14.7% 0.004 49.25)),
+  ),
+);
+
+// 색상 조회 헬퍼. shade 생략 시 500(각 색의 기준점) 반환
+@function get($name, $shade: 500) {
+  @return map.get(map.get($colors, $name), $shade);
+}
+
+@function variants($base, $offset: 0%) {
+  @return (
+    lightest: color.scale($base, $lightness: 90% + $offset),
+    lighter: color.scale($base, $lightness: 75% + $offset),
+    light: color.scale($base, $lightness: 60% + $offset),
+    default: color.scale($base, $lightness: 0% + $offset),
+    dark: color.scale($base, $lightness: -10% + $offset),
+    darker: color.scale($base, $lightness: -25% + $offset),
+    darkest: color.scale($base, $lightness: -40% + $offset)
+  );
+}
+
+@function variants-dark($base, $offset: 0%) {
+  @return (
+    darkest: color.mix(white, $base, 80% + $offset),
+    darker: color.mix(white, $base, 60% + $offset),
+    dark: color.mix(white, $base, 40% + $offset),
+    default: color.mix(black, $base, 20% + $offset),
+    light: color.mix(black, $base, 55% + $offset),
+    lighter: color.mix(black, $base, 70% + $offset),
+    lightest: color.mix(black, $base, 80% + $offset)
+  );
+}