@melodicdev/components 1.3.0 → 1.5.0

package/lib/components/forms/button/button.styles.js

@@ -2,6 +2,38 @@ import { css } from '@melodicdev/core';
 export const buttonStyles = () => css `
 	:host {
 		display: inline-block;
+
+		/* --- Colors --- */
+		--ml-button-bg: var(--ml-color-primary);
+		--ml-button-border-color: var(--ml-color-primary);
+		--ml-button-color: var(--ml-color-text-inverse);
+		--ml-button-hover-bg: var(--ml-color-primary-hover);
+		--ml-button-hover-border-color: var(--ml-color-primary-hover);
+		--ml-button-hover-color: var(--ml-color-text-inverse);
+		--ml-button-active-bg: var(--ml-color-primary-active);
+		--ml-button-active-border-color: var(--ml-color-primary-active);
+		--ml-button-shadow: var(--ml-shadow-xs);
+		--ml-button-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* --- Typography --- */
+		--ml-button-font-family: var(--ml-font-sans);
+		--ml-button-font-weight: var(--ml-font-semibold);
+		--ml-button-font-size: var(--ml-text-sm);
+		--ml-button-line-height: var(--ml-leading-tight);
+
+		/* --- Spacing --- */
+		--ml-button-height: 2.5rem;
+		--ml-button-padding: 0 var(--ml-space-3-5);
+		--ml-button-gap: var(--ml-space-2);
+		--ml-button-border-width: var(--ml-border);
+		--ml-button-border-radius: var(--ml-radius);
+
+		/* --- Disabled --- */
+		--ml-button-disabled-opacity: 0.5;
+
+		/* --- Transition --- */
+		--ml-button-transition-duration: var(--ml-duration-150);
+		--ml-button-transition-easing: var(--ml-ease-in-out);
 	}
 
 	:host([full-width]) {
@@ -18,22 +50,27 @@ export const buttonStyles = () => css `
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		gap: var(--ml-space-2);
+		gap: var(--ml-button-gap);
 		position: relative;
-		font-family: var(--ml-font-sans);
-		font-weight: var(--ml-font-semibold);
-		line-height: var(--ml-leading-tight);
+		font-family: var(--ml-button-font-family);
+		font-weight: var(--ml-button-font-weight);
+		font-size: var(--ml-button-font-size);
+		line-height: var(--ml-button-line-height);
 		white-space: nowrap;
 		text-align: center;
-		border: var(--ml-border) solid transparent;
-		border-radius: var(--ml-radius);
-		box-shadow: var(--ml-shadow-xs);
+		height: var(--ml-button-height);
+		padding: var(--ml-button-padding);
+		border: var(--ml-button-border-width) solid var(--ml-button-border-color);
+		border-radius: var(--ml-button-border-radius);
+		background-color: var(--ml-button-bg);
+		color: var(--ml-button-color);
+		box-shadow: var(--ml-button-shadow);
 		transition:
-			background-color var(--ml-duration-150) var(--ml-ease-in-out),
-			border-color var(--ml-duration-150) var(--ml-ease-in-out),
-			color var(--ml-duration-150) var(--ml-ease-in-out),
-			box-shadow var(--ml-duration-150) var(--ml-ease-in-out),
-			transform var(--ml-duration-150) var(--ml-ease-in-out);
+			background-color var(--ml-button-transition-duration) var(--ml-button-transition-easing),
+			border-color var(--ml-button-transition-duration) var(--ml-button-transition-easing),
+			color var(--ml-button-transition-duration) var(--ml-button-transition-easing),
+			box-shadow var(--ml-button-transition-duration) var(--ml-button-transition-easing),
+			transform var(--ml-button-transition-duration) var(--ml-button-transition-easing);
 	}
 
 	.ml-button:focus {
@@ -41,152 +78,140 @@ export const buttonStyles = () => css `
 	}
 
 	.ml-button:focus-visible {
-		box-shadow: var(--ml-shadow-focus-ring);
+		box-shadow: var(--ml-button-focus-shadow);
+	}
+
+	.ml-button:hover:not(:disabled) {
+		background-color: var(--ml-button-hover-bg);
+		border-color: var(--ml-button-hover-border-color);
+		color: var(--ml-button-hover-color);
+	}
+
+	.ml-button:active:not(:disabled) {
+		background-color: var(--ml-button-active-bg);
+		border-color: var(--ml-button-active-border-color);
 	}
 
+	/* --- Size variants --- */
 	.ml-button--xs {
-		height: 2rem;
-		padding: 0 var(--ml-space-3);
-		font-size: var(--ml-text-xs);
-		border-radius: var(--ml-radius-sm);
+		--ml-button-height: 2rem;
+		--ml-button-padding: 0 var(--ml-space-3);
+		--ml-button-font-size: var(--ml-text-xs);
+		--ml-button-border-radius: var(--ml-radius-sm);
 	}
 
 	.ml-button--sm {
-		height: 2.25rem;
-		padding: 0 var(--ml-space-3);
-		font-size: var(--ml-text-sm);
-		border-radius: var(--ml-radius);
+		--ml-button-height: 2.25rem;
+		--ml-button-padding: 0 var(--ml-space-3);
+		--ml-button-font-size: var(--ml-text-sm);
+		--ml-button-border-radius: var(--ml-radius);
 	}
 
 	.ml-button--md {
-		height: 2.5rem;
-		padding: 0 var(--ml-space-3-5);
-		font-size: var(--ml-text-sm);
+		--ml-button-height: 2.5rem;
+		--ml-button-padding: 0 var(--ml-space-3-5);
+		--ml-button-font-size: var(--ml-text-sm);
 	}
 
 	.ml-button--lg {
-		height: 2.75rem;
-		padding: 0 var(--ml-space-4);
-		font-size: var(--ml-text-sm);
+		--ml-button-height: 2.75rem;
+		--ml-button-padding: 0 var(--ml-space-4);
+		--ml-button-font-size: var(--ml-text-sm);
 	}
 
 	.ml-button--xl {
-		height: 3rem;
-		padding: 0 var(--ml-space-5);
-		font-size: var(--ml-text-base);
+		--ml-button-height: 3rem;
+		--ml-button-padding: 0 var(--ml-space-5);
+		--ml-button-font-size: var(--ml-text-base);
 	}
 
 	.ml-button--2xl {
-		height: 3.75rem;
-		padding: 0 var(--ml-space-7);
-		font-size: var(--ml-text-lg);
-		gap: var(--ml-space-3);
+		--ml-button-height: 3.75rem;
+		--ml-button-padding: 0 var(--ml-space-7);
+		--ml-button-font-size: var(--ml-text-lg);
+		--ml-button-gap: var(--ml-space-3);
 	}
 
+	/* --- Variant: primary (default — already set on :host) --- */
 	.ml-button--primary {
-		background-color: var(--ml-color-primary);
-		border-color: var(--ml-color-primary);
-		color: var(--ml-color-text-inverse);
-	}
-
-	.ml-button--primary:hover:not(:disabled) {
-		background-color: var(--ml-color-primary-hover);
-		border-color: var(--ml-color-primary-hover);
-	}
-
-	.ml-button--primary:active:not(:disabled) {
-		background-color: var(--ml-color-primary-active);
-		border-color: var(--ml-color-primary-active);
+		--ml-button-bg: var(--ml-color-primary);
+		--ml-button-border-color: var(--ml-color-primary);
+		--ml-button-color: var(--ml-color-text-inverse);
+		--ml-button-hover-bg: var(--ml-color-primary-hover);
+		--ml-button-hover-border-color: var(--ml-color-primary-hover);
+		--ml-button-active-bg: var(--ml-color-primary-active);
+		--ml-button-active-border-color: var(--ml-color-primary-active);
 	}
 
+	/* --- Variant: secondary --- */
 	.ml-button--secondary {
-		background-color: var(--ml-color-surface);
-		border-color: var(--ml-color-border-strong);
-		color: var(--ml-color-text-secondary);
-	}
-
-	.ml-button--secondary:hover:not(:disabled) {
-		background-color: var(--ml-color-surface-raised);
-		color: var(--ml-color-text);
-	}
-
-	.ml-button--secondary:active:not(:disabled) {
-		background-color: var(--ml-color-surface-sunken);
-	}
-
-	.ml-button--secondary:focus-visible {
-		box-shadow: var(--ml-shadow-ring-gray);
+		--ml-button-bg: var(--ml-color-surface);
+		--ml-button-border-color: var(--ml-color-border-strong);
+		--ml-button-color: var(--ml-color-text-secondary);
+		--ml-button-hover-bg: var(--ml-color-surface-raised);
+		--ml-button-hover-border-color: var(--ml-color-border-strong);
+		--ml-button-hover-color: var(--ml-color-text);
+		--ml-button-active-bg: var(--ml-color-surface-sunken);
+		--ml-button-focus-shadow: var(--ml-shadow-ring-gray);
 	}
 
+	/* --- Variant: outline --- */
 	.ml-button--outline {
-		background-color: transparent;
-		border-color: var(--ml-color-border-strong);
-		color: var(--ml-color-text-secondary);
-		box-shadow: none;
-	}
-
-	.ml-button--outline:hover:not(:disabled) {
-		background-color: var(--ml-color-surface-raised);
-		color: var(--ml-color-text);
-	}
-
-	.ml-button--outline:active:not(:disabled) {
-		background-color: var(--ml-color-surface-sunken);
+		--ml-button-bg: transparent;
+		--ml-button-border-color: var(--ml-color-border-strong);
+		--ml-button-color: var(--ml-color-text-secondary);
+		--ml-button-shadow: none;
+		--ml-button-hover-bg: var(--ml-color-surface-raised);
+		--ml-button-hover-border-color: var(--ml-color-border-strong);
+		--ml-button-hover-color: var(--ml-color-text);
+		--ml-button-active-bg: var(--ml-color-surface-sunken);
 	}
 
+	/* --- Variant: ghost --- */
 	.ml-button--ghost {
-		background-color: transparent;
-		border-color: transparent;
-		color: var(--ml-color-text-muted);
-		box-shadow: none;
-	}
-
-	.ml-button--ghost:hover:not(:disabled) {
-		background-color: var(--ml-color-surface-raised);
-		color: var(--ml-color-text-secondary);
-	}
-
-	.ml-button--ghost:active:not(:disabled) {
-		background-color: var(--ml-color-surface-sunken);
+		--ml-button-bg: transparent;
+		--ml-button-border-color: transparent;
+		--ml-button-color: var(--ml-color-text-muted);
+		--ml-button-shadow: none;
+		--ml-button-hover-bg: var(--ml-color-surface-raised);
+		--ml-button-hover-border-color: transparent;
+		--ml-button-hover-color: var(--ml-color-text-secondary);
+		--ml-button-active-bg: var(--ml-color-surface-sunken);
 	}
 
+	/* --- Variant: danger --- */
 	.ml-button--danger {
-		background-color: var(--ml-color-danger);
-		border-color: var(--ml-color-danger);
-		color: var(--ml-color-text-inverse);
-	}
-
-	.ml-button--danger:hover:not(:disabled) {
-		background-color: var(--ml-color-danger-hover);
-		border-color: var(--ml-color-danger-hover);
-	}
-
-	.ml-button--danger:active:not(:disabled) {
-		background-color: var(--ml-red-800);
-		border-color: var(--ml-red-800);
-	}
-
-	.ml-button--danger:focus-visible {
-		box-shadow: var(--ml-shadow-ring-error);
+		--ml-button-bg: var(--ml-color-danger);
+		--ml-button-border-color: var(--ml-color-danger);
+		--ml-button-color: var(--ml-color-text-inverse);
+		--ml-button-hover-bg: var(--ml-color-danger-hover);
+		--ml-button-hover-border-color: var(--ml-color-danger-hover);
+		--ml-button-active-bg: var(--ml-red-800);
+		--ml-button-active-border-color: var(--ml-red-800);
+		--ml-button-focus-shadow: var(--ml-shadow-ring-error);
 	}
 
+	/* --- Variant: link --- */
 	.ml-button--link {
-		background-color: transparent;
-		border-color: transparent;
-		color: var(--ml-color-text-link);
-		padding: 0;
-		height: auto;
-		box-shadow: none;
-		font-weight: var(--ml-font-medium);
+		--ml-button-bg: transparent;
+		--ml-button-border-color: transparent;
+		--ml-button-color: var(--ml-color-text-link);
+		--ml-button-shadow: none;
+		--ml-button-font-weight: var(--ml-font-medium);
+		--ml-button-height: auto;
+		--ml-button-padding: 0;
+		--ml-button-hover-bg: transparent;
+		--ml-button-hover-border-color: transparent;
+		--ml-button-hover-color: var(--ml-color-text-link-hover);
 	}
 
 	.ml-button--link:hover:not(:disabled) {
-		color: var(--ml-color-text-link-hover);
 		text-decoration: underline;
 	}
 
+	/* --- Disabled --- */
 	.ml-button--disabled {
-		opacity: 0.5;
+		opacity: var(--ml-button-disabled-opacity);
 		cursor: not-allowed;
 		pointer-events: none;
 		box-shadow: none;
@@ -211,7 +236,7 @@ export const buttonStyles = () => css `
 	.ml-button__content {
 		display: inline-flex;
 		align-items: center;
-		gap: var(--ml-space-2);
+		gap: var(--ml-button-gap);
 	}
 
 	::slotted([slot='icon-start']),

package/lib/components/forms/button-group/button-group-item.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-group-item.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button-group/button-group-item.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;GASG;AACH,qBAMa,wBAAyB,YAAW,WAAW;IAC3D,UAAU,EAAG,WAAW,CAAC;IAEzB,4BAA4B;IAC5B,KAAK,SAAM;IAEX,yBAAyB;IACzB,IAAI,SAAM;IAEV,wBAAwB;IACxB,QAAQ,UAAS;IAEjB,qDAAqD;IACrD,MAAM,UAAS;IAEf,uCAAuC;IACvC,aAAa,UAAS;IAEtB,6BAA6B;IAC7B,SAAS,EAAE,IAAI,CAAQ;IAEvB,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,WAAW,QAAO,IAAI,CASpB;CACF"}
+{"version":3,"file":"button-group-item.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button-group/button-group-item.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;GASG;AACH,qBAMa,wBAAyB,YAAW,WAAW;IACpD,UAAU,EAAG,WAAW,CAAC;IAEhC,4BAA4B;IACrB,KAAK,SAAM;IAElB,yBAAyB;IAClB,IAAI,SAAM;IAEjB,wBAAwB;IACjB,QAAQ,UAAS;IAExB,qDAAqD;IAC9C,MAAM,UAAS;IAEtB,uCAAuC;IAChC,aAAa,UAAS;IAE7B,6BAA6B;IACtB,SAAS,EAAE,IAAI,CAAQ;IAE9B,IAAW,UAAU,IAAI,OAAO,CAE/B;IAEM,WAAW,QAAO,IAAI,CAS3B;CACF"}

package/lib/components/forms/button-group/button-group.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button-group/button-group.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAMa,oBAAqB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IAC5E,UAAU,EAAG,WAAW,CAAC;IAEzB,uDAAuD;IACvD,KAAK,SAAM;IAEX,sEAAsE;IACtE,OAAO,EAAE,SAAS,GAAG,OAAO,CAAa;IAEzC,mBAAmB;IACnB,IAAI,EAAE,IAAI,CAAQ;IAElB,+BAA+B;IAC/B,QAAQ,UAAS;IAEjB,gCAAgC;IAChC,QAAQ,UAAS;IAEjB,sCAAsC;IACtC,MAAM,EAAE,MAAM,EAAE,CAAM;IAEtB,QAAQ,IAAI,IAAI;IAKhB,SAAS,IAAI,IAAI;IAIjB,gDAAgD;IAChD,gBAAgB,QAAO,IAAI,CAEzB;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CA8B/B;IAEF,OAAO,CAAC,SAAS;CAYjB"}
+{"version":3,"file":"button-group.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button-group/button-group.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAMa,oBAAqB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACrE,UAAU,EAAG,WAAW,CAAC;IAEhC,uDAAuD;IAChD,KAAK,SAAM;IAElB,sEAAsE;IAC/D,OAAO,EAAE,SAAS,GAAG,OAAO,CAAa;IAEhD,mBAAmB;IACZ,IAAI,EAAE,IAAI,CAAQ;IAEzB,+BAA+B;IACxB,QAAQ,UAAS;IAExB,gCAAgC;IACzB,QAAQ,UAAS;IAExB,sCAAsC;IAC/B,MAAM,EAAE,MAAM,EAAE,CAAM;IAEtB,QAAQ,IAAI,IAAI;IAKhB,SAAS,IAAI,IAAI;IAIxB,gDAAgD;IACzC,gBAAgB,QAAO,IAAI,CAEhC;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CA8B/B;IAEF,OAAO,CAAC,SAAS;CAYjB"}

package/lib/components/forms/button-group/button-group.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button-group/button-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,iDAsB7B,CAAC"}
+{"version":3,"file":"button-group.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button-group/button-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,iDA4B7B,CAAC"}

package/lib/components/forms/button-group/button-group.styles.js

@@ -2,6 +2,12 @@ import { css } from '@melodicdev/core';
 export const buttonGroupStyles = () => css `
 	:host {
 		display: inline-flex;
+
+		/* --- Disabled --- */
+		--ml-button-group-disabled-opacity: 0.5;
+
+		/* --- Spacing --- */
+		--ml-button-group-item-offset: -1px;
 	}
 
 	.ml-button-group {
@@ -10,12 +16,12 @@ export const buttonGroupStyles = () => css `
 	}
 
 	.ml-button-group--disabled {
-		opacity: 0.5;
+		opacity: var(--ml-button-group-disabled-opacity);
 		pointer-events: none;
 	}
 
 	::slotted(ml-button-group-item) {
-		margin-left: -1px;
+		margin-left: var(--ml-button-group-item-offset);
 	}
 
 	::slotted(ml-button-group-item:first-child) {

package/lib/components/forms/checkbox/checkbox.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/checkbox/checkbox.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;;GAWG;AACH,qBAMa,iBAAkB,YAAW,WAAW;IACpD,UAAU,EAAG,WAAW,CAAC;IAEzB,qBAAqB;IACrB,KAAK,SAAM;IAEX,mCAAmC;IACnC,IAAI,SAAM;IAEV,oBAAoB;IACpB,IAAI,EAAE,IAAI,CAAQ;IAElB,oBAAoB;IACpB,OAAO,UAAS;IAEhB,0BAA0B;IAC1B,aAAa,UAAS;IAEtB,qBAAqB;IACrB,QAAQ,UAAS;IAEjB,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAiBjC;CACF"}
+{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/checkbox/checkbox.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;;GAWG;AACH,qBAMa,iBAAkB,YAAW,WAAW;IAC7C,UAAU,EAAG,WAAW,CAAC;IAEhC,qBAAqB;IACd,KAAK,SAAM;IAElB,mCAAmC;IAC5B,IAAI,SAAM;IAEjB,oBAAoB;IACb,IAAI,EAAE,IAAI,CAAQ;IAEzB,oBAAoB;IACb,OAAO,UAAS;IAEvB,0BAA0B;IACnB,aAAa,UAAS;IAE7B,qBAAqB;IACd,QAAQ,UAAS;IAEjB,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAiBxC;CACF"}

package/lib/components/forms/checkbox/checkbox.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAkH1B,CAAC"}
+{"version":3,"file":"checkbox.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAoJ1B,CAAC"}

package/lib/components/forms/checkbox/checkbox.styles.js

@@ -2,18 +2,59 @@ import { css } from '@melodicdev/core';
 export const checkboxStyles = () => css `
 	:host {
 		display: block;
+
+		/* --- Box --- */
+		--ml-checkbox-box-size: 1.25rem;
+		--ml-checkbox-box-bg: var(--ml-color-input-bg);
+		--ml-checkbox-box-border-width: var(--ml-border);
+		--ml-checkbox-box-border-color: var(--ml-color-border-strong);
+		--ml-checkbox-box-border-radius: var(--ml-radius-xs);
+		--ml-checkbox-box-color: var(--ml-color-text-inverse);
+
+		/* --- Checked --- */
+		--ml-checkbox-checked-bg: var(--ml-color-primary);
+		--ml-checkbox-checked-border-color: var(--ml-color-primary);
+		--ml-checkbox-checked-hover-bg: var(--ml-color-primary-hover);
+		--ml-checkbox-checked-hover-border-color: var(--ml-color-primary-hover);
+
+		/* --- Hover --- */
+		--ml-checkbox-hover-border-color: var(--ml-color-primary);
+
+		/* --- Focus --- */
+		--ml-checkbox-focus-border-color: var(--ml-color-primary);
+		--ml-checkbox-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* --- Label --- */
+		--ml-checkbox-label-font-size: var(--ml-text-sm);
+		--ml-checkbox-label-font-weight: var(--ml-font-medium);
+		--ml-checkbox-label-color: var(--ml-color-text-secondary);
+		--ml-checkbox-label-line-height: 1.25rem;
+
+		/* --- Hint --- */
+		--ml-checkbox-hint-font-size: var(--ml-text-sm);
+		--ml-checkbox-hint-color: var(--ml-color-text-muted);
+
+		/* --- Gap --- */
+		--ml-checkbox-gap: var(--ml-space-3);
+
+		/* --- Disabled --- */
+		--ml-checkbox-disabled-opacity: 0.5;
+
+		/* --- Transition --- */
+		--ml-checkbox-transition-duration: var(--ml-duration-150);
+		--ml-checkbox-transition-easing: var(--ml-ease-in-out);
 	}
 
 	.ml-checkbox {
 		display: inline-flex;
 		align-items: flex-start;
-		gap: var(--ml-space-3);
+		gap: var(--ml-checkbox-gap);
 		cursor: pointer;
 		user-select: none;
 	}
 
 	.ml-checkbox:hover:not(.ml-checkbox--disabled) .ml-checkbox__box {
-		border-color: var(--ml-color-primary);
+		border-color: var(--ml-checkbox-hover-border-color);
 	}
 
 	.ml-checkbox__input {
@@ -24,22 +65,24 @@ export const checkboxStyles = () => css `
 	}
 
 	.ml-checkbox__input:focus-visible + .ml-checkbox__box {
-		border-color: var(--ml-color-primary);
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-checkbox-focus-border-color);
+		box-shadow: var(--ml-checkbox-focus-shadow);
 	}
 
 	.ml-checkbox__box {
 		position: relative;
 		flex-shrink: 0;
 		display: block;
-		background-color: var(--ml-color-input-bg);
-		border: var(--ml-border) solid var(--ml-color-border-strong);
-		border-radius: var(--ml-radius-xs);
-		color: var(--ml-color-text-inverse);
+		width: var(--ml-checkbox-box-size);
+		height: var(--ml-checkbox-box-size);
+		background-color: var(--ml-checkbox-box-bg);
+		border: var(--ml-checkbox-box-border-width) solid var(--ml-checkbox-box-border-color);
+		border-radius: var(--ml-checkbox-box-border-radius);
+		color: var(--ml-checkbox-box-color);
 		transition:
-			background-color var(--ml-duration-150) var(--ml-ease-in-out),
-			border-color var(--ml-duration-150) var(--ml-ease-in-out),
-			box-shadow var(--ml-duration-150) var(--ml-ease-in-out);
+			background-color var(--ml-checkbox-transition-duration) var(--ml-checkbox-transition-easing),
+			border-color var(--ml-checkbox-transition-duration) var(--ml-checkbox-transition-easing),
+			box-shadow var(--ml-checkbox-transition-duration) var(--ml-checkbox-transition-easing);
 	}
 
 	.ml-checkbox__check,
@@ -53,18 +96,18 @@ export const checkboxStyles = () => css `
 	}
 
 	.ml-checkbox__label {
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-secondary);
-		line-height: 1.25rem;
+		font-size: var(--ml-checkbox-label-font-size);
+		font-weight: var(--ml-checkbox-label-font-weight);
+		color: var(--ml-checkbox-label-color);
+		line-height: var(--ml-checkbox-label-line-height);
 	}
 
 	.ml-checkbox__hint {
 		display: block;
 		margin-top: var(--ml-space-0-5);
-		margin-left: calc(1.25rem + var(--ml-space-3));
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
+		margin-left: calc(var(--ml-checkbox-box-size) + var(--ml-checkbox-gap));
+		font-size: var(--ml-checkbox-hint-font-size);
+		color: var(--ml-checkbox-hint-color);
 		line-height: var(--ml-leading-tight);
 	}
 
@@ -75,42 +118,33 @@ export const checkboxStyles = () => css `
 
 	.ml-checkbox--disabled .ml-checkbox__box,
 	.ml-checkbox--disabled .ml-checkbox__label {
-		opacity: 0.5;
+		opacity: var(--ml-checkbox-disabled-opacity);
 	}
 
 	.ml-checkbox--checked .ml-checkbox__box,
 	.ml-checkbox--indeterminate .ml-checkbox__box {
-		background-color: var(--ml-color-primary);
-		border-color: var(--ml-color-primary);
+		background-color: var(--ml-checkbox-checked-bg);
+		border-color: var(--ml-checkbox-checked-border-color);
 	}
 
 	.ml-checkbox--checked:hover:not(.ml-checkbox--disabled) .ml-checkbox__box,
 	.ml-checkbox--indeterminate:hover:not(.ml-checkbox--disabled) .ml-checkbox__box {
-		background-color: var(--ml-color-primary-hover);
-		border-color: var(--ml-color-primary-hover);
-	}
-
-	.ml-checkbox--sm .ml-checkbox__box {
-		width: 1rem;
-		height: 1rem;
-	}
-
-	.ml-checkbox--md .ml-checkbox__box {
-		width: 1.25rem;
-		height: 1.25rem;
+		background-color: var(--ml-checkbox-checked-hover-bg);
+		border-color: var(--ml-checkbox-checked-hover-border-color);
 	}
 
-	.ml-checkbox--lg .ml-checkbox__box {
-		width: 1.5rem;
-		height: 1.5rem;
+	/* --- Size variants --- */
+	.ml-checkbox--sm {
+		--ml-checkbox-box-size: 1rem;
 	}
 
-	.ml-checkbox--lg .ml-checkbox__label {
-		font-size: var(--ml-text-base);
-		line-height: 1.5rem;
+	.ml-checkbox--md {
+		--ml-checkbox-box-size: 1.25rem;
 	}
 
-	.ml-checkbox--lg + .ml-checkbox__hint {
-		margin-left: calc(1.5rem + var(--ml-space-3));
+	.ml-checkbox--lg {
+		--ml-checkbox-box-size: 1.5rem;
+		--ml-checkbox-label-font-size: var(--ml-text-base);
+		--ml-checkbox-label-line-height: 1.5rem;
 	}
 `;

package/lib/components/forms/date-picker/calendar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/calendar.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAI/E,MAAM,WAAW,WAAW;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,cAAc,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACpB;AAeD;;;;;;;;;;GAUG;AACH,qBAMa,iBAAkB,YAAW,WAAW,EAAE,MAAM,EAAE,iBAAiB;IAC/E,UAAU,EAAG,WAAW,CAAC;IAEzB,+CAA+C;IAC/C,KAAK,SAAM;IAEX,2CAA2C;IAC3C,GAAG,SAAM;IAET,2CAA2C;IAC3C,GAAG,SAAM;IAET,oCAAoC;IACpC,SAAS,SAAyB;IAElC,4BAA4B;IAC5B,QAAQ,SAA4B;IAEpC,MAAM,IAAI,IAAI;IAId,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI;IAMlE,OAAO,CAAC,eAAe;IASvB,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED,IAAI,QAAQ,IAAI,MAAM,EAAE,CAEvB;IAED,IAAI,IAAI,IAAI,WAAW,EAAE,CAiExB;IAED,QAAQ,QAAO,IAAI,CAEjB;IAEF,QAAQ,QAAO,IAAI,CAEjB;IAEF,SAAS,QAAO,IAAI,CAOlB;IAEF,SAAS,QAAO,IAAI,CAOlB;IAEF,SAAS,GAAI,KAAK,WAAW,KAAG,IAAI,CAalC;IAEF,SAAS,QAAO,IAAI,CAelB;IAEF,OAAO,CAAC,UAAU;CAKlB"}
+{"version":3,"file":"calendar.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/calendar.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAI/E,MAAM,WAAW,WAAW;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,cAAc,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACpB;AAeD;;;;;;;;;;GAUG;AACH,qBAMa,iBAAkB,YAAW,WAAW,EAAE,MAAM,EAAE,iBAAiB;IACxE,UAAU,EAAG,WAAW,CAAC;IAEhC,+CAA+C;IACxC,KAAK,SAAM;IAElB,2CAA2C;IACpC,GAAG,SAAM;IAEhB,2CAA2C;IACpC,GAAG,SAAM;IAEhB,oCAAoC;IAC7B,SAAS,SAAyB;IAEzC,4BAA4B;IACrB,QAAQ,SAA4B;IAEpC,MAAM,IAAI,IAAI;IAId,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI;IAMzE,OAAO,CAAC,eAAe;IASvB,IAAW,UAAU,IAAI,MAAM,CAE9B;IAED,IAAW,QAAQ,IAAI,MAAM,EAAE,CAE9B;IAED,IAAW,IAAI,IAAI,WAAW,EAAE,CAiE/B;IAEM,QAAQ,QAAO,IAAI,CAExB;IAEK,QAAQ,QAAO,IAAI,CAExB;IAEK,SAAS,QAAO,IAAI,CAOzB;IAEK,SAAS,QAAO,IAAI,CAOzB;IAEK,SAAS,GAAI,KAAK,WAAW,KAAG,IAAI,CAazC;IAEK,SAAS,QAAO,IAAI,CAezB;IAEF,OAAO,CAAC,UAAU;CAKlB"}

package/lib/components/forms/date-picker/calendar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/calendar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAwL1B,CAAC"}
+{"version":3,"file":"calendar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/calendar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAqP1B,CAAC"}